|
文中所有表白代码都在我的资源里面html表白代码（全）需要的就进链接下载吧。
对象生日祝福代码地址（也可以表白）：html生日快乐代码
本文共有9个表白效果，少部分有全部代码。（没特殊说明的就是完整代码，可以在桌面新建一个文本文档，把代码复制进去，保存后把后缀改为html，双击即可打开页面。）
创建完html文件后可以直接QQ或者微信发送html文件，选择浏览器打开就可以了。（有些效果没显示就需要把css和js写入html文件里面；图片不显示则需要更改图片绝对地址为图片链接，不知道怎么生成图片链接可以先发一个仅自己可见的图片说说，然后就可以得到图片链接地址了。）
代码1：
跳动爱心
*{
padding: 0;
margin: 0;
}
body{
background-color: pink;
}
#frame{
position: relative;
width: 400px;
height: 300px;
margin: 250px auto;
}
.left,.right{
top: 0;
width: 200px;
height: 200px;
border-radius: 50%;
}
.left{
left: 35px;
}
.right{
right: 35px;
z-index: -1;
}
.bottom{
bottom: 36px;
left: 100px;
width: 200px;
height: 200px;
transform: rotate(45deg);
z-index: -1;
}
.heart{
position: absolute;
box-shadow:0 0 40px #d5093c;
animation: beat .8s ease infinite normal;
background: linear-gradient(-90deg, #F50A45 0%, #d5093c 40%);
}
@keyframes beat {
0%{
transform: scale(1) rotate(225deg);
box-shadow:0 0 40px #d5093c;
}
50%{
transform: scale(1.1) rotate(225deg);
box-shadow: 0 0 70px #d5093c;
}
100%{
transform: scale(1) rotate(225deg);
box-shadow: 0 0 40px #d5093c;;
}
}
效果1：  代码2：
动态爱心
html, body {
height: 100%;
padding: 0;
margin: 0;
background: #000;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
...
代码2补充说明： 代码过长，这里不贴出来了，可以去我的资源下载所有源码。 效果2：  代码3：
爱心
*{
margin: 0px;
border: 0px;
}
body{
overflow: hidden;
background-color: #000000;
}
.container{
position: relative;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
height: 260px;
width: 200px;
transform-origin: 50% 130%;
transform-style: preserve-3d;
animation: 8s rotate linear infinite;
}
@keyframes rotate{
from{
transform:rotateX(0deg) rotateY(0deg);
}
to{
transform: rotateX(360deg) rotateY(360deg);
}
}
.square{
position: relative;
width: 100px;
height: 100px;
transform:translateX(50px) translateY(300px) translateZ(50px);
transform-style: preserve-3d;
}
.square div{
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
}
.square div:nth-child(1){
top: 100px;
transform-origin: top;
transform:rotateX(-90deg);
}
.square div:nth-child(2){
left: 100px;
transform-origin: left;
transform:rotateY(90deg);
}
.square div:nth-child(3){
left: -100px;
transform-origin: right;
transform:rotateY(-90deg);
}
.square div:nth-child(4){
top: -100px;
transform-origin: bottom;
transform:rotateX(90deg);
}
.square div:nth-child(6){
top:0;
transform:translateZ(-100px);
}
.square div:nth-child(5){
}
.heart{
position: absolute;
top:0;
left:0;
height: 260px;
width: 200px;
border: 2px solid red;
margin: 200px auto;
border-radius: 50% 50% 0%/50% 50% 0%;
border-bottom: 0;
border-left: 0;
}
img{
width: 100px;
height:100px;
}
代码3补充说明： 代码太长没有全部贴出，里面的图片地址是百度图片的地址，你也可以换成本地图片的地址。（比如女朋友的照片哈哈哈） 效果3：  代码4：
爱在心中
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(70) .love_vertical {
animation-delay: -21000ms;
}
...
...
么么哒
Love
代码4说明： 代码太长，想要的可以去我的资源下载。 效果4：  代码5：
Heart
var b = document.body;
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
eval('var M=Math,n=M.pow,i,E=2,F="rgba(233,61,109,",d=M.cos,z=M.sin,L=1,u=30,W=window,w=c.width=W.innerWidth,h=c.height=W.innerHeight,r=_1){return M.random()*2-1},y="px Arial",v="爱你",q="♥",X=w/2,Y=h/2,T=4,p=_1){var e=this;e.g=_1){e.x=X;e.y=Y;e.k=0;e.l=0;e.t=M.random()*19000;e.c=e.t};e.d=_1){a.fillStyle=F+(e.c/e.t)+")";a.fillText(q,e.x,e.y);e.c-=50;e.x+=e.k;e.y+=e.l;e.k=e.k+r();e.l=e.l+r();if(e.cw||e.xh||e.y |