写在前面
今天是【每日一练】的第三练,也是持续学习的第三天。如果想学习一门技能,三分钟热度,是绝对不行的,因此,我开了这个【每日一练】栏目,把自己这些年坚持学习的习惯,通过这个栏目分享给你,希望你也能找到自己的【每日一练】,通过每天一个小小的刻意学习,然后慢慢去解决遇到的问题。
今天练习的内容,HTML代码看起来好像很长,但其实非常的简单,我们只要写好第一个效果,后面的效果基本都是直接套用修改即可完成。
因此,你只要学会第一个效果的写法即可。
这个效果,很多时候是用在展示某些成果或者某项技能的熟练程度,比方,我们做网页版的个人简历时,我们需要展示自己各项技能的情况,这时候,这个效果就可以排上用场了。
以下是今天小练习的最终效果:

HTML:
<!doctype html><html><head><meta charset=”utf-8″><title>【每日一练】03—CSS实现动画循环进度</title><link rel=”stylesheet” href=”style.css”></head><body><div class=”container”><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><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>
CSS:
@import url(‘https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap’);*{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:我们的视频号上也更新了一些案例的练习,也欢迎大家关注我们的视频号,后面视频号上的源码案例,我也会逐步分享出来。
© 版权声明
文章版权归作者所有,未经允许请勿转载。
相关文章
暂无评论...