兰陵の记事簿

Tech Otakus Save The World

兰陵

2016年8月26日

代码>

害怕高清3D重置—CSS限定

害怕高清3D重置—CSS限定

这是一张很老的表情了,虽然“害怕”的表情层出不穷,但是,我的脑洞又来了,将害怕进行到底,于是用CSS动画做了一个。

效果如下↓   不同浏览器字体显示也是奇葩

为毛左边的那个害怕展开姿势辣么骚?

我也想它像那张gif一样躺下来,可是坐标轴在那。我换了不同姿势,它还是很奇葩的转下来,于是我...你就这么骚的转下来吧。

以前没注意检查,已修改写错的,加了发光 8-) 。

 

代码如下↓ Github

HTML

<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="Author" content="兰陵">
	<title>纯CSS3害怕高清3D重置</title>
	<link rel="stylesheet" type="text/css" href="css/fear.css">	
</head>
<body>
	<header>
		<h1 style="margin:10px;text-align:center;">害怕高清3D重置</h1>
	</header>
		<h2 style="margin:10px;text-align:center;">CSS限定 by <a href="http://blog.thkira.com/" target="_black">兰陵</a></h2>
	<div style="height:300px;margin-top:200px;">
		<div class="cube-wrap">
			<div class="cube depth">
				<div class="front-pane"><h1>害怕</h1><p>高清3D重置</p><p>CSS限定</p><p>by 兰陵</p></div>
				<div class="back-pane"><h1>害怕</h1><p>高清3D重置</p><p>CSS限定</p><p>by 兰陵</p></div>
				<div class="top-pane"><h1>害怕</h1><p>高清3D重置</p><p>CSS限定</p><p>by 兰陵</p></div>
				<div class="bottom-pane"><h1>害怕</h1><p>高清3D重置</p><p>CSS限定</p><p>by 兰陵</p></div>
				<div class="left-pane"><h1>害怕</h1><p>高清3D重置</p><p>CSS限定</p><p>by 兰陵</p></div>
				<div class="right-pane"><h1>害怕</h1><p>高清3D重置</p><p>CSS限定</p><p>by 兰陵</p></div>
				<div class="huaji"><img src="img/huaji.png" alt="滑稽" title="滑稽"></div>
				<div class="shine"><img src="img/shine.png" alt="发光" title="发光"></div>
			</div>
		</div>
	</div>
</body>
</html>

CSS

* {
	margin:0;
	padding:0;
}
body {
	background:#dadada;
}
@-webkit-keyframes cube-spin {
	0% {-webkit-transform:scale(0.4) rotateX(-45deg) rotateY(45deg);}
	20% {-webkit-transform:scale(0.6) rotateX(-45deg) rotateY(-75deg);}
	60%,100% {-webkit-transform:scale(1.0) rotateX(0deg) rotateY(-315deg);}
}
@-ms-keyframes cube-spin {
	0% {-ms-transform:scale(0.4) rotateX(-45deg) rotateY(45deg);}
	20% {-ms-transform:scale(0.6) rotateX(-45deg) rotateY(-75deg);}
	60%,100% {-ms-transform:scale(1.0) rotateX(0deg) rotateY(-315deg);}
}
@-moz-keyframes cube-spin {
	0% {-moz-transform:scale(0.4) rotateX(-45deg) rotateY(45deg);}
	20% {-moz-transform:scale(0.6) rotateX(-45deg) rotateY(-75deg);}
	60%,100% {-moz-transform:scale(1.0) rotateX(0deg) rotateY(-315deg);}
}
@keyframes cube-spin {
	0% {transform:scale(0.4) rotateX(0deg) rotateY(45deg);}
	20% {transform:scale(0.6) rotateX(-45deg) rotateY(-75deg);}
	60%,100% {transform:scale(1.0) rotateX(0deg) rotateY(-315deg);}
}
@-webkit-keyframes cube-front-unfold {
	60%,100% {-webkit-transform:translateZ(100px) rotateX(-90deg);}
}
@-ms-keyframes cube-front-unfold {
	60%,100% {-ms-transform:translateZ(100px) rotateX(-90deg);}
}
@-moz-keyframes cube-front-unfold {
	60%,100% {-moz-transform:translateZ(100px) rotateX(-90deg);}
}
@keyframes cube-front-unfold {
	60%,100% {transform:translateZ(100px) rotateX(-90deg);}
}
@-webkit-keyframes cube-top-unfold {
	60%,100% {-webkit-transform:translateZ(-100px) rotateX(-180deg);}
}
@-ms-keyframes cube-top-unfold {
	60%,100% {-ms-transform:translateZ(-100px) rotateX(-180deg);}
}
@-moz-keyframes cube-top-unfold {
	60%,100% {-moz-transform:translateZ(-100px) rotateX(-180deg);}
}
@keyframes cube-top-unfold {
	60%,100% {transform:translateZ(-100px) rotateX(-180deg);}
}
@-webkit-keyframes cube-left-unfold {
	60%,100% {-webkit-transform:rotateX(90deg) translateY(100px) translateX(-200px);}
}
@-ms-keyframes cube-left-unfold {
	60%,100% {-ms-transform:rotateX(90deg) translateY(100px) translateX(-200px);}
}
@-moz-keyframes cube-left-unfold {
	60%,100% {-moz-transform:rotateX(90deg) translateY(100px) translateX(-200px);}
}
@keyframes cube-left-unfold {
	60%,100% {transform:rotateX(90deg) translateY(100px) translateX(-200px);}
}
@-webkit-keyframes shine {
	0%,60% {opacity:0;}
	80% {opacity:1;}
	100% {opacity:0;}
}
@-ms-keyframes shine {
	0%,60% {opacity:0;}
	80% {opacity:1;}
	100% {opacity:0;}
}
@-moz-keyframes shine {
	0%,60% {opacity:0;}
	80% {opacity:1;}
	100% {opacity:0;}
}
@keyframes shine {
	0%,60% {opacity:0;}
	80% {opacity:1;}
	100% {opacity:0;}
}
.cube-wrap {
	-webkit-perspective:800px;
	-webkit-perspective-origin:50% 100px;
	-moz-perspective:800px;
	-moz-perspective-origin:50% 100px;
	-ms-perspective:800px;
	-ms-perspective-origin:50% 100px;
	perspective:800px;
	perspective-origin:50% 100px;
}
.cube {
	position:relative;
	width:200px;
	margin:0 auto;
	-webkit-transform-style:preserve-3d;
	-webkit-animation:cube-spin 4s infinite linear;
	-moz-transform-style:preserve-3d;
	-moz-animation:cube-spin 4s infinite linear;
	-ms-transform-style:preserve-3d;
	-ms-animation:cube-spin 4s infinite linear;
	transform-style:preserve-3d;
	animation:cube-spin 4s infinite linear;
}
.cube div {
	position:absolute;
	width:190px;
	height:190px;
	background:rgba(17,17,34,1);
	text-align:center;
	color:rgba(255,255,255,5);
	font-family:SimHei;
	border:5px #44ccff solid;
}
.cube h1 {
	font-size:5rem;
}
.cube div p {
	margin-bottom:8px;
}
.cube div p:nth-of-type(1) {
	font-size:1.8rem;
	text-align:left;
	margin-left:10px;
}
.cube div p:nth-of-type(2) {
	font-size:1.5rem;
	text-align:right;
	margin-right:10px;
}
.cube div p:nth-of-type(3) {
	font-size:1rem;
	text-align:center;
}
.depth div.back-pane {
	-webkit-transform:translateZ(-100px) rotateZ(-180deg);
	-moz-transform:translateZ(-100px) rotateZ(-180deg);
	-ms-transform:translateZ(-100px) rotateZ(-180deg);
	transform:translateZ(-100px) rotateZ(-180deg);
}
.depth div.right-pane {
	-webkit-transform:rotateY(-90deg) translateX(100px);
	-webkit-transform-origin:top right;
	-moz-transform:rotateY(-90deg) translateX(100px);
	-moz-transform-origin:top right;
	-ms-transform:rotateY(-90deg) translateX(100px);
	-ms-transform-origin:top right;
	transform:rotateY(-90deg) translateX(100px);
	transform-origin:top right;
}
.depth div.left-pane {
	-webkit-transform:rotateY(90deg) translateZ(-100px);
	-webkit-transform-origin:bottom center;
	-webkit-animation:cube-left-unfold 4s infinite linear;
	-moz-transform:rotateY(90deg) translateZ(-100px);
	-moz-transform-origin:bottom center;
	-moz-animation:cube-left-unfold 4s infinite linear;
	-ms-transform:rotateY(90deg) translateZ(-100px);
	-ms-transform-origin:bottom center;
	-ms-animation:cube-left-unfold 4s infinite linear;
	transform:rotateY(90deg) translateZ(-100px);
	transform-origin:bottom center;
	animation:cube-left-unfold 4s infinite linear;
}
.depth div.top-pane {
	-webkit-transform:rotateX(90deg) translateY(-100px);
	-webkit-transform-origin:top center;
	-webkit-animation:cube-top-unfold 4s infinite linear;
	-moz-transform:rotateX(90deg) translateY(-100px);
	-moz-transform-origin:top center;
	-moz-animation:cube-top-unfold 4s infinite linear;
	-ms-transform:rotateX(90deg) translateY(-100px);
	-ms-transform-origin:top center;
	-ms-animation:cube-top-unfold 4s infinite linear;
	transform:rotateX(90deg) translateY(-100px);
	transform-origin:top center;
	animation:cube-top-unfold 4s infinite linear;
}
.depth div.bottom-pane {
	-webkit-transform:rotateX(-90deg) translateY(100px);
	-webkit-transform-origin:bottom center;
	-moz-transform:rotateX(-90deg) translateY(100px);
	-moz-transform-origin:bottom center;
	-ms-transform:rotateX(-90deg) translateY(100px);
	-ms-transform-origin:bottom center;
	transform:rotateX(-90deg) translateY(100px);
	transform-origin:bottom center;
}
.depth div.front-pane {
	-webkit-transform:translateZ(100px);
	-webkit-transform-origin:bottom center;
	-webkit-animation:cube-front-unfold 4s infinite linear;
	-moz-transform:translateZ(100px);
	-moz-transform-origin:bottom center;
	-moz-animation:cube-front-unfold 4s infinite linear;
	-ms-transform:translateZ(100px);
	-ms-transform-origin:bottom center;
	-ms-animation:cube-front-unfold 4s infinite linear;
	transform:translateZ(100px);
	transform-origin:bottom center;
	animation:cube-front-unfold 4s infinite linear;
}
.depth div.huaji {
	background:transparent;
	border:none;
	-webkit-transform:rotateY(-45deg) rotateX(5deg) translateY(100px) translateZ(-100px);
	-moz-transform:rotateY(-45deg) rotateX(5deg) translateY(100px) translateZ(-100px);
	-ms-transform:rotateY(-45deg) rotateX(5deg) translateY(100px) translateZ(-100px);
	transform:rotateY(-45deg) rotateX(5deg) translateY(100px) translateZ(-100px);
}
.depth div.shine {
	background:transparent;
	border:none;
	-webkit-transform:rotateY(-45deg) rotateX(5deg) translateX(-75px);
	-moz-transform:rotateY(-45deg) rotateX(5deg) translateX(-75px);
	-ms-transform:rotateY(-45deg) rotateX(5deg) translateX(-75px);
	transform:rotateY(-45deg) rotateX(5deg) translateX(-75px);
	-webkit-animation:shine 4s infinite linear;
	-moz-animation:shine 4s infinite linear;
	-ms-animation:shine 4s infinite linear;
	animation:shine 4s infinite linear;
}

害怕高清3D重置—CSS限定

#一言#

来一发吐槽

Title - Artist
0:00