其他
【每日一练】95—CSS 3D加载动画进度效果的实现
写在前面
关于学习CSS，其实最好的办法也是最笨的办法，先不管它有没有用，在你不会之前，先上电脑把代码敲起来再说。
因为没有一个人是把所有的基础知识都学明白了学会了，才开始去敲代码的。
像CSS里有那么多元素属性，我想，没有谁会把所有的属性元素搞明白了，然后再去开始写CSS的，那样的话，他早就放弃了。
如果你坚持写到今天还没有放弃的话，那就继续练下去，今天是我们的第95个练习案例，距离我们之前定的100小练习的目标越来越近了，大家继续加油！
现在，我们还是一起来看看今天练习的最终练习效果：
<!DOCTYPE html><html><head> <title>【每日一练】95—CSS 3D加载动画进度效果的实现</title></head><body> <div class="container"> <div class="box"> <div class="shadow"></div> <div class="content"> <div class="percent" data-text="Html" style="--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> <div class="number"> <h2>88<span>%</span></h2> </div> </div> </div> <div class="box"> <div class="shadow"></div> <div class="content"> <div class="percent" data-text="CSS" style="--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> <div class="number"> <h2>95<span>%</span></h2> </div> </div> </div> <div class="box"> <div class="shadow"></div> <div class="content"> <div class="percent" data-text="JS" style="--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> <div class="number"> <h2>80<span>%</span></h2> </div> </div> </div> </div></body></html>*{ margin: 0; padding: 0; box-sizing: border-box; font-family: consolas;}body { display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; background: #cfd1e1;}.container { display: flex; justify-content: center; align-items: center; gap: 80px 100px; flex-wrap: wrap;}.container .box { position: relative; width: 240px; height: 250px; display: flex; justify-content: center; align-items: center;}.container .box::before { content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 100%; background: linear-gradient(#fff,#fff,#e3e3e3); filter: blur(1px); z-index: 1;}.container .box::after { content: ''; position: absolute; top: 1px; right: -1px; width: 20px; height: 100%; background: #9d9d9d; filter: blur(1px); z-index: 1;}.container .box .shadow { position: absolute; width: 100%; height: 100%; background: #eee;}.container .box .shadow::before { content: ''; position: absolute; top: 0; left: calc(100% + 5px); width: 100%; height: 200%; background: linear-gradient(rgba(0,0,0,0.075),transparent); transform: skewX(45deg);}.container .box .shadow::after { content: ''; position: absolute; bottom: -200%; left: calc(100% + 15px); width: 100%; height: 200%; background: linear-gradient(rgba(0,0,0,0.075),transparent); transform: skewX(45deg);}.container .box .content { position: relative; width: 100%; height: 100%; background: linear-gradient(#dbdae1,#a3aaba); box-shadow: 5px 5px 5px rgba(0,0,0,0.1), 15px 15px 15px rgba(0,0,0,0.1), 20px 20px 20px rgba(0,0,0,0.1), 50px 50px 50px rgba(0,0,0,0.1), inset 3px 3px 2px #fff; display: flex; justify-content: center; align-items: center; flex-direction: column;}.container .box .content .percent { position: relative; width: 150px; height: 150px;}.container .box .content .percent::before { content: attr(data-text); position: absolute; inset: 20px; background: #00a6bc; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 1.5em; letter-spacing: 0.1em; text-transform: uppercase;}.container .box .content .percent svg { position: relative; width: 150px; height: 150px; transform: rotate(270deg);}.container .box .content .percent svg circle { width: 100%; height: 100%; fill: transparent; stroke-width: 3; stroke: rgba(0,0,0,0.05); transform: translate(5px,5px);}.container .box .content .percent svg circle:nth-child(2){ stroke: #00a6bc; 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; }}.container .box .content .percent .dot { position: absolute; inset: 5px; z-index: 10; animation: animateDot 2s linear forwards;}@keyframes animateDot { 0% { transform: rotate(0deg); } 100% { transform: rotate(calc(3.6deg * var(--num))); /* 360 / 100 = 3.6deg */ }}.container .box .content .percent .dot::before { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; background: #00a6bc; border-radius: 50%;}.container .box .content .number { position: relative; inset: 0; opacity: 0; animation: fadeIn 1s linear forwards; animation-delay: 2.5s;}.container .box .content .number h2 { font-size: 2.5em; color: #00a6bc; display: flex; justify-content: center; align-items: center;}.container .box .content .number h2 span { font-weight: 300; font-size: 0.5em; margin-left: 5px;}写在最后
到这里，我今天跟你分享的【每日一练】的全部内容就结束了，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号