作者 | 楊小愛
寫在前面
到今天，我們已經完成了一年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);
}
} 寫在最後
以上就是每日一練的全部内容，希望你能堅持學習，不管是程式設計還是設計還是學一門外語，堅持學習，就會有意外收獲。
最後，希望今天的小練習對你有用，如果你覺得有幫助的話，請點贊我，關注我，并将它分享給你身邊做開發的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。