1 制作动画前的准备知识
1.1 CSS3常用属性
/*倒圆角指令*/
border-radius: 100px;
/* 左上右下
右上左下 */
border-radius:10px 60px;
border-radius:10px 20px 30px 40px;
/*旋转角度*/
transform: rotate(45deg);
/*放大的倍数*/
transform: scale(1.3);
/* X:水平的位移
Y ：垂直的位移 负数：上*/
transform: translate(0px,-5px);
/*2D角度的旋转 X Y*/
transform: skew(40deg,45deg);
/*阴影
水平方向的偏移 垂直方向的偏移 模糊度 阴
影的颜色*/
box-shadow: 0px 0px 70px #D5093C;
1.2 CSS3 中的动画标签
@-ms-keyframes name{
from{}
to{}
}
@-ms-keyframes name{
0%{}
50%{}
100%{}
}
2 测试代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body{ background-color: #ffa5a5; } .cen{ width: 200px; height: 200px; background-color: #d5093c; /*阴影 水平方向的偏移 垂直方向的偏移 模糊度 阴影的颜色*/ box-shadow: 0px 0px 70px #D5093C; /*执行动画的调用*/ animation: 1s aj infinite; } .lef{ /*倒圆角指令*/ border-radius: 100px; /* 左上右下 右上左下 */ /*border-radius:10px 60px;*/ /*border-radius:10px 20px 30px 40px;*/ position: absolute; top: 200px; left: 200px; } .rig{ border-radius: 100px; position: absolute; top: 200px; left: 341px; } .c{ /*旋转角度*/ transform: rotate(45deg); position: absolute; top: 269px; left: 271px; } /*CSS3中的动画*/ @keyframes aj{ 0%{transform: scale(1)rotate(45deg);} 50%{transform: scale(1.1)rotate(45deg);} 100%{transform: scale(1)rotate(45deg);} } @-moz-keyframes name{ from{} to{} } @-ms-keyframes name{ from{} to{} } @-webkit-keyframes name{ from{} to{} } </style> </head> <body> <div class="cen lef" ></div> <div class="cen c"></div> <div class="cen rig"></div> </body> </html>
3 运行效果
