css春夏秋冬,鼠标滑入动效展示

效果展示

图片素材

代码块

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.box {
				width: 800px;
				height: 300px;
				display: flex;
			}
			
			.box .item {
				transition: 0.5s;
				position: relative;
			}
			
			.box .item p {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #FFF;
				font-size: 60px;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}
			
			.box .item img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			
			.box .item1 {
				flex: 1;
			}
			
			.box .item1:hover {
				flex: 5;
			}
			
			.box .item1:hover~.item2,
			.box .item1:hover~.item3,
			.box .item1:hover~.item4 {
				flex: 1;
			}
			
			.box .item2 {
				flex: 1;
			}
			
			.box .item2:hover {
				flex: 5;
			}
			
			.box .item2:hover~.item1,
			.box .item2:hover~.item3,
			.box .item2:hover~.item4 {
				flex: 1 ;
			}
			
			.box .item3 {
				flex: 1;
			}
			
			.box .item3:hover {
				flex: 5;
			}
			
			.box .item3:hover~.item1,
			.box .item3:hover~.item2,
			.box .item3:hover~.item4 {
				flex: 1;
			}
			
			.box .item4 {
				flex: 1;
			}
			
			.box .item4:hover {
				flex: 5;
			}
			
			.box .item4:hover~.item1,
			.box .item4:hover~.item2,
			.box .item4:hover~.item3 {
				flex: 1;
			}
		</style>
		<div class="box">
			<div class="item item1">
				<p>春</p>
				<img src="./img/1.jpg" alt="" />
			</div>
			<div class="item item2">
				<p>夏</p>
				<img src="./img/2.jpg" alt="" />
			</div>
			<div class="item item3">
				<p>秋</p>
				<img src="./img/3.jpg" alt="" />
			</div>
			<div class="item item4">
				<p>冬</p>
				<img src="./img/4.jpg" alt="" />
			</div>
		</div>
	</body>
</html>
相关推荐
烛阴1 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化1 小时前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月1 小时前
7月10号总结 (1)
前端·css·css3
天天扭码2 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder2 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang2 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子3 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z3 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录3 小时前
虚拟DOM
前端·vue.js·dom