纯css实现蜂窝效果

html 复制代码
  <!DOCTYPE html>
  <html lang="en">
  	<head>
  		<meta charset="UTF-8">
  		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  		<title>蜂窝效果</title>
  		<style>
  			body {
  				margin: 0;
  				padding: 0;
  				display: flex;
  				justify-content: center;
  				align-items: center;
  				min-height: 100vh;
  				background-color: #f0f0f0;
  			}

  			.honeycomb {
  				display: flex;
  				flex-direction: column;
  				align-items: center;
  				width: 700px;
  				height: 400px;
  				overflow: hidden;
  				padding-left: 310px;
  				scroll-behavior: smooth
  			}

  			.hexagon::before {
  				content: '';
  				position: absolute;
  				top: 2px;
  				left: 2px;
  				width: calc(100% + -4px);
  				height: calc(100% + -4px);
  				background-color: white;
  				clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  				z-index: -1;
  			}

  			.honeycomb:has(.hexagon:hover) .scroll-content {
  				animation-play-state: paused;
  			}

  			.scroll-content {
  				animation: 20s linear 0s infinite alternate moveing;
  			}

  			@keyframes moveing {
  				0% {
  					transform: translateX(0);
  				}

  				25% {
  					transform: translateX(-15%);
  				}

  				50% {
  					transform: translateX(-25%);
  				}

  				75% {
  					transform: translateX(-15%);
  				}

  				100% {
  					transform: translateX(0);
  				}
  			}

  			.row {
  				display: flex;
  				justify-content: center;
  				margin-bottom: -36px;
  			}

  			.hexagon {
  				width: 98px;
  				height: 84px;
  				background-color: #000;
  				clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  				margin: 0 36px;
  				transition: all 0.3s ease;
  				position: relative;
  				overflow: hidden;
  			}

  			.hexagon:hover {
  				transform: scale(1.2);
  				z-index: 2;
  			}

  			.hexagon:hover+.hexagon {
  				transform: scale(0.9);
  			}
  		</style>
  	</head>
  	<body>
  		<div class="honeycomb" id="honeycomb">
  			<div class="scroll-content">
  				<div class="row">
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  				</div>
  				<div class="row">
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  				</div>
  				<div class="row">
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  				</div>
  				<div class="row">
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  				</div>
  				<div class="row">
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  				</div>
  				<div class="row">
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  				</div>
  				<div class="row">
  					<div class="hexagon">
  						<div class="highlight"></div>
  					</div>
  				</div>
  			</div>
  		</div>
  	</body>
  </html>
相关推荐
paopaokaka_luck2 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9492 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_2 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路5 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔5 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang5 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔5 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任6 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴6 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔6 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js