css3两张图片动画 |css拉伸输入框

/* 图片1动画 */
.image1 {
position: relative;
animation-name: move;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes move {
0% {
left: 0%;
}
50% {
left: 50%;
}
100% {
left: 100%;
}
}
/* 图片2动画 */
.image2 {
position: relative;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

以上代码中，.image1和.image2分别代表两张图片的类名。其中，.image1实现了一种左右移动的动画效果，通过position: relative设置图片的定位方式，再通过animation-name、animation-duration和animation-iteration-count属性实现移动动画，其中，@keyframes定义了动画的具体执行过程。而.image2则是实现了一个不断旋转的动画效果，同样也是通过animation属性和@keyframes定义动画执行过程。

综上，通过CSS3可以轻松实现图片的动画效果，更多动画效果的实现方式可以通过本站上其他相关文章进行学习。