跳动爱心代码-李峋同款爱心代码(升级版)

ClassmateJie

已于 2023-08-30 21:40:04 修改

阅读量4k

点赞数 4

文章标签：前端 css html5 javascript 开发语言

于 2022-11-13 23:17:47 首次发布

本文链接：https://blog.csdn.net/J_Jie_/article/details/127839058

版权

我挥舞着键盘和本子，发誓要把世界写个明明白白。

在这里插入图片描述

简介

代码实现电视剧点燃我，温暖你打火机与公主裙李洵爱心跳动效果。跳动的爱心❤自发布以来，后台收到很多私信，问如何实现手机端浏览效果、如何加文字、背景和爱心的颜色调整等等，趁着周末放假，随便写了几行代码，实现了跳动爱心的升级版love-code-pro

今天周末了，大家都要好好吃饭，好好睡觉哦！🎉｜微信公众号：「ClassmateJie」

跳动爱心–文字弹幕

在这里插入图片描述

1、index文件的修改：在如图位置所示，增加如下代码

  <div id="main"></div>
  <script type="text/javascript">
    //获取父容器
    var mainObj = document.getElementById('main')
    //获取浏览器的高度
    var innerWidth = document.body.clientWidth
    var innerHeight = document.body.clientHeight
    
    //计数器
    var number = 0
    
    /**
     * 位置随机生成
     */
    var interval = setInterval(function() {
        var heart = document.createElement('heart')
        heart.style.left = Math.floor(Math.random() * innerWidth) + 'px'
        heart.style.top = Math.floor(Math.random() * innerHeight) + 'px'
        mainObj.appendChild(heart)
        number++
        //数量达到520时结束
        if (number >= 520) {
            clearInterval(interval)
        }
    }, 50)
  </script>

在这里插入图片描述

2、style文件的修改：选中style文件，全选粘贴覆盖如下代码

* {
  padding: 0;
  margin: 0;
}
body {
  background: #ff5555;
  overflow: hidden;
  margin: 0;
  /* background-color: #000 !important; */
}
/**
* 主容器
*/
div#main {
  width: 100vw;
  height: 100vh;
}

/**
* 设置无限的动效
* 单次动效时间3s
*/
heart {
  position: absolute;
  width: 20px;
  height: 20px;
  color: #FFF;
  text-align: center;
  /* background: #e74c3c; */
  font-size: 30px;
  transform: rotate(360deg) scale(.6);
  opacity: .5;
  animation-name: opacity;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

/**
* 用伪类在heart  content即是展示的文字效果
*/
heart::before {
  position: absolute;
  content: 'love-code';
  width: 200px;
  height: 20px;
  /* background: #e74c3c; */
  border-radius: 50%;
  transform: translateX(-10px);
}

/**
*用伪类在heart
*/

heart::after {
  position: absolute;
  content: '';
  width: 20px;
  height: 20px;
  /* background: #e74c3c; */
  border-radius: 50%;
  transform: translateY(-10px);
}

/**
* 改变透明度
*/
@keyframes opacity {
  25%,
  75% {
      opacity: 1;
  }
  50%,
  100% {
      opacity: .5;
  }
}

在这里插入图片描述