【视频号】-纯CSS实现的进度条效果

练习项目10个月前发布 admin
1,742 0

视频号案例源码:

【视频号】-纯CSS实现的进度条效果
HTML代码:
<!doctype html>
<html>
    <head>
        <meta charset=”utf-8″>
        <title>【视频号】-纯CSS实现的进度条效果</title>
        <link rel=”stylesheet” href=”style.css”>
    </head>
    <body>
        <div class=”container”>
            <div class=”card”>
                <div class=”box”>
                    <div class=”percent”>
                        <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>
                        </div>
                    </div>
                    <h2 class=”text”>Html</h2>
                </div>
            </div>
            <div class=”card”>
                <div class=”box”>
                    <div class=”percent”>
                        <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>
                        </div>
                    </div>
                    <h2 class=”text”>CSS</h2>
                </div>
            </div>
            <div class=”card”>
                <div class=”box”>
                    <div class=”percent”>
                        <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>
                        </div>
                    </div>
                    <h2 class=”text”>Javascript</h2>
                </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;
    font-family: ‘Roboto’, sans-serif;
}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #101010;
}
.container
{
    width: 900px;
    display: flex;
    justify-content: space-around;
}
.container .card
{
    position: relative;
    width: 250px;
    background: #222;
    background: linear-gradient(0deg,#1b1b1b,#222,#1b1b1b);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    border-radius: 4px;
    text-align: center;
    overflow: hidden;
    transition: 0.5s;
}
.container .card:hover
{
    box-shadow: 0 15px 35px rgba(0,0,0,.5);
    transform: translateY(-10px);
}
.container .card:before
{
    content: ”;
    position: absolute;
    top: 0;
    left: -50%;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.03);
    pointer-events: none;
    z-index: 1;
}
.percent
{
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-shadow: inset 0 0 50px #000;
    background: #222;
    z-index: 100;
}
.percent .number
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.percent .number h2
{
    color: #777;
    font-weight: 700;
    font-size: 40px;
    transition: 0.5s;
}
.card:hover .percent .number h2
{
    color: #fff;
    font-size: 60px;
}
.percent .number h2 span
{
    font-size: 24px;
    color: #777;
}
.text
{
    color: #777;
    margin-top: 20px;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: 0.5s;
}
.card:hover .text
{
    color: #fff;
}
svg
{
    position: relative;
    width: 150px;
    height: 150px;
    z-index: 1000;
}
circle
{
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #191919;
    stroke-width: 10;
    stroke-linecap: round;
    transform: translate(5px, 5px);
}
circle:nth-child(2)
{
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
}
.card:nth-child(1) svg circle:nth-child(2)
{
    stroke-dashoffset: calc(440 – (440 * 90) / 100);
    stroke: #00ff43;
}
.card:nth-child(2) svg circle:nth-child(2)
{
    stroke-dashoffset: calc(440 – (440 * 85) / 100);
    stroke: #00a1ff;
}
.card:nth-child(3) svg circle:nth-child(2)
{
    stroke-dashoffset: calc(440 – (440 * 60) / 100);
    stroke: #c104ff;
}
© 版权声明

相关文章

暂无评论

暂无评论...