七夕情人节就快到了，这里献上纯js表白神器-心里都是你，预览：
技术点：css-3d、js-随机色、js-transform
1.html：
1 <div class="heart"> 2 <div class="cube"> 3 <div> 4 <img src="images/1.jpg" width="100" height="100" alt=""> 5 </div> 6 <div> 7 <img src="images/2.jpg" width="100" height="100" alt=""> 8 </div> 9 <div> 10 <img src="images/3.jpg" width="100" height="100" alt=""> 11 </div> 12 <div> 13 <img src="images/4.jpg" width="100" height="100" alt=""> 14 </div> 15 <div> 16 <img src="images/5.jpg" width="100" height="100" alt=""> 17 </div> 18 <div> 19 <img src="images/6.jpg" width="100" height="100" alt=""> 20 </div> 21 </div> 22 </div>
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属性，大家可以扩展制作。
