css动态图片大全 |css加入图标

/* CSS3旋转动画 */
.rotate{
animation: rotate 2s linear infinite;
}
@keyframes rotate{
100%{
transform: rotate(360deg);
}
}
/* CSS3缩放动画 */
.scale{
animation: scale 1s ease-in-out infinite alternate;
}
@keyframes scale{
0%{
transform: scale(1);
}
100%{
transform: scale(1.2);
}
}
/* 水平滚动动画 */
.scroll{
animation: scroll 5s linear infinite;
}
@keyframes scroll{
0%{
transform: translateX(0);
}
100%{
transform: translateX(-100%);
}
}
/* 垂直下落动画 */
.fall{
animation: fall 2s ease-in-out infinite;
}
@keyframes fall{
0%{
transform: translateY(-50px);
}
100%{
transform: translateY(50px);
}
}
/* 透明度动画 */
.fade{
animation: fade 1s ease-in-out infinite alternate;
}
@keyframes fade{
0%{
opacity: 0.2;
}
100%{
opacity: 1;
}
}

以上是一些常见的CSS动态图片，它们可以通过一些简单的代码实现。当然，还有很多其他的动画效果，需要大家不断的学习和实践，才能更好地应用它们。在网页设计中，CSS动态图片是一个非常重要的设计元素，它可以提升网站的用户体验，使网站更加生动、时尚。