京东图片过渡效果—了解transition属性

最新推荐文章于 2025-06-11 13:01:19 发布

何迟

最新推荐文章于 2025-06-11 13:01:19 发布

阅读量727

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS 前端开发也蛮有意思的

本文链接：https://blog.youkuaiyun.com/qq_42036616/article/details/83477132

前端开发也蛮有意思的同时被 2 个专栏收录

82 篇文章

订阅专栏

CSS

13 篇文章

订阅专栏

本文介绍如何使用CSS的transition属性创建平滑的图片滑动门效果，通过调整图片宽度和使用transition来实现鼠标悬停时的动画。代码示例展示了如何设置div和图片的样式，以及在hover状态下改变图片位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要点：

1、transition有四个属性，注意时间曲线和延时可以省略，默认分别是ease和0

2、注意切换的原理类似滑动门，遮住一部分，图片的宽度比显示宽度要大

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 183px;
			height: 130px;
			border: 1px solid red;
			overflow: hidden;
			/*高度不怎么改变，注意变化的10px宽度*/
		}
		div img{
			width: 193px;
			height: 130px;
			transition: all 0.4s;
			/*指定变化的对象和执行时间*/
		}
		div:hover img{
			margin-left: -10px;
			/*达到将图片向左移动10px的效果，类似滑动门的效果*/
		}
	</style>
</head>
<body>
	<div>
		<img src="1.jpg">
	</div>	
</body>
</html>

效果：