利用CSS3实现六边形加载动画特效



12 47 16



特效描述:利用CSS3实现 六边形加载 动画特效,利用CSS3实现六边形加载动画特效

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. HTML代码

<div class="socket">
	<div class="gel center-gel">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c1 r1">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c2 r1">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c3 r1">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c4 r1">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c5 r1">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c6 r1">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c7 r2">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c8 r2">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c9 r2">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c10 r2">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c11 r2">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c12 r2">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c13 r2">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c14 r2">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c15 r2">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c16 r2">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c17 r2">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c18 r2">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c19 r3">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c20 r3">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c21 r3">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c22 r3">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c23 r3">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c24 r3">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c25 r3">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c26 r3">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c28 r3">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c29 r3">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c30 r3">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c31 r3">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c32 r3">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c33 r3">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c34 r3">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c35 r3">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c36 r3">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
	<div class="gel c37 r3">
		<div class="hex-brick h1"></div>
		<div class="hex-brick h2"></div>
		<div class="hex-brick h3"></div>
	</div>
</div>
<div style="text-align:center;margin:20px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5图片动画 h5图标动画 html5图片动画 html5图标动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到