快乐玩前端：情人节请用代码表达你的爱意，女友收到都哭了

情人节请用代码表达你的爱意，女友收到都哭了

以程序员的方式撒狗粮，专业浪漫，值得拥有！

• 效果演示
  

• 代码

//css代码
*{
	padding:0;
	margin:0;
}
.all{
	width:1400px;
	margin:0 auto;
	background:#000;
}
.text{
	font:bolder 45px "华文行楷";
	color:#f00;
	width:1400px;
	text-align:center;
	height:120px;
	line-height:120px;
	transform-style: preserve-3d;
	animation:color 1s linear infinite;
}
@keyframes color{
	0% {color:#FF0000}
	25%{color:#FF6600}
	50%{color:#FFFF00}
	75%{color:#FF9900}
	100%{color:#FF99CC}
}
@-webkit-keyframes color{
	0% {color:#FF0000}
	25%{color:#FF6600}
	50%{color:#FFFF00}
	75%{color:#FF9900}
	100%{color:#FF99CC}
}
.up{
	height:200px
}
.down{
	width:360px;
	height:400px;
	margin:0 auto;
}
.heart{
	list-style:none;
	position:absolute;
	top:95px;
	width:320px;
}
.heart li div{
	width:270px;
	height:360px;
	border:solid 5px #f00;
	position:absolute;
	border-right:0;
	border-bottom:0;
	border-radius:180px 120px 0 15px/310px 160px 0 50px;
	transform:rotate(-50deg);
	transform-style: preserve-3d;
	animation:borderColor 1s linear infinite;
}
.cube{
	list-style:none;
	transform-style: preserve-3d;
	animation: rotate 5s linear infinite;
	-webkit-animation: rotate 5s linear infinite;
	transform-origin:50% 50% 0;
	width:150px;
	height:150px;
	transform:rotateX(45deg) rotateY(45deg);
	margin-left:105px
}
@keyframes borderColor{
	0% {border-color:#FF0000}
	25%{border-color:#FF6600}
	50%{border-color:#FFFF00}
	75%{border-color:#FF9900}
	100%{border-color:#FF99CC}
}
@-webkit-keyframes borderColor{
	0% {border-color:#FF0000}
	25%{border-color:#FF6600}
	50%{border-color:#FFFF00}
	75%{border-color:#FF9900}
	100%{border-color:#FF99CC}
}
.cube li{
	width:150px;
	height:150px;
	position:absolute;
	opacity:0.5;
	/*
	linear,infinite,
	*/
}/*
@keyframes rotate{
	0%{
		
		transform:rotateX(0deg) rotateY(0deg);
	}
	50%{
		transform:rotateX(0deg) rotateY(90deg);
	}
	100%{
		transform:rotateX(0deg) rotateY(180deg);
	}
	
}
*/
@keyframes rotate{
	0%{transform:rotateX(45deg) rotateY(45deg);}
	25%{transform:rotateX(45deg) rotateY(225deg);}
	50%{transform:rotateX(225deg) rotateY(225deg);}
	75%{transform:rotateX(225deg) rotateY(45deg);}
	100%{transform:rotateX(45deg) rotateY(45deg);}
}
@-webkit-keyframes rotate{
	0%{transform:rotateX(45deg) rotateY(45deg);}
	25%{transform:rotateX(45deg) rotateY(225deg);}
	50%{transform:rotateX(225deg) rotateY(225deg);}
	75%{transform:rotateX(225deg) rotateY(45deg);}
	100%{transform:rotateX(45deg) rotateY(45deg);}
}
.cube li:nth-child(1){
	transform:translateZ(-75px) rotateY(180deg);
	background-color:#00CC33;
}
.cube li:nth-child(2){
	transform:translateZ(+75px);
	background-color:#00CCFF;
}
.cube li:nth-child(3){
	transform:translateX(+75px) rotateY(90deg);
	background-color:#99FF33;
}
.cube li:nth-child(4){
	transform:translateX(-75px) rotateY(-90deg);
	background-color:#FF3300;
}
.cube li:nth-child(5){
	transform:translateY(+75px) rotateX(90deg);
	background-color:#9933FF;
}
.cube li:nth-child(6){
	transform:translateY(-75px) rotateX(-90deg);
	background-color:#FFCCCC;
}
img{
	width:150px;
	height:150px;
}

//html代码
<div class="all">
	<div class="up">
		<div class="text">XXX，我一生的最爱</div>
	</div>
	<div class="down">
		<ul class="cube">
			<li><img src="1.png" /></li>
			<li><img src="2.png" /></li>
			<li><img src="3.png" /></li>
			<li><img src="4.png" /></li>
			<li><img src="5.png" /></li>
			<li><img src="6.png" /></li>
		</ul>
		<ul class="heart">
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
		</ul>
	</div>
</div>

//js代码
var heart = document.getElementsByClassName("heart");
var line = heart[0].getElementsByTagName("li");
var ro = 360 / line.length;
for(var i = 0; i < line.length; i ++){
	line[i].style.transformOrigin = "180px 0";
	line[i].style.transform = "rotateY(" + ro * i + "deg)translateX(-15px)";//
}