【css动画:旋转小球】实现小球绕盒子旋转的效果

已被阅读 558 次 | 文章分类:css | 2023-12-09 11:54

熟悉使用伪元素和animation的相关属性 可作为入门学习

1 动画效果

最终实现效果如下

/net/upload/image/20231209/0.gif

2 画圆原理

(1) 初始化一个宽高200px的div

                                            
<div class="box"></div>
                                            
                                        
                                            
.box{
  width: 200px;
  height:200px;
  background: white;
}
                                            
                                        

/net/upload/image/20231209/1.gif

(2) 通过css调整为有边框背景透明的圆

                                            
.box{
  width: 200px;
  height:200px;
  background: transparent;
  color: white;
  border:10px solid #00d9ff;
  border-radius: 50%;
  position:relative;
}
                                            
                                        

/net/upload/image/20231209/2.gif

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保证相对于自身元素的定位

/net/upload/image/20231209/3.gif

(2) 调整一下定位的位置

                                            
top:10px;
  left:10px;
                                            
                                        

/net/upload/image/20231209/4.gif

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号