还有三天就是一年一度的七夕情人节了，在即将满世界撒狗粮的日子来临之前，是不是将博客好好的装扮一下呢？！
效果
方法
<html lang="en" >
<head>
<style type="text/css">
.world {
position: absolute;
margin:auto;
left:0;
right:0;
top:0px;
bottom:0;
width:800px;
height:200px;
}
/* BASIC CUBE CREATION */
/* BASIC CUBE CREATION */
/* BASIC CUBE CREATION */
.box {
position:absolute;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
width: 100px;
height: 100px;
animation: rotate 5s ease-in-out infinite;
transform-style: preserve-3d;
}
.box:nth-of-type(1) {
animation-delay:-5s;
left:-600px;
}
.box:nth-of-type(2) {
animation-delay:-4s;
left:-300px;
}
.box:nth-of-type(3) {
animation-delay:-3s;
left:0px;
}
.box:nth-of-type(4) {
animation-delay:-2s;
left:300px;
}
.box:nth-of-type(5) {
animation-delay:-1s;
left:600px;
}
.plane1, .plane2 {
position: absolute;
opacity:0.8;
}
.plane2 {transform: rotateY(90deg);
}
.heart {
background-color: pink;
height: 50px;
transform: rotate(-45deg);
width: 50px;
}
.heart:before {
content: "";
background-color: pink;
border-radius: 100%;
height: 50px;
position: absolute;
width: 50px;
top:-25px;
}
.heart:after {
content: "";
background-color: pink;
border-radius: 100%;
height: 50px;
position: absolute;
width: 50px;
top:0px;
left:25px;
}
/* Rotation animation to actually see the cube */
@keyframes rotate {
0% {transform: rotateY(0deg) rotateZ(25deg) translateY(50px);
}
50% {transform: rotateY(270deg) rotateZ(25deg) translateY(-50px);
}
100% {transform: rotateY(360deg) rotateZ(25deg) translateY(50px);
}
}
</style>
</head>
<body>
<div class="world">
<div class="box">
<div class="plane1">
<div class="heart"></div>
</div>
<div class="plane2">
<div class="heart"></div>
</div>
</div>
<div class="box">
<div class="plane1">
<div class="heart"></div>
</div>
<div class="plane2">
<div class="heart"></div>
</div>
</div>
<div class="box">
<div class="plane1">
<div class="heart"></div>
</div>
<div class="plane2">
<div class="heart"></div>
</div>
</div>
<div class="box">
<div class="plane1">
<div class="heart"></div>
</div>
<div class="plane2">
<div class="heart"></div>
</div>
</div>
<div class="box">
<div class="plane1">
<div class="heart"></div>
</div>
<div class="plane2">
<div class="heart"></div>
</div>
</div>
</div>
</body>
</html>