目录
第四步，接下来我们做出圆角的效果，这里要用到border-radius
Video_2022-07-20_171724
我们先看一下动画效果
大家可以看得见我把鼠标一放到进度条上，进度条就开始动了，这和我们平时看电视时的进度条效果很像，接下来就带大家制作，并进行优化
首先：第一步：老规矩，上框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>第二步：然后我们写两个div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="bodys">
<div class="box"></div>
</div>
</body>
</html>
第三步：然后的话我们加一些css样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#bodys {
width: 300px;
height: 30px;
border: 1px solid red;
}
.box {
background: #12c2e9;
background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
width: 1
最低0.47元/天 解锁文章
1729
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
