在CSS中,有多种方法可以让图片动起来。下面我们介绍其中几种比较常用的方法:/* 方法一:使用transform属性 */ img { transition: transform 0.5s; /* 定
在CSS中,有多种方法可以让图片动起来。下面我们介绍其中几种比较常用的方法:
/* 方法一:使用transform属性 */ img { transition: transform 0.5s; /* 定义动画过渡效果 */ } img:hover { transform: rotate(360deg); /* 定义鼠标悬停时的变化 */ } /* 方法二:使用animation属性 */ @keyframes slide { 0% { margin-left: 0; } 100% { margin-left: 500px; } } img { animation: slide 2s infinite; /* 定义动画属性 */ }
方法一使用了 transform
属性,当鼠标悬停在图片上时,通过 rotate
函数实现图片的旋转。同时,利用 transition
属性指定了过渡效果,使得图片旋转时效果更平滑。
方法二则使用了 animation
属性。通过定义关键帧 @keyframes
,将图片从左边缘移动到右边缘,然后利用 infinite
无限重复播放,实现了图片的动态效果。
粉丝
0
关注
0
收藏
0