CSS可以让我们更好地控制网页的呈现,其中一个很酷的特性是可以让图片动起来。下面将为大家介绍两种方法。/*第一种方法*/ img { position: relative; animation: mo
CSS可以让我们更好地控制网页的呈现,其中一个很酷的特性是可以让图片动起来。下面将为大家介绍两种方法。
/*第一种方法*/ img { position: relative; animation: moveImage 2s infinite; } @keyframes moveImage { 0% { left: 0px; } 50% { left: 200px; } 100% { left: 0px; } }
第一种方法使用了CSS动画。我们使用position: relative
来使图片可以移动,然后定义了一个叫moveImage
的动画。这个动画包含了三个关键帧,分别对应时间轴上0%、50%、100%的位置。在0%的位置图片left为0,也就是不移动。在50%的位置,我们让图片向右移动200像素。在100%的位置,我们把它带回到0像素的位置。我们设置了动画的时间为2秒,并且让它无限循环。
/*第二种方法*/ div { background-image: url("example.jpg"); width: 200px; height: 100px; position: relative; animation: slideImage 5s linear infinite; } @keyframes slideImage { 0% { left: 0px; } 50% { left: -400px; } 100% { left: 0px; } }
第二种方法使用了CSS的背景图像。我们给一个<div>
元素设置了背景图像,然后使用了position: relative
将它移到合适的位置。我们定义了一个叫slideImage
的动画,同样包含三个关键帧。这次我们使用了linear的时间函数,使得图片平滑地移动。在50%的时候,我们将图片向左移动400像素。在100%时,我们将它带回到原来的位置。我们设置了动画的时间为5秒,并且让它无限循环。
这就是CSS让图片动起来的两种方法。它们都非常容易实现,强大灵活,可以为网页添加令人惊叹的动态特效。我们可以继续探索、描绘、发挥CSS的艺术创造力,丰富我们的网页!
粉丝
0
关注
0
收藏
0