其他
【每日一练】03—实现动画循环进度
写在前面
今天是【每日一练】的第三练，也是持续学习的第三天。如果想学习一门技能，三分钟热度，是绝对不行的，因此，我开了这个【每日一练】栏目，把自己这些年坚持学习的习惯，通过这个栏目分享给你，希望你也能找到自己的【每日一练】，通过每天一个小小的刻意学习，然后慢慢去解决遇到的问题。
今天练习的内容，HTML代码看起来好像很长，但其实非常的简单，我们只要写好第一个效果，后面的效果基本都是直接套用修改即可完成。
因此，你只要学会第一个效果的写法即可。
这个效果，很多时候是用在展示某些成果或者某项技能的熟练程度，比方，我们做网页版的个人简历时，我们需要展示自己各项技能的情况，这时候，这个效果就可以排上用场了。
以下是今天小练习的最终效果：
<!doctype html><html> <head> <meta charset="utf-8"> <title>【每日一练】03—CSS实现动画循环进度</title> </head> <body> <div class="container"> <!--第一个动画圆 HTML代码开始--> <!--如果你HTML技能是100%就把num:数字修改为100，h2的地方也改为100--> <div class="card"> <div class="percent" style="--clr:#04fc43;--num:89;"> <div class="dot"></div> <svg> <circle cx="70" cy="70" r="70"></circle> <circle cx="70" cy="70" r="70"></circle> </svg> <div class="number"> <h2>89<span>%</span></h2> <p>Html</p> </div> </div> </div> <!--第一个动画圆 HTML代码结束，后面圆直接复制，修改相应的内容即可--> <div class="card"> <div class="percent" style="--clr:#e69a0c;--num:95;"> <div class="dot"></div> <svg> <circle cx="70" cy="70" r="70"></circle> <circle cx="70" cy="70" r="70"></circle> </svg> <div class="number"> <h2>95<span>%</span></h2> <p>CSS</p> </div> </div> </div> <div class="card"> <div class="percent" style="--clr:#fc0491;--num:80;"> <div class="dot"></div> <svg> <circle cx="70" cy="70" r="70"></circle> <circle cx="70" cy="70" r="70"></circle> </svg> <div class="number"> <h2>80<span>%</span></h2> <p>JavaScript</p> </div> </div> </div> <div class="card"> <div class="percent" style="--clr:#260ae1;--num:90;"> <div class="dot"></div> <svg> <circle cx="70" cy="70" r="70"></circle> <circle cx="70" cy="70" r="70"></circle> </svg> <div class="number"> <h2>90<span>%</span></h2> <p>Photoshop</p> </div> </div> </div> <div class="card"> <div class="percent" style="--clr:#0ae032;--num:65;"> <div class="dot"></div> <svg> <circle cx="70" cy="70" r="70"></circle> <circle cx="70" cy="70" r="70"></circle> </svg> <div class="number"> <h2>65<span>%</span></h2> <p>After Effects</p> </div> </div> </div> <div class="card"> <div class="percent" style="--clr:#8b12ee;--num:55;"> <div class="dot"></div> <svg> <circle cx="70" cy="70" r="70"></circle> <circle cx="70" cy="70" r="70"></circle> </svg> <div class="number"> <h2>55<span>%</span></h2> <p>Animate</p> </div> </div> </div> <div class="card"> <div class="percent" style="--clr:#f36d0e;--num:95;"> <div class="dot"></div> <svg> <circle cx="70" cy="70" r="70"></circle> <circle cx="70" cy="70" r="70"></circle> </svg> <div class="number"> <h2>95<span>%</span></h2> <p>Illustrator </p> </div> </div> </div> <div class="card"> <div class="percent" style="--clr:#04fc43;--num:88;"> <div class="dot"></div> <svg> <circle cx="70" cy="70" r="70"></circle> <circle cx="70" cy="70" r="70"></circle> </svg> <div class="number"> <h2>88<span>%</span></h2> <p>Lightroom</p> </div> </div> </div> <div class="card"> <div class="percent" style="--clr:#0f08de;--num:80;"> <div class="dot"></div> <svg> <circle cx="70" cy="70" r="70"></circle> <circle cx="70" cy="70" r="70"></circle> </svg> <div class="number"> <h2>80<span>%</span></h2> <p>Premiere</p> </div> </div> </div> <div class="card"> <div class="percent" style="--clr:#036a1d;--num:85;"> <div class="dot"></div> <svg> <circle cx="70" cy="70" r="70"></circle> <circle cx="70" cy="70" r="70"></circle> </svg> <div class="number"> <h2>85<span>%</span></h2> <p>Dreamweav</p> </div> </div> </div> <div class="card"> <div class="percent" style="--clr:#04fc43;--num:89;"> <div class="dot"></div> <svg> <circle cx="70" cy="70" r="70"></circle> <circle cx="70" cy="70" r="70"></circle> </svg> <div class="number"> <h2>89<span>%</span></h2> <p>VSCode</p> </div> </div> </div> <div class="card"> <div class="percent" style="--clr:#fee800;--num:70;"> <div class="dot"></div> <svg> <circle cx="70" cy="70" r="70"></circle> <circle cx="70" cy="70" r="70"></circle> </svg> <div class="number"> <h2>70<span>%</span></h2> <p>InDesign</p> </div> </div> </div> <div class="card"> <div class="percent" style="--clr:#ff00be;--num:60;"> <div class="dot"></div> <svg> <circle cx="70" cy="70" r="70"></circle> <circle cx="70" cy="70" r="70"></circle> </svg> <div class="number"> <h2>60<span>%</span></h2> <p>Javascript</p> </div> </div> </div> <div class="card"> <div class="percent" style="--clr:#06ccff;--num:95;"> <div class="dot"></div> <svg> <circle cx="70" cy="70" r="70"></circle> <circle cx="70" cy="70" r="70"></circle> </svg> <div class="number"> <h2>95<span>%</span></h2> <p>Photoshop</p> </div> </div> </div> </div> </body></html>*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif;}body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #222;}.container { position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 40px; padding: 40px;}.container .card { position: relative; width: 220px; height: 250px; background: #2a2a2a; display: flex; justify-content: center; align-items: center;}.container .card .percent { position: relative; width: 150px; height: 150px;}.container .card .percent svg { position: relative; width: 150px; height: 150px; transform: rotate(270deg);}.container .card .percent svg circle { width: 100%; height: 100%; fill: transparent; stroke-width: 2; stroke: #191919; transform: translate(5px,5px);}.container .card .percent svg circle:nth-child(2){ stroke: var(--clr); stroke-dasharray: 440; stroke-dashoffset: calc(440 - (440 * var(--num)) / 100); opacity: 0; animation: fadeIn 1s linear forwards; animation-delay: 2.5s;}@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}.dot { position: absolute; inset: 5px; z-index: 10; /* 360deg / 100 = 3.6 */ animation: animateDot 2s linear forwards;}@keyframes animateDot { 0% { transform: rotate(0deg); } 100% { transform: rotate(calc(3.6deg * var(--num))); }}.dot::before { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--clr); box-shadow: 0 0 10px var(--clr), 0 0 30px var(--clr);}.number { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; opacity: 0; animation: fadeIn 1s linear forwards; animation-delay: 2.5s;}.number h2 { display: flex; justify-content: center; align-items: center; color: #fff; font-weight: 700; font-size: 2.5em;}.number h2 span { font-weight: 300; color: #fff; font-size: 0.5em;}.number p { font-weight: 300; font-size: 0.75em; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.75);}写在最后
以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
PS：我们的视频号上也更新了一些案例的练习，也欢迎大家关注我们的视频号，后面视频号上的源码案例，我也会逐步分享出来。
学习更多技能
请点击下方公众号