纯JS实现情人节表白的神器--心里都是你(代码示例)

本篇文章给大家介绍如何用JavaScript脚本编写用于情人节表白的神器--心里都是你(3D心形+图片旋转效果)。用代码实现告别,这是程序员才有的浪漫!!

首先我们来看看预览图:

2.gif

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

html:

<div class="heart">
  <div class="cube">
      <div>
         <img src="images/1.jpg" width="100" height="100" alt="">
      </div>
      <div>
         <img src="images/2.jpg" width="100" height="100" alt="">
      </div>
      <div>
         <img src="images/3.jpg" width="100" height="100" alt="">
      </div>
      <div>
         <img src="images/4.jpg" width="100" height="100" alt="">
      </div>
      <div>
         <img src="images/5.jpg" width="100" height="100" alt="">
      </div>
      <div>
         <img src="images/6.jpg" 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实现情人节表白的神器--心里都是你(代码示例)的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » 头条

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏