手风琴效果 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			body {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100vh;
				background-color: #333;
			}

			.wrap {
				display: flex;
				width: 80vw;
			}

			.card {
				background-size: cover;
				background-position: center center;
				background-repeat: no-repeat;
				border-radius: 50px;
				color: #fff;
				flex: 0.5;
				cursor: pointer;
				height: 60vh;
				position: relative;
				margin: 10px;
				transition: flex 0.7s cubic-bezier(0.05, 0.3, 0.4, 0);
			}

			.card h3 {
				font-size: 20px;
				position: absolute;
				bottom: 20px;
				left: 20px;
				margin: 0;
				transition: opacity 0s ease-in 0s;
			}

			.card.active {
				flex: 5;
			}

			.card.active h3 {
				opacity: 1;
				transition: opacity 0.3s ease-in 0.4s;
			}

			@media (max-width: 500px) {
				.wrap {
					width: 100vw;
				}
				.card:nth-child(5) {
					display: none;
				}
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="card active" style="background-image: url(1.png)">
				<h3>1</h3>
			</div>
			<div class="card" style="background-image: url(1.png)">
				<h3>2</h3>
			</div>
			<div class="card" style="background-image: url(1.png)">
				<h3>3</h3>
			</div>
			<div class="card" style="background-image: url(1.png)">
				<h3>4</h3>
			</div>
			<div class="card" style="background-image: url(1.png)">
				<h3>5</h3>
			</div>
		</div>

		<script>
			var wrap = document.getElementsByClassName('wrap')[0]
			var cards = document.getElementsByClassName('card')

			for (let i = 0; i < cards.length; ++i) {
				cards[i].addEventListener('mouseover', function () {
					for (let j = 0; j < cards.length; ++j) {
						cards[j].className = 'card'
					}
					cards[i].className = 'card active'
				})
			}
		</script>
	</body>
</html>
posted @ 2020-09-10 16:18  MarkJacobs  阅读(118)  评论(0)    收藏  举报