css3 加载动效代码 |css 表单记住密码黄色背景

.loading {
width: 60px;
height: 60px;
border: 2px solid #333;
border-top-color: #fff;
border-radius: 50%;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}

上面的代码展示了一个圆形的加载动画效果。大家定义了一个.loading类，设置它的大小、边框颜色和形状等样式属性。关键在于animation属性，它指定了动画名称（spin）、时长（1s）、缓动函数（ease-in-out）和循环次数（infinite）。

@keyframes规则定义了动画过程，在这里大家指定了从0到360度的旋转动画。这样，大家就可以得到一个非常简单但是实用的加载动效。

.progress {
width: 200px;
height: 20px;
background-color: #ccc;
position: relative;
border-radius: 10px;
}
.progress-bar {
width: 0;
height: 100%;
background-color: #f00;
border-radius: 10px;
position: absolute;
top: 0;
left: 0;
animation: progress 2s linear forwards;
}
@keyframes progress {
to {
width: 100%;
}
}

接下来，大家来看一下一个进度条的加载动效。大家定义了一个.progress类作为进度条容器，然后在其中嵌入一个.progress-bar类作为进度条的填充元素。大家将.progress-bar定位为容器的左上角，然后使用animation属性来指定动画效果。

@keyframes规则定义了动画过程，大家在这里指定了进度条从0%到100%的变化过程。最后，大家可以得到一个带有动态效果的进度条控件。

总之，CSS3提供了许多有趣的特性和效果，大家可以使用它来为网页增添更多的趣味和活力。