情人节表白代码（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）
里面有使用说明。

情人节表白代码（2）相关推荐

Python实现的无法拒绝的情人节表白代码，python情人节表白代码
Python实现的无法拒绝的情人节表白代码,python情人节表白代码程序运行截图源代码 import sys import cfg import random import pygame fro ...
HTML情人节表白代码，给女朋友的电子情书代码，女朋友表白代码
HTML情人节表白代码,给女朋友的电子情书代码,女朋友表白代码,可更换照片及表白内容. 使用方法 1.表白对话在assets/dialog.json 2.女朋友照片放在img中,直接替换即可 3.代码 ...
情人节表白代码（1）
本文整个项目在我的资源里面->>>情人节表白代码(1)里面有详细使用说明. 其他表白代码: html表白代码大全:html表白代码大全情人节表白代码(2):情人节表白代码情人节烟 ...
程序员七夕情人节表白代码
程序员七夕情人节表白代码 MainClass:com.wujinxi.ShowLove package com.wujinxi;import java.awt.*; import java.awt.d ...
利用html5页面表白,利用HTML5实现七夕情人节表白代码
特效描述:利用HTML5实现七夕情人节表白代码.利用HTML5实现七夕情人节表白代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Th an ks for w atch ing! ...
matlab有趣表白程序_matlab情人节表白代码
[实例简介]情人节表白 [实例截图] [核心代码] %构造体积方程和坐标轴,画出图形; [X,Y,Z] = meshgrid(linspace(-3,3,101)); %3D心型图方程如下; F = ...
程序员520❤七夕情人节表白代码Html+Js+Css花瓣相册网页模板❤程序员表白必备
❉ 520程序员求婚Html+Js+Css花瓣相册❤ (爱心3D动画,自定义文字)/ 程序员表白必备一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白, 非常经典的程序员式的表达爱 ...
基于HTML+CSS+JS实现七夕情人节表白代码【含代码】
七夕情人节,这么浪漫的节日,自然少不了我这个浪漫博主,本次为大家贡献表白信封的制作,其他的就看缘分啦,哈哈,最后会放上资源包,需要的小伙伴自取就可以了文章目录一.画信封二.结构搭建三.HTML ...
HTML5七夕情人节表白代码 (动态3D相册)HTML+CSS+JS
❉ 超炫html+css+javascript幻化3D相册 (含背景音乐)程序员表白必备 _520_七夕情人节一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给 ...

情人节表白代码（2）

情人节表白代码（2）相关推荐

最新文章

热门文章