3个属性：transition,animation,transform
实现步骤：
1.css定位 2.rgba设置颜色透明度 3.转换＋动画 transform＋animation 4.动画平滑过渡 transition
========================美丽分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
animation-delay
!transform 移动 translate(npx,mpx), 缩放 scale[XY](.n) , 倾斜 skew(ndeg), 旋转 rotate[XYZ](ndeg) 或者rotate(1turn)
border 实现正在加载的圆形，翻页效果
动画旋转
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> @-webkit-keyframes circle /* Safari and Chrome */ { to{transform:rotate(1turn);} } @keyframes circle{ to{transform:rotate(1turn);} } .ball{ position: absolute; top:50%; left: 50%; width: 50px; height: 50px; background: red; transform-origin:150% center;// transform-origin:250% center;//偏移轴心 animation:circle 1s infinite linear; -webkit-animation:circle 1s infinite linear; } </style> </head> <body> <div class="ball"></div> </body> </html>
椭圆效果:就是外层加一个div设置多一个动画上下移动的动画 transform:scaleY(200):设置y轴的值缩放转换
摆钟效果:
.ball{
transform-origin:center top;
animation:sway 2.2s infinite alternate ease-in-out
}
@keyframes sway{
to{transform:rotate(30deg);
}