详细教程CSS3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color: #ffa5a5;
}
.cen{
width: 200px;
height:200px;
background-color: #d5093c;
/*阴影效果： 水平方向的偏移，垂直方向的偏移，模糊度，颜色*/
box-shadow: 10px -10px 70px #D5093C;
animation: 1s aj infinite;
}
/*倒圆角指令*/
.lef{
border-radius: 100px;
position: absolute;
top: 200px;
left: 180px;
}
.rig{
border-radius: 100px;
position: absolute;
top: 200px;
left: 320px;
}
/*旋转角度*/
.c{
transform: rotate(45deg);
position: absolute;
top: 270px;
left: 250px;
}
/*div:hover{*/
/*放大原有图形*/
/*transform: scale(1.3);*/
/*2d旋转 如果只有一个数据，那么x和y相同角度，给俩个数据就是先x 后y*/
/*transform: skew(45deg);*/
/*移动 显示水平位移，然后是垂直位移 （负数就是向上）*/
/*transform: translate(0px,-5px);*/
/*}*/
/*动画标签*/
@-webkit-keyframes aj{
0%{transform: scale(1) rotate(45deg);}
50%{transform: scale(1.2) 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的标签 :
/*阴影效果： 水平方向的偏移，垂直方向的偏移，模糊度，颜色*/
box-shadow: 10px -10px 70px #D5093C;/*倒圆角指令*/
border-radius: 100px;/*旋转角度 deg就是角度的意思*/
transform: rotate(45deg);/*放大原有图形*/
transform: scale(1.3);/*动画标签*/
@-webkit-keyframes aj{
0%{transform: scale(1) rotate(45deg);}
50%{transform: scale(1.2) rotate(45deg);}
100%{transform: scale(1.) rotate(45deg);}
}/*调用动画的方法*/
animation: 1s aj infinite;针对不同的浏览器CSS3有不同的方法：
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}