当先锋百科网

首页 1 2 3 4 5 6 7

CSS3可以使用transition和transform属性实现各种动画效果,其中可以通过设置transform的translateX值来控制图片的水平移动,从而实现图片从左侧滑动入画面。

/* 先将图片的translateX值设为负数,使图片位置在左侧屏幕外 */
img {
transform: translateX(-100%);
}
/* 当鼠标悬停在图片上时,将图片的translateX值设为0,使图片横向移动到屏幕内 */
img:hover {
transform: translateX(0%);
transition: transform 0.5s ease-out;
}

这里的transition属性指定了动画的属性为transform,动画时间为0.5秒,动画缓动效果为ease-out,即先快后慢,让动画更自然。在需要实现图片从右侧滑动入的情况下,只需将translateX的值由负数改为正数即可。

通过使用CSS3的transition和transform属性,我们可以轻松实现各种动画效果,为网页添加炫酷的交互效果。