情人节表白代码(2)

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)

里面有使用说明。
在这里插入图片描述

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值