七夕情人节就快到了，这里献上纯js表白神器-心里都是你，预览：
技术点：css-3d、js-随机色、js-transform
1.html：
<div class="heart">
<div class="cube">
<div>
<img src="data:images/1.jpg" width="100" height="100" alt="">
</div>
<div>
<img src="data:images/2.jpg" width="100" height="100" alt="">
</div>
<div>
<img src="data:images/3.jpg" width="100" height="100" alt="">
</div>
<div>
<img src="data:images/4.jpg" width="100" height="100" alt="">
</div>
<div>
<img src="data:images/5.jpg" width="100" height="100" alt="">
</div>
<div>
<img src="data:images/6.jpg" width="100" height="100" alt="">
</div>
</div>
</div>
2.css：
*{
margin:;
padding:;
}
body{
background:#000;
overflow:hidden;
}
.heart{
position:absolute;
left:;
right:;
top:;
bottom:;
width:200px;
height:260px;
margin: auto;
transform-style:preserve-3d;
perspective:800px;
animation:rot 15s linear infinite;
}
@keyframes rot{
from{transform:rotateY(0deg) rotateX(0deg)}
to{transform:rotateY(360deg) rotateX(360deg)}
}
.rib{
position:absolute;
width:200px;
height:260px;
border:solid red;
border-width:1px 1px 0 0;
border-radius:100% 100% 0/40% 100% 0;
transition: all 1s;
}
.cube{
position:absolute;
left:;
right:;
top:;
bottom:;
margin:auto;
width:100px;
height:100px;
color:red;
transform-style:preserve-3d;
transform:translateZ(50px);
}
.cube div{
position:absolute;
width:100px;
height:100px;
}
.cube div:nth-child(1){
left:;
top:-100px;
transform-origin:bottom;
transform:rotateX(90deg);
}
.cube div:nth-child(2){
left:;
top:100px;
transform-origin:top;
transform:rotateX(-90deg);
}
.cube div:nth-child(3){
left:-100px;
top:0px;
transform-origin:right;
transform:rotateY(-90deg);
}
.cube div:nth-child(4){
left:100px;
top:0px;
transform-origin:left;
transform:rotateY(90deg);
}
.cube div:nth-child(5){
left:;
top:0px;
}
.cube div:nth-child(6){
left:;
top:0px;
transform:translateZ(-100px);
}
3.js：
var heart = document.getElementsByClassName("heart")[0];
for (var i = 0; i < 36; i++) {
var oDiv = document.createElement("div");
oDiv.className = "rib";
// 画36条心形曲线
oDiv.style.transform = "rotateY(" + 10 * i + "deg) rotateZ(45deg) translateX(30px)";
var n = 0;
setInterval(function() {
if (n < 36) {
document.getElementsByClassName('rib')[n].style.borderColor = getRandomColor();
n = n + 1;
} else {
n = 0;
}
},1000)
console.log(n)
heart.appendChild(oDiv);
}
// 随机色
var getRandomColor = function(){
return '#' +
(function(color){
return (color += '0123456789abcdef'[Math.floor(Math.random()*16)])
&& (color.length == 6) ? color : arguments.callee(color);
})('');
}
图片资源自行填充。
下图效果只是添加了一个hover改变div的transform属性，大家可以扩展制作。