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

练习项目2年前 (2023)发布 admin

3,269 0 1

视频号案例源码：

【视频号】-纯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;

}

# 练习项目 # 视频号源码 # 视频好源码

© 版权声明

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

相关文章

【每日一练】161—CSS实现横向滚动列表

admin

2,510 9

【每日一练】212—掷骰子模拟器

admin

1,772 8

【每日一练】229—JS实现一款折叠问答效果

admin

2,811 10

【每日一练】233—JS实现一款加载动画效果

admin

3,017 6

【每日一练】227—JS实现鼠标效果

admin

2,959 5

【每日一练】175—CSS实现博客文章列表卡片式效果

admin

2,018 10

暂无评论

暂无评论...

【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】

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

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