已被阅读 558 次 | 文章分类:css | 2023-12-09 11:54
熟悉使用伪元素和animation的相关属性 可作为入门学习
1 动画效果
最终实现效果如下
2 画圆原理
(1) 初始化一个宽高200px的div
<div class="box"></div>
.box{
width: 200px;
height:200px;
background: white;
}
(2) 通过css调整为有边框背景透明的圆
.box{
width: 200px;
height:200px;
background: transparent;
color: white;
border:10px solid #00d9ff;
border-radius: 50%;
position:relative;
}
3 画一个小球
(1) 通过伪元素before实现一个小球,首先初始化一个宽高30px的小球
.box:before{
content: "";
width:30px;
height:30px;
background: rgb(255, 132, 0);
border-radius: 50%;
position: absolute;
}
伪元素必须定义content和position:absolute两个属性;content保证内容显示,absolute保证相对于自身元素的定位
(2) 调整一下定位的位置
top:10px;
left:10px;
4 让小球旋转起来
本质原理是旋转整个元素;初始位置为0deg,结束位置在360deg
(1) 定义动画关键帧
@keyframes round{
0%{
rotate: 0deg;
}
100%{
rotate: 360deg;
}
}
(2) 引用动画帧,并定义动画过渡过程:3s匀速无限播放即可
animation:round 3s linear infinite;
QQ:3410192267 | 技术支持 微信:popstarqqsmall
Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号