【每日一练】08—404页面的动画效果
web前端开发
共 2500字，需浏览 5分钟
·
2022-06-21 14:57
作者 | 杨小爱
写在前面
到今天，我们已经完成了一年365天52周中的第一周练习，坚持学习一项技能的确不是一件容易的事情，特别是对于已经走出校园，离开教室与监督你学习的老师后，学习真的就靠自律。
想想我自己去年准备CPA（注册会计师）的两门考试就深有体会，CPA一共有6门专业课+一门实操课，行业都称"非常6+1"，如果想要6门考试顺利过关，不说脱两层皮，至少一层皮是跑不了。
而对于我这个外行人来讲，又是纯小白，真的是难上加难，而我为什么还要去系统的学习这个知识呢，主要是为了自己能更好的学习投资理财方面的知识。
而我们学习任何一项技能，都需要先确定好自己的学习目标，也就是说，想明白，自己为什么要去学习这个知识技能。
比方，学习编程，你的学习目标是什么？是为了找工作还是纯个人兴趣爱好。不同的目标，学习的行动力会不一样，这是我的学习体会。
有的人可能会说，我不知道自己的学习目标，如果不知道，那就先行动起来，因为可以一边学一边想。
所以，今天的练习，如果你还不知道怎么实现，也没有关系，你可以对照代码一边敲一边想，不理解的地方，可以百度谷歌，总之，学起来以后，就不会感觉那么难了。
现在，我们就一起来看看今天的小练习：
<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);}}
写在最后
以上就是每日一练的全部内容，希望你能坚持学习，不管是编程还是设计还是学一门外语，坚持学习，就会有意外收获。
最后，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号
评论