css做炫酷动画 |htmlcss属性标记

/* CSS代码：左右晃动的DIV */
div{
position: relative;
left: 0;
animation: sway 1s infinite alternate ease-in-out;
}
@keyframes sway {
from { transform: translateX(0);}
to { transform: translateX(20px);}
}

在上面的代码中，大家使用了CSS3的动画属性animation和关键帧@keyframes来实现左右晃动的效果。这里的动画属性有四个参数，分别是动画名称、动画持续时间、动画延迟时间和动画方式。@keyframes则是用来定义CSS动画的关键帧，包括动画开始和结束的状态。

/* CSS代码：旋转的按钮 */
button{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f4280a;
position: relative;
animation: rotate 1s infinite;
}
button:before{
content: "";
display: block;
width: 30px;
height: 30px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -15px;
border-radius: 50%;
background-color: #fff;
animation: scale-in 1s infinite;
}
@keyframes rotate {
from { transform: rotate(0);}
to { transform: rotate(360deg);}
}
@keyframes scale-in {
0% { transform: scale(0); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}

这段代码实现了一个旋转的按钮，按钮动画效果包括旋转和放大。大家使用伪元素:before来定义按钮里的圆圈，并且在该元素上实现放大动画。@keyframes中的scale-in则是实现了从0到1.2再到1的缓慢放大动画的效果。

更多CSS动画，可以使用transform、transition、perspective等属性来实现。