详细教程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>

CSS_跳动的心-LMLPHP

用到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;}
}
05-26 21:55