首先我们来看看预览图:
技术点:css-3d、js-随机色、js-transform
html:
<div class="heart"> <div class="cube"> <div> <img src="images/1.jpg-600" width="100" height="100" alt=""> </div> <div> <img src="images/2.jpg-600" width="100" height="100" alt=""> </div> <div> <img src="images/3.jpg-600" width="100" height="100" alt=""> </div> <div> <img src="images/4.jpg-600" width="100" height="100" alt=""> </div> <div> <img src="images/5.jpg-600" width="100" height="100" alt=""> </div> <div> <img src="images/6.jpg-600" width="100" height="100" alt=""> </div> </div> </div>
css:
*{ margin:0; padding:0; } body{ background:#000; overflow:hidden; } .heart{ position:absolute; left:0; right:0; top:0; bottom:0; 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:0; right:0; top:0; bottom:0; 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:0; top:-100px; transform-origin:bottom; transform:rotateX(90deg); } .cube div:nth-child(2){ left:0; 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:0; top:0px; } .cube div:nth-child(6){ left:0; top:0px; transform:translateZ(-100px); }
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); })(''); }
图片资源自行填充。
更多web前端开发知识,请查阅 HTML中文网 !!
以上就是纯JS实现情人节表白的神器--心里都是你(代码示例)的详细内容,更多请关注0133技术站其它相关文章!