老师,我这代码运行了 动画效果显示不出来
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.cen{
width:200px;
height:200px;
background-color:#d5093c ;
/*阴影 水平方向偏移 垂直方向偏移 模糊度 阴影的颜色*/
box-shadow: 0px 0px 70px #D5093C;
/*执行动画的调用*/
animation:1s aj ;
}
.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;
}
/*div:hover{
/*放大的倍数*/
/*transform: scale(1.3);*/
/*X:水平的位移 Y:垂直的位移 负数:上*/
/* transfrom:translate(0px,-5px);*/
/*2D角度的旋转*/
/*transform:skew(40deg,45deg);*/
/*CSS3中的动画*/
@keyframes aj{
0%{transform: scale(1) rotate(45deg);}
50%{transform: scale(1.1) rotate(45deg);}
100%{transform: scale(1) rotate(45deg);}
}
</style>
</head>
<body>
<div class="cen lef"></div>
<div class="cen c"></div>
<div class="cen rig"></div>
</body>
</html>
<!--
CSS3中常用的属性
/*倒圆角指令*/
border-radius:100px ;
/*左上右下 右上左下*/
/*border-radius:10px 60px ;*/
/*border-radius:10px 20px 30px 40px ;*/
/*旋转角度*/
transform: rotate(45deg);
/*放大的倍数*/
/*transform: scale(1.3);*/
/*X:水平的位移 Y:垂直的位移 负数:上*/
/* transfrom:translate(0px,-5px);*/
/*2D角度的旋转*/
/*阴影 水平方向偏移 垂直方向偏移 模糊度 阴影的颜色*/
box-shadow: 0px 0px 70px #D5093C;
-->