其他
【每日一练】08—404页面的动画效果
作者 | 杨小爱
写在前面
到今天，我们已经完成了一年365天52周中的第一周练习，坚持学习一项技能的确不是一件容易的事情，特别是对于已经走出校园，离开教室与监督你学习的老师后，学习真的就靠自律。
想想我自己去年准备CPA（注册会计师）的两门考试就深有体会，CPA一共有6门专业课+一门实操课，行业都称"非常6+1"，如果想要6门考试顺利过关，不说脱两层皮，至少一层皮是跑不了。
而对于我这个外行人来讲，又是纯小白，真的是难上加难，而我为什么还要去系统的学习这个知识呢，主要是为了自己能更好的学习投资理财方面的知识。
而我们学习任何一项技能，都需要先确定好自己的学习目标，也就是说，想明白，自己为什么要去学习这个知识技能。
比方，学习编程，你的学习目标是什么？是为了找工作还是纯个人兴趣爱好。不同的目标，学习的行动力会不一样，这是我的学习体会。
有的人可能会说，我不知道自己的学习目标，如果不知道，那就先行动起来，因为可以一边学一边想。
所以，今天的练习，如果你还不知道怎么实现，也没有关系，你可以对照代码一边敲一边想，不理解的地方，可以百度谷歌，总之，学起来以后，就不会感觉那么难了。
现在，我们就一起来看看今天的小练习：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>【每日一练】08—404页面的动画效果</title></head><body> <div class="box"><h2>4<span class="circle"></span>4</h2></div></body></html>*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif;}body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #03A9F4,#03A9F4 50%,#333 50%,#333); background-attachment: fixed;}.box{ position: relative;}.box h2{ display: flex; justify-content: center; align-items: center; color: #f3f3f3; font-size: 15em; text-shadow: -25px 25px 40px rgba(0,0,0,0.5), -10px 10px 0px rgba(255,255,255,0.5), -20px 20px 0px rgba(255,255,255,0.2), -30px 30px 0px rgba(255,255,255,0.05);}.circle{ position: relative; display: inline-block; width: 200px; height: 200px; background: linear-gradient(to bottom, #fff,#777); border-radius: 50%; box-shadow: -25px 25px 40px rgba(0,0,0,0.5); margin: 0 15px;}.circle:before{ content: ''; position: absolute; width: 180px; height: 180px; right: 0; top: 50%; background: linear-gradient(to top, #fff,#777); border-radius: 50%; transform: translateY(-50%);}.circle:after{ content: ''; position: absolute; width: 100px; height: 100px; right: 0; top: 50%; left: 50%; background: linear-gradient(315deg, #03A9F4,#03A9F4 50%,#333 50%,#333); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: inset 0px 0px 30px rgba(0,0,0,1); animation: animate 5s steps(4) infinite;}@keyframes animate{ 0% { transform: translate(-50%,-50%) rotate(0deg); } 100% { transform: translate(-50%,-50%) rotate(360deg); }}写在最后
以上就是每日一练的全部内容，希望你能坚持学习，不管是编程还是设计还是学一门外语，坚持学习，就会有意外收获。
最后，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号