css3 新特性 + css3 动画
warning:
这篇文章距离上次修改已过194天，其中的内容可能已经有所变动。
CSS3 的新特性包括选择器、盒模型、背景和边框、文本效果、变换、动画、图像、阴影、多列布局、用户界面等。其中，CSS3 动画可以通过 @keyframes 创建复杂的、高级的动画效果。
以下是一个简单的 CSS3 动画示例，它使用了 transform 属性来创建一个旋转的动画效果：
/* 定义关键帧 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 应用动画 */
.element {
width: 100px;
height: 100px;
background-color: red;
margin: 30px;
animation: rotate 2s linear infinite;
}HTML 部分：
<div class="element"></div>在这个例子中，.element 类定义了一个动画，名为 rotate，它会使得元素无限期地持续旋转，每次旋转周期是 2 秒。@keyframes rotate 定义了旋转的起点（0 度）和终点（360 度）。animation 属性是一个简写属性，用于设置动画的多个参数，包括动画名称（rotate）、动画时长（2s）、动画时函数（linear）和动画循环次数（infinite）。
评论已关闭