好玩的动画效果

简单的用css做出动态效果

视频的链接：好玩的动画效果-CSDN直播

相关的代码也是很简单的

1.html文件

只要弄出六个div出来就行，每个div里面加上对应的字母

2.css文件

（1）先是对全部的div进行定义

position: fixed;//这是为了固定位置
background: radial-gradient(circle, red, orange);//渐变效果，circle是从中心开始渐变的
border-left: 10px dotted #d0d0ff;//旁边那个圆形虚线的效果
box-shadow: 8px 8px 8px 0 #c0c1c5;//盒子的阴影效果
transition: transform 1s ease;//动态过渡效果

（2）字体效果

font-family: "SimSun";//宋体
text-shadow: 3px 3px 5px yellow;//字体阴影

（3）每个div对应的位置

transition: all 2s;//动态过渡效果
animation: move 5s infinite linear alternate;//移动效果
//infinite是一直不停地移动
//linear是线性的移动
//alternate是可以在颜色变换时更顺滑

（4）当鼠标放到div上的效果

cursor: pointer;//鼠标变成手指的形状
transform: rotate(360deg);//div进行360度旋转

（5）div移动的代码

不同的百分比对应着不同的时间段，这个百分比是可以随意改的（0%到100%），百分比里面的内容是对应的坐标和当时的状态。