作者 | 杨小爱
写在前面
到今天,我们已经完成了一年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);
}
}
写在最后
以上就是每日一练的全部内容,希望你能坚持学习,不管是编程还是设计还是学一门外语,坚持学习,就会有意外收获。
最后,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。
我是杨小爱,我们明天见。
学习更多技能
请点击下方公众号