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

每日一练11个月前发布 admin
1,679 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:我们的视频号上也更新了一些案例的练习,也欢迎大家关注我们的视频号,后面视频号上的源码案例,我也会逐步分享出来。

© 版权声明

相关文章

暂无评论

暂无评论...