情人节表白代码（2）

最新推荐文章于 2024-06-14 20:23:41 发布

xiaoweiwei99

最新推荐文章于 2024-06-14 20:23:41 发布

阅读量817

点赞数

分类专栏：前端 html 文章标签： javascript 动画开发语言

原文链接：https://blog.csdn.net/qq_44809707/article/details/113768320

版权

前端同时被 2 个专栏收录

44 篇文章 4 订阅

订阅专栏

html

44 篇文章 2 订阅

订阅专栏

本文整个项目在我的资源里面—>>>情人节表白代码（2）里面有详细使用说明。
其他表白代码：
html表白代码大全（10个效果）：html表白代码大全
情人节表白代码（1）：情人节表白代码(1)
情人节烟花表白代码：烟花特效表白

效果：
照片，表白话语和背景音乐都可以改。在这里插入图片描述
核心代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>爱在心中</title>

<style>
body {
  background: #000;
  height: 100vh;
  overflow: hidden;
}

#ui .love {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -225px 0 0 -225px;
}
#ui .love:last-child .love_word {
  color: red;
  font-size: 3.5rem;
  text-shadow: 0 0 10px red;
}
#ui .love_word {
  color: #fff;
  font-size: 1.4rem;
  transform: translateY(-100%) rotateZ(-30deg);
  font-family: 'Dosis', sans-serif;
  text-shadow: 0 0 10px #ffc800;
  letter-spacing: 2px;
}
#ui .love_horizontal {
  animation: horizontal 10000ms infinite alternate ease-in-out;
}
#ui .love_vertical {
  animation: vertical 20000ms infinite linear;
}
#ui .love:nth-child(1) .love_horizontal {
  animation-delay: -300ms;
}
77.5% {
    transform: translateY(441.17647px);
  }
  79% {
    transform: translateY(428.57143px);
  }
  100% {
    transform: translateY(180px);
  }
}
</style>
</head>
<body>

  <div class="love">
    <div class="love_horizontal">
      <div class="love_vertical">
        <div class="love_word">我喜欢你</div>
      </div>
    </div>
  </div>
  <div class="love">
    <div class="love_horizontal">
      <div class="love_vertical">
        <div class="love_word">和我</div>
      </div>
    </div>
  </div>
  
  <div class="love">
    <div class="love_horizontal">
      <div class="love_vertical">
        <div class="love_word">好吗</div>
      </div>
    </div>
  </div>
  
  <div class="love">
    <div class="love_horizontal">
      <div class="love_vertical">
        <div class="love_word">和我</div>
      </div>
    </div>
  </div>
  <div class="love">
    <div class="love_horizontal">
      <div class="love_vertical">
        <div class="love_word">在一起</div>
      </div>
    </div>
  </div>
  <div class="love">
    <div class="love_horizontal">
      <div class="love_vertical">
        <div class="love_word">好吗</div>
      </div>
    </div>
  </div>
  
  <div class="love">
    <div class="love_horizontal">
      <div class="love_vertical">
        <div class="love_word">和我</div>
      </div>
    </div>
  </div>
  <div class="love">
    <div class="love_horizontal">
      <div class="love_vertical">
        <div class="love_word">在一起</div>
      </div>
    </div>
  </div>
  <div class="love">
    <div class="love_horizontal">
      <div class="love_vertical">
        <div class="love_word">好吗</div>
      </div>
    </div>
  </div>
  <div class="love">
    <div class="love_horizontal">
      <div class="love_vertical">
        <div class="love_word">爱</div>
      </div>
    </div>
  </div>
  <div class="love">
    <div class="love_horizontal">
      <div class="love_vertical">
        <div class="love_word">小姐姐</div>
      </div>
    </div>
  </div>
  
  <div class="love">
    <div class="love_horizontal">
      <div class="love_vertical">
        <div class="love_word">好吗</div>
      </div>
    </div>
  </div>
  <div class="love">
    <div class="love_horizontal">
      <div class="love_vertical">
        <div class="love_word">love</div>
      </div>
    </div>
  </div>
  <div class="love">
    <div class="love_horizontal">
      <div class="love_vertical">
        <div class="love_word">小姐姐</div>
      </div>
    </div>
  </div>
  <div class="love">
    <div class="love_horizontal">
      <div class="love_vertical">
        <div class="love_word">我喜欢你</div>
      </div>
    </div>
  </div>
  <div class="love">
    <div class="love_horizontal">
      <div class="love_vertical">
        <div class="love_word">和我</div>
      </div>
    </div>
  </div>
  
  <div class="love">
    <div class="love_horizontal">
      <div class="love_vertical">
        <div class="love_word">么么哒</div>
      </div>
    </div>
  </div>
  <div class="love">
    <div class="love_horizontal">
      <div class="love_vertical">
        <div class="love_word">Love</div>
      </div>
    </div>
  </div>
</div>
 <div><img style="position:absolute;
z-index:-1;
top:40%;
width:250px;
height:200px;
left:45%;" 
src="https://c-ssl.duitang.com/uploads/item/202004/05/20200405145947_wlbug.thumb.400_0.jpg"></div>
<audio autoplay="autoplay" loop="loop" preload="auto"
            src="http://music.163.com/song/media/outer/url?id=1474411443.mp3">       
</audio>	
</body>
</html>

代码补充： 上述只是核心代码，并不是全部代码。
想要换背景音乐的话就换第四行的音乐链接，可以看我的另一篇文章—>>>怎么获取音乐的链接地址？

整个项目在我的资源里面：
情人节表白代码（2）
里面有使用说明。
在这里插入图片描述

xiaoweiwei99

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
情人节表白代码（2）

本文整个项目在我的资源里面—>>>情人节表白代码（2）里面有详细使用说明。其他表白代码：html表白代码大全（10个效果）：html表白代码大全情人节表白代码（1）：情人节表白代码(1)情人节烟花表白代码：烟花特效表白效果：照片，表白话语和背景音乐都可以改。核心代码：<!doctype html><html><head><meta charset="utf-8"><title>爱在心中</title&
复制链接

扫一扫

专栏目录