【每日一练】08—404页面的动画效果

图片

作者 | 杨小爱


写在前面

到今天,我们已经完成了一年365天52周中的第一周练习,坚持学习一项技能的确不是一件容易的事情,特别是对于已经走出校园,离开教室与监督你学习的老师后,学习真的就靠自律。

想想我自己去年准备CPA(注册会计师)的两门考试就深有体会,CPA一共有6门专业课+一门实操课,行业都称"非常6+1",如果想要6门考试顺利过关,不说脱两层皮,至少一层皮是跑不了。

而对于我这个外行人来讲,又是纯小白,真的是难上加难,而我为什么还要去系统的学习这个知识呢,主要是为了自己能更好的学习投资理财方面的知识。

而我们学习任何一项技能,都需要先确定好自己的学习目标,也就是说,想明白,自己为什么要去学习这个知识技能。

比方,学习编程,你的学习目标是什么?是为了找工作还是纯个人兴趣爱好。不同的目标,学习的行动力会不一样,这是我的学习体会。

有的人可能会说,我不知道自己的学习目标,如果不知道,那就先行动起来,因为可以一边学一边想。

所以,今天的练习,如果你还不知道怎么实现,也没有关系,你可以对照代码一边敲一边想,不理解的地方,可以百度谷歌,总之,学起来以后,就不会感觉那么难了。

现在,我们就一起来看看今天的小练习:

HTML代码:
<!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>
CSS代码:
*{  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);  }}

写在最后

以上就是每日一练的全部内容,希望你能坚持学习,不管是编程还是设计还是学一门外语,坚持学习,就会有意外收获。

最后,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。

我是杨小爱,我们明天见。

学习更多技能

请点击下方公众号

点赞