【web前端开发】公号平台官网平台 【web前端开发】公号平台官网平台

【每日一练】03—实现动画循环进度

每日一练1年前 (2023)发布 admin
2,342 0

写在前面

今天是【每日一练】的第三练，也是持续学习的第三天。如果想学习一门技能，三分钟热度，是绝对不行的，因此，我开了这个【每日一练】栏目，把自己这些年坚持学习的习惯，通过这个栏目分享给你，希望你也能找到自己的【每日一练】，通过每天一个小小的刻意学习，然后慢慢去解决遇到的问题。

今天练习的内容，HTML代码看起来好像很长，但其实非常的简单，我们只要写好第一个效果，后面的效果基本都是直接套用修改即可完成。

因此，你只要学会第一个效果的写法即可。

这个效果，很多时候是用在展示某些成果或者某项技能的熟练程度，比方，我们做网页版的个人简历时，我们需要展示自己各项技能的情况，这时候，这个效果就可以排上用场了。

以下是今天小练习的最终效果：

【每日一练】03—实现动画循环进度

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：我们的视频号上也更新了一些案例的练习，也欢迎大家关注我们的视频号，后面视频号上的源码案例，我也会逐步分享出来。

© 版权声明
文章版权归作者所有，未经允许请勿转载。

相关文章

【每日一练】246—JS实现步骤效果
admin
2,797 2
【每日一练】228—JS实现一款图片轮播幻灯片效果
admin
2,224 8
【每日一练】242—JS实现一款列表添加效果
admin
2,868 4
【每日一练】41—网站页面内容占位加载动画效果的实现
admin
2,159 10
【每日一练】102—一款微交互菜单的实现
admin
2,288 9
【每日一练】232—JS实现一款贷款换算计算器
admin
2,496 2

暂无评论

暂无评论...
添加小工具
点此为“正文侧边栏”添加小工具
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】

友链申请 免责声明 广告合作 关于我们

视频号【web前端开发】公号平台官网平台

视频号

微信小商店【web前端开发】公号平台官网平台

微信小商店

CMS建站【web前端开发】公号平台官网平台

CMS建站
Copyright © 2024 【web前端开发】公号平台官网平台