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);
}
时间： 2024-12-19 00:01:43