html5和css3炫酷3D手风琴效果

分享 :
标签: html css3 前端特效

用纯CSS3实现国外网站常用的3D卡片特效

预览效果:

HTML部分:

<hmlt>
<head>
<body>
	<h1>一个自学前端开发的微信公众号:网页设计自学平台</h1>
		<div id="accordion">
			<article>
				<h2>Section 1</h2>
				<img src="http://cdn.attach.qdfuns.com/notes/pics/201801/03/154646x6p66rpp516ciilc.jpg" width="100" height="88">
				<p>
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
				</p>
				<p>
					Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
				</p>
			</article>
			<article>
				<h2>Section 2</h2>
				<img src="http://cdn.attach.qdfuns.com/notes/pics/201801/03/154646dhara0elh460w9w9.jpg" width="100" height="75">
				<p>
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
				</p>
				<p>
					Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
				</p>
			</article>
			<article>
				<h2>Section 3</h2>
				<img src="http://cdn.attach.qdfuns.com/notes/pics/201801/03/154646ynkhqd5fy95vq565.jpg" width="100" height="67">
				<p>
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
				</p>
				<p>
					Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
				</p>
			</article>
			<article>
				<h2>Section 4</h2>
				<img src="http://cdn.attach.qdfuns.com/notes/pics/201801/03/154646uff5l35kiolqaa1i.jpg" width="100" height="75">
				<p>
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
				</p>
				<p>
					Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
				</p>
			</article>
		</div>
</body>
</html>

CSS3代码部分:

body {
				background: #D5DED9;
				font-family: Arial, Helvetica, sans-serif;
			}
			h1, h2, h3, h4, h5, h6 {
				font-family: Georgia, serif;
			}
			h1{
				font-size:330%;
				text-shadow:2px 2px 1px white;
			}
			p {
				line-height: 140%;
				font-size: 90%;
			}
			#accordion {
				margin: 100px;
			}
			#accordion article {
				-webkit-transform: perspective(900px) rotateY(60deg);
				-webkit-transition: all 0.7s ease-in-out;
				background: #fff;
				border: 1px solid #f3f3f3;
				box-shadow: 0px 5px 15px gray;
				float: left;
				height: 420px;
				margin-left: -180px;
				padding: 20px;
				width: 220px;
			}
			#accordion article:first-child {
				margin-left: 0px;
			}
			#accordion article img {
				float: left;
				padding: 0 10px 5px 0;
			}
			#accordion article:hover {
				-webkit-transform: perspective(0) rotateY(-10deg);
				margin: 0 140px 0 -60px;
			}

文章分类

在线客服
热线电话

微信公众账号