七夕情人节就快到了，这里献上纯js表白神器-心里都是你，预览：

 

技术点：css-3d、js-随机色、js-transform

1.html：

1     
     
       2         
      
        3             
       
         4                 
         5             
       
 6             
       
         7                 
         8             
       
 9             
       
        10                 
        11             
       
12             
       
        13                 
        14             
       
15             
       
        16                 
        17             
       
18             
       
        19                 
        20             
       
21         
      
22     
     

2.css：

1 *{ 2     margin:0; 3     padding:0; 4 } 5 body{ 6     background:#000; 7     overflow:hidden; 8 } 9 .heart{10     position:absolute;11     left:0;12     right:0;13     top:0;14     bottom:0;15     width:200px;16     height:260px;17     margin: auto;18     transform-style:preserve-3d;19     perspective:800px;20     animation:rot 15s linear infinite;21 }22 @keyframes rot{23     from{transform:rotateY(0deg) rotateX(0deg)}24     to{
    transform:rotateY(360deg) rotateX(360deg)}25 }26 .rib{27     position:absolute;28     width:200px;29     height:260px;30     border:solid red;31     border-width:1px 1px 0 0;32     border-radius:100% 100% 0/40% 100% 0;33     transition: all 1s;34 }35 .cube{36     position:absolute;37     left:0;38     right:0;39     top:0;40     bottom:0;41     margin:auto;42     width:100px;43     height:100px;44     color:red;45     transform-style:preserve-3d;46     transform:translateZ(50px);47 }48 .cube div{49     position:absolute;50     width:100px;51     height:100px;52 }53 .cube div:nth-child(1){54     left:0;55     top:-100px;56     transform-origin:bottom;57     transform:rotateX(90deg);58 }59 .cube div:nth-child(2){60     left:0;61     top:100px;62     transform-origin:top;63     transform:rotateX(-90deg);64 }65 .cube div:nth-child(3){66     left:-100px;67     top:0px;68     transform-origin:right;69     transform:rotateY(-90deg);70 }71 .cube div:nth-child(4){72     left:100px;73     top:0px;74     transform-origin:left;75     transform:rotateY(90deg);76 }77 .cube div:nth-child(5){78     left:0;79     top:0px;80 }81 .cube div:nth-child(6){82     left:0;83     top:0px;84     transform:translateZ(-100px);85 }

3.js：

1 var heart = document.getElementsByClassName("heart")[0]; 2 for (var i = 0; i < 36; i++) { 3     var oDiv = document.createElement("div"); 4     oDiv.className = "rib"; 5     // 画36条心形曲线 6     oDiv.style.transform = "rotateY(" + 10 * i + "deg) rotateZ(45deg) translateX(30px)"; 7     var n = 0; 8     setInterval(function() { 9         if (n < 36) {10             document.getElementsByClassName('rib')[n].style.borderColor = getRandomColor();11             n = n + 1;12         } else {13             n = 0;14         }15     },1000)16     console.log(n)17     heart.appendChild(oDiv);18 }19 20 // 随机色21 var getRandomColor = function(){    22   return  '#' +    23     (function(color){    24     return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])    25       && (color.length == 6) ?  color : arguments.callee(color);    26   })('');    27 }

图片资源自行填充。

下图效果只是添加了一个hover改变div的transform属性，大家可以扩展制作。