|
所有HTML表白代码都在在我的资源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;
}
var container = document.getElementsByClassName("container")[0];
for (var i = 0;i < 36;i++) {
var heart = document.createElement("div");
heart.className = "heart";
heart.style.transform = "rotateY("+i*10+"deg) rotateZ(45deg) translateX(30px)";
container.appendChild(heart);
}
代码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(1) .love_horizontal {
animation-delay: -300ms;
}
#ui .love:nth-child(1) .love_vertical {
animation-delay: -300ms;
}
#ui .love:nth-child(2) .love_horizontal {
animation-delay: -600ms;
}
#ui .love:nth-child(2) .love_vertical {
animation-delay: -600ms;
}
#ui .love:nth-child(3) .love_horizontal {
animation-delay: -900ms;
}
#ui .love:nth-child(3) .love_vertical {
animation-delay: -900ms;
}
#ui .love:nth-child(4) .love_horizontal {
animation-delay: -1200ms;
}
#ui .love:nth-child(4) .love_vertical {
animation-delay: -1200ms;
}
#ui .love:nth-child(5) .love_horizontal {
animation-delay: -1500ms;
}
#ui .love:nth-child(5) .love_vertical {
animation-delay: -1500ms;
}
#ui .love:nth-child(6) .love_horizontal {
animation-delay: -1800ms;
}
#ui .love:nth-child(6) .love_vertical {
animation-delay: -1800ms;
}
#ui .love:nth-child(7) .love_horizontal {
animation-delay: -2100ms;
}
#ui .love:nth-child(7) .love_vertical {
animation-delay: -2100ms;
}
#ui .love:nth-child(8) .love_horizontal {
animation-delay: -2400ms;
}
#ui .love:nth-child(8) .love_vertical {
animation-delay: -2400ms;
}
#ui .love:nth-child(9) .love_horizontal {
animation-delay: -2700ms;
}
#ui .love:nth-child(9) .love_vertical {
animation-delay: -2700ms;
}
#ui .love:nth-child(10) .love_horizontal {
animation-delay: -3000ms;
}
#ui .love:nth-child(10) .love_vertical {
animation-delay: -3000ms;
}
#ui .love:nth-child(11) .love_horizontal {
animation-delay: -3300ms;
}
#ui .love:nth-child(11) .love_vertical {
animation-delay: -3300ms;
}
#ui .love:nth-child(12) .love_horizontal {
animation-delay: -3600ms;
}
#ui .love:nth-child(12) .love_vertical {
animation-delay: -3600ms;
}
#ui .love:nth-child(13) .love_horizontal {
animation-delay: -3900ms;
}
#ui .love:nth-child(13) .love_vertical {
animation-delay: -3900ms;
}
#ui .love:nth-child(14) .love_horizontal {
animation-delay: -4200ms;
}
#ui .love:nth-child(14) .love_vertical {
animation-delay: -4200ms;
}
#ui .love:nth-child(15) .love_horizontal {
animation-delay: -4500ms;
}
#ui .love:nth-child(15) .love_vertical {
animation-delay: -4500ms;
}
#ui .love:nth-child(16) .love_horizontal {
animation-delay: -4800ms;
}
#ui .love:nth-child(16) .love_vertical {
animation-delay: -4800ms;
}
#ui .love:nth-child(17) .love_horizontal {
animation-delay: -5100ms;
}
#ui .love:nth-child(17) .love_vertical {
animation-delay: -5100ms;
}
#ui .love:nth-child(18) .love_horizontal {
animation-delay: -5400ms;
}
#ui .love:nth-child(18) .love_vertical {
animation-delay: -5400ms;
}
#ui .love:nth-child(19) .love_horizontal {
animation-delay: -5700ms;
}
#ui .love:nth-child(19) .love_vertical {
animation-delay: -5700ms;
}
#ui .love:nth-child(20) .love_horizontal {
animation-delay: -6000ms;
}
#ui .love:nth-child(20) .love_vertical {
animation-delay: -6000ms;
}
#ui .love:nth-child(21) .love_horizontal {
animation-delay: -6300ms;
}
#ui .love:nth-child(21) .love_vertical {
animation-delay: -6300ms;
}
#ui .love:nth-child(22) .love_horizontal {
animation-delay: -6600ms;
}
#ui .love:nth-child(22) .love_vertical {
animation-delay: -6600ms;
}
#ui .love:nth-child(23) .love_horizontal {
animation-delay: -6900ms;
}
#ui .love:nth-child(23) .love_vertical {
animation-delay: -6900ms;
}
#ui .love:nth-child(24) .love_horizontal {
animation-delay: -7200ms;
}
#ui .love:nth-child(24) .love_vertical {
animation-delay: -7200ms;
}
#ui .love:nth-child(25) .love_horizontal {
animation-delay: -7500ms;
}
#ui .love:nth-child(25) .love_vertical {
animation-delay: -7500ms;
}
#ui .love:nth-child(26) .love_horizontal {
animation-delay: -7800ms;
}
#ui .love:nth-child(26) .love_vertical {
animation-delay: -7800ms;
}
#ui .love:nth-child(27) .love_horizontal {
animation-delay: -8100ms;
}
#ui .love:nth-child(27) .love_vertical {
animation-delay: -8100ms;
}
#ui .love:nth-child(28) .love_horizontal {
animation-delay: -8400ms;
}
#ui .love:nth-child(28) .love_vertical {
animation-delay: -8400ms;
}
#ui .love:nth-child(29) .love_horizontal {
animation-delay: -8700ms;
}
#ui .love:nth-child(29) .love_vertical {
animation-delay: -8700ms;
}
#ui .love:nth-child(30) .love_horizontal {
animation-delay: -9000ms;
}
#ui .love:nth-child(30) .love_vertical {
animation-delay: -9000ms;
}
#ui .love:nth-child(31) .love_horizontal {
animation-delay: -9300ms;
}
#ui .love:nth-child(31) .love_vertical {
animation-delay: -9300ms;
}
#ui .love:nth-child(32) .love_horizontal {
animation-delay: -9600ms;
}
#ui .love:nth-child(32) .love_vertical {
animation-delay: -9600ms;
}
#ui .love:nth-child(33) .love_horizontal {
animation-delay: -9900ms;
}
#ui .love:nth-child(33) .love_vertical {
animation-delay: -9900ms;
}
#ui .love:nth-child(34) .love_horizontal {
animation-delay: -10200ms;
}
#ui .love:nth-child(34) .love_vertical {
animation-delay: -10200ms;
}
#ui .love:nth-child(35) .love_horizontal {
animation-delay: -10500ms;
}
#ui .love:nth-child(35) .love_vertical {
animation-delay: -10500ms;
}
#ui .love:nth-child(36) .love_horizontal {
animation-delay: -10800ms;
}
#ui .love:nth-child(36) .love_vertical {
animation-delay: -10800ms;
}
#ui .love:nth-child(37) .love_horizontal {
animation-delay: -11100ms;
}
#ui .love:nth-child(37) .love_vertical {
animation-delay: -11100ms;
}
#ui .love:nth-child(38) .love_horizontal {
animation-delay: -11400ms;
}
#ui .love:nth-child(38) .love_vertical {
animation-delay: -11400ms;
}
#ui .love:nth-child(39) .love_horizontal {
animation-delay: -11700ms;
}
#ui .love:nth-child(39) .love_vertical {
animation-delay: -11700ms;
}
#ui .love:nth-child(40) .love_horizontal {
animation-delay: -12000ms;
}
#ui .love:nth-child(40) .love_vertical {
animation-delay: -12000ms;
}
#ui .love:nth-child(41) .love_horizontal {
animation-delay: -12300ms;
}
#ui .love:nth-child(41) .love_vertical {
animation-delay: -12300ms;
}
#ui .love:nth-child(42) .love_horizontal {
animation-delay: -12600ms;
}
#ui .love:nth-child(42) .love_vertical {
animation-delay: -12600ms;
}
#ui .love:nth-child(43) .love_horizontal {
animation-delay: -12900ms;
}
#ui .love:nth-child(43) .love_vertical {
animation-delay: -12900ms;
}
#ui .love:nth-child(44) .love_horizontal {
animation-delay: -13200ms;
}
#ui .love:nth-child(44) .love_vertical {
animation-delay: -13200ms;
}
#ui .love:nth-child(45) .love_horizontal {
animation-delay: -13500ms;
}
#ui .love:nth-child(45) .love_vertical {
animation-delay: -13500ms;
}
#ui .love:nth-child(46) .love_horizontal {
animation-delay: -13800ms;
}
#ui .love:nth-child(46) .love_vertical {
animation-delay: -13800ms;
}
#ui .love:nth-child(47) .love_horizontal {
animation-delay: -14100ms;
}
#ui .love:nth-child(47) .love_vertical {
animation-delay: -14100ms;
}
#ui .love:nth-child(48) .love_horizontal {
animation-delay: -14400ms;
}
#ui .love:nth-child(48) .love_vertical {
animation-delay: -14400ms;
}
#ui .love:nth-child(49) .love_horizontal {
animation-delay: -14700ms;
}
#ui .love:nth-child(49) .love_vertical {
animation-delay: -14700ms;
}
#ui .love:nth-child(50) .love_horizontal {
animation-delay: -15000ms;
}
#ui .love:nth-child(50) .love_vertical {
animation-delay: -15000ms;
}
#ui .love:nth-child(51) .love_horizontal {
animation-delay: -15300ms;
}
#ui .love:nth-child(51) .love_vertical {
animation-delay: -15300ms;
}
#ui .love:nth-child(52) .love_horizontal {
animation-delay: -15600ms;
}
#ui .love:nth-child(52) .love_vertical {
animation-delay: -15600ms;
}
#ui .love:nth-child(53) .love_horizontal {
animation-delay: -15900ms;
}
#ui .love:nth-child(53) .love_vertical {
animation-delay: -15900ms;
}
#ui .love:nth-child(54) .love_horizontal {
animation-delay: -16200ms;
}
#ui .love:nth-child(54) .love_vertical {
animation-delay: -16200ms;
}
#ui .love:nth-child(55) .love_horizontal {
animation-delay: -16500ms;
}
#ui .love:nth-child(55) .love_vertical {
animation-delay: -16500ms;
}
#ui .love:nth-child(56) .love_horizontal {
animation-delay: -16800ms;
}
#ui .love:nth-child(56) .love_vertical {
animation-delay: -16800ms;
}
#ui .love:nth-child(57) .love_horizontal {
animation-delay: -17100ms;
}
#ui .love:nth-child(57) .love_vertical {
animation-delay: -17100ms;
}
#ui .love:nth-child(58) .love_horizontal {
animation-delay: -17400ms;
}
#ui .love:nth-child(58) .love_vertical {
animation-delay: -17400ms;
}
#ui .love:nth-child(59) .love_horizontal {
animation-delay: -17700ms;
}
#ui .love:nth-child(59) .love_vertical {
animation-delay: -17700ms;
}
#ui .love:nth-child(60) .love_horizontal {
animation-delay: -18000ms;
}
#ui .love:nth-child(60) .love_vertical {
animation-delay: -18000ms;
}
#ui .love:nth-child(61) .love_horizontal {
animation-delay: -18300ms;
}
#ui .love:nth-child(61) .love_vertical {
animation-delay: -18300ms;
}
#ui .love:nth-child(62) .love_horizontal {
animation-delay: -18600ms;
}
#ui .love:nth-child(62) .love_vertical {
animation-delay: -18600ms;
}
#ui .love:nth-child(63) .love_horizontal {
animation-delay: -18900ms;
}
#ui .love:nth-child(63) .love_vertical {
animation-delay: -18900ms;
}
#ui .love:nth-child(64) .love_horizontal {
animation-delay: -19200ms;
}
#ui .love:nth-child(64) .love_vertical {
animation-delay: -19200ms;
}
#ui .love:nth-child(65) .love_horizontal {
animation-delay: -19500ms;
}
#ui .love:nth-child(65) .love_vertical {
animation-delay: -19500ms;
}
#ui .love:nth-child(66) .love_horizontal {
animation-delay: -19800ms;
}
#ui .love:nth-child(66) .love_vertical {
animation-delay: -19800ms;
}
#ui .love:nth-child(67) .love_horizontal {
animation-delay: -20100ms;
}
#ui .love:nth-child(67) .love_vertical {
animation-delay: -20100ms;
}
#ui .love:nth-child(68) .love_horizontal {
animation-delay: -20400ms;
}
#ui .love:nth-child(68) .love_vertical {
animation-delay: -20400ms;
}
#ui .love:nth-child(69) .love_horizontal {
animation-delay: -20700ms;
}
#ui .love:nth-child(69) .love_vertical {
animation-delay: -20700ms;
}
#ui .love:nth-child(70) .love_horizontal {
animation-delay: -21000ms;
}
#ui .love:nth-child(70) .love_vertical {
animation-delay: -21000ms;
}
#ui .love:nth-child(71) .love_horizontal {
animation-delay: -21300ms;
}
#ui .love:nth-child(71) .love_vertical {
animation-delay: -21300ms;
}
#ui .love:nth-child(72) .love_horizontal {
animation-delay: -21600ms;
}
#ui .love:nth-child(72) .love_vertical {
animation-delay: -21600ms;
}
#ui .love:nth-child(73) .love_horizontal {
animation-delay: -21900ms;
}
#ui .love:nth-child(73) .love_vertical {
animation-delay: -21900ms;
}
#ui .love:nth-child(74) .love_horizontal {
animation-delay: -22200ms;
}
#ui .love:nth-child(74) .love_vertical {
animation-delay: -22200ms;
}
#ui .love:nth-child(75) .love_horizontal {
animation-delay: -22500ms;
}
#ui .love:nth-child(75) .love_vertical {
animation-delay: -22500ms;
}
#ui .love:nth-child(76) .love_horizontal {
animation-delay: -22800ms;
}
#ui .love:nth-child(76) .love_vertical {
animation-delay: -22800ms;
}
#ui .love:nth-child(77) .love_horizontal {
animation-delay: -23100ms;
}
#ui .love:nth-child(77) .love_vertical {
animation-delay: -23100ms;
}
#ui .love:nth-child(78) .love_horizontal {
animation-delay: -23400ms;
}
#ui .love:nth-child(78) .love_vertical {
animation-delay: -23400ms;
}
#ui .love:nth-child(79) .love_horizontal {
animation-delay: -23700ms;
}
#ui .love:nth-child(79) .love_vertical {
animation-delay: -23700ms;
}
#ui .love:nth-child(80) .love_horizontal {
animation-delay: -24000ms;
}
#ui .love:nth-child(80) .love_vertical {
animation-delay: -24000ms;
}
#ui .love:nth-child(81) .love_horizontal {
animation-delay: -24300ms;
}
#ui .love:nth-child(81) .love_vertical {
animation-delay: -24300ms;
}
#ui .love:nth-child(82) .love_horizontal {
animation-delay: -24600ms;
}
#ui .love:nth-child(82) .love_vertical {
animation-delay: -24600ms;
}
#ui .love:nth-child(83) .love_horizontal {
animation-delay: -24900ms;
}
#ui .love:nth-child(83) .love_vertical {
animation-delay: -24900ms;
}
#ui .love:nth-child(84) .love_horizontal {
animation-delay: -25200ms;
}
#ui .love:nth-child(84) .love_vertical {
animation-delay: -25200ms;
}
#ui .love:nth-child(85) .love_horizontal {
animation-delay: -25500ms;
}
#ui .love:nth-child(85) .love_vertical {
animation-delay: -25500ms;
}
#ui .love:nth-child(86) .love_horizontal {
animation-delay: -25800ms;
}
#ui .love:nth-child(86) .love_vertical {
animation-delay: -25800ms;
}
#ui .love:nth-child(87) .love_horizontal {
animation-delay: -26100ms;
}
#ui .love:nth-child(87) .love_vertical {
animation-delay: -26100ms;
}
#ui .love:nth-child(88) .love_horizontal {
animation-delay: -26400ms;
}
#ui .love:nth-child(88) .love_vertical {
animation-delay: -26400ms;
}
#ui .love:nth-child(89) .love_horizontal {
animation-delay: -26700ms;
}
#ui .love:nth-child(89) .love_vertical {
animation-delay: -26700ms;
}
#ui .love:nth-child(90) .love_horizontal {
animation-delay: -27000ms;
}
#ui .love:nth-child(90) .love_vertical {
animation-delay: -27000ms;
}
#ui .love:nth-child(91) .love_horizontal {
animation-delay: -27300ms;
}
#ui .love:nth-child(91) .love_vertical {
animation-delay: -27300ms;
}
#ui .love:nth-child(92) .love_horizontal {
animation-delay: -27600ms;
}
#ui .love:nth-child(92) .love_vertical {
animation-delay: -27600ms;
}
#ui .love:nth-child(93) .love_horizontal {
animation-delay: -27900ms;
}
#ui .love:nth-child(93) .love_vertical {
animation-delay: -27900ms;
}
#ui .love:nth-child(94) .love_horizontal {
animation-delay: -28200ms;
}
#ui .love:nth-child(94) .love_vertical {
animation-delay: -28200ms;
}
#ui .love:nth-child(95) .love_horizontal {
animation-delay: -28500ms;
}
#ui .love:nth-child(95) .love_vertical {
animation-delay: -28500ms;
}
#ui .love:nth-child(96) .love_horizontal {
animation-delay: -28800ms;
}
#ui .love:nth-child(96) .love_vertical {
animation-delay: -28800ms;
}
#ui .love:nth-child(97) .love_horizontal {
animation-delay: -29100ms;
}
#ui .love:nth-child(97) .love_vertical {
animation-delay: -29100ms;
}
#ui .love:nth-child(98) .love_horizontal {
animation-delay: -29400ms;
}
#ui .love:nth-child(98) .love_vertical {
animation-delay: -29400ms;
}
#ui .love:nth-child(99) .love_horizontal {
animation-delay: -29700ms;
}
#ui .love:nth-child(99) .love_vertical {
animation-delay: -29700ms;
}
#ui .love:nth-child(100) .love_horizontal {
animation-delay: -30000ms;
}
#ui .love:nth-child(100) .love_vertical {
animation-delay: -30000ms;
}
@keyframes horizontal {
from {
transform: translateX(0px);
}
to {
transform: translateX(450px);
}
}
@keyframes vertical {
0% {
transform: translateY(180px);
}
10% {
transform: translateY(45px);
}
15% {
transform: translateY(4.5px);
}
18% {
transform: translateY(0px);
}
20% {
transform: translateY(4.5px);
}
22% {
transform: translateY(34.61538px);
}
24% {
transform: translateY(64.28571px);
}
25% {
transform: translateY(112.5px);
}
26% {
transform: translateY(64.28571px);
}
28% {
transform: translateY(34.61538px);
}
30% {
transform: translateY(4.5px);
}
32% {
transform: translateY(0px);
}
35% {
transform: translateY(4.5px);
}
40% {
transform: translateY(45px);
}
50% {
transform: translateY(180px);
}
71% {
transform: translateY(428.57143px);
}
72.5% {
transform: translateY(441.17647px);
}
75% {
transform: translateY(450px);
}
77.5% {
transform: translateY(441.17647px);
}
79% {
transform: translateY(428.57143px);
}
100% {
transform: translateY(180px);
}
}
小姐姐
我喜欢你
和我
在一起
好吗
小姐姐
我喜欢你
和我
在一起
好吗
小姐姐
我喜欢你
和我
在一起
好吗
小姐姐
我喜欢你
和我
在一起
好吗
小姐姐
我喜欢你
爱
和我
在一起
好吗
biu~biu~
小姐姐
我喜欢你
和我
在一起
好吗
爱
小姐姐
我喜欢你
和我
在一起
好吗
love
小姐姐
我喜欢你
和我
在一起
好吗
啵啵啵
小姐姐
我喜欢你
和我
在一起
好吗
爱
小姐姐
我喜欢你
和我
在一起
好吗
love
小姐姐
我喜欢你
和我
在一起
好吗
爱
爱你哟
么么哒
Love
效果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.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
我喜欢你
*{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-box-sizing: border-box; box-sizing: border-box; }
html{ width: 100%; height: 100%; }
body{ max-width: 600px; margin: 0 auto; background: #0b3443; color: #f0f0f0;}
.share_img{ width: 0; height: 0; overflow: hidden; opacity: 0; }
.content{ padding: 80px 20px;}
.text_wrapper{ display: -webkit-box; display: flex; }
.text_wrapper .text{ padding-top: 20px; padding-left: 20px; }
.hide{ display: none !important; }
p{ margin: 0; }
.btn-groups{ padding-right: 20px; text-align: center; }
.heart-btn{ display: inline-block; animation: breath 0.8s linear 0s infinite both; -webkit-animation: breath 0.8s linear 0s infinite both; }
.btn{ position: relative; display: inline-block; width: 60px; height: 60px; margin: 0 30px; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.btn span{ display: block; width: 100%; height: 100%; line-height: 60px; margin-top: -10px; margin-left: -10px; text-align: center; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.btn-a{ background: #d26ae5; }
.btn-b{ background: #c9c9c9; }
.btn-a:before{ content: ''; position: absolute; display: block; width: 30px; height: 60px; background: #d26ae5; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; }
.btn-a:after{ content: ''; position: absolute; display: block; width: 60px; height: 30px; background: #d26ae5; left: 0; top: -29px; border-top-left-radius: 60px; border-top-right-radius: 60px;}
.btn-b:before{ content: ''; position: absolute; display: block; width: 30px; height: 60px; background: #c9c9c9; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; }
.btn-b:after{ content: ''; position: absolute; display: block; width: 60px; height: 30px; background: #c9c9c9; left: 0; top: -29px; border-top-left-radius: 60px; border-top-right-radius: 60px;}
.container{ }
.container .mask{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); }
.container .modal{ width: 80%; height: 160px; position: absolute; top: 50%; left: 50%; padding: 20px 15px; border-radius: 5px; transform: translate(-50%, -70%); -webkit-transform: translate(-50%，-70%); background: #f3f3f3;}
.container .modal p{ margin-top: 20px; margin-bottom: 20px; font-size: 16px; color: #353535; text-align: center;}
.confirm{ display: block; width: 120px; height: 40px; margin: 0 auto; border: none; font-size: 16px; border-radius: 5px; color: #ffffff; background: #f45cae; }
.type_words{ padding: 12px 20px; }
@keyframes breath {
0% {
transform: scale3d(1,1,1);
-webkit-transform: scale3d(1,1,1);
transform-origin: 50% 50%;
}
50%{
transform: scale3d(1.02,1.02,1.02);
-webkit-transform: scale3d(1.02,1.02,1.02);
transform-origin: 50% 50%;
}
100%{
transform: scale3d(1,1,1);
-webkit-transform: scale3d(1,1,1);
transform-origin: 50% 50%;
}
}
$(function() {
$('#yes').click(function(event) {
modal('我就知道小姐姐您一定会愿意的。(^_^)', function() {
$('.page_one').addClass('hide');
$('.page_two').removeClass('hide');
// typeWrite();
fireworks();
});
});
$('#no').click(function(event) {
modal('明人不说暗话！', A);
});
});
function A() {
modal('我喜欢你！', B);
}
function B() {
modal('我知道你在等我这一句话', C);
}
function C() {
modal('请您不要拒绝我', D);
}
function D() {
modal('拒绝我，不存在的', E);
}
function E() {
modal('这辈子都不可能让你离开我', F);
}
function F() {
modal('跟我走吧', G);
}
function G() {
modal('房产证上写你名', H);
}
function H() {
modal('我会做饭', I);
}
function I() {
modal('爱你。么么哒！', J)
}
function J() {
modal('行，我们去民政局登记吧', function() {
fireworks();
});
}
function fireworks() {
$('.page_one').addClass('hide');
$('.page_two').removeClass('hide');
$('.page_two').fireworks({
sound: false,
opacity: 0.9,
width: '100%',
height: '100%'
});
}
function modal(content, callback) {
var tpl = ''+
''+
''+
''+ content +' '+
'确定'+
''+
'';
$('body').append(tpl);
$(document).on('click', '.confirm', function() {
$('.container').remove();
callback();
});
}
var myWords = '有人说，人的一生会遇到2920万人，而两个人相爱的概率只有0.000049。在这茫茫人海中，两个人能相遇就值得感激，能相爱更是一种难得。所以，我很庆幸上天让我遇见了你。我希望有个如你一般的人，能看完我写过的所有状态，读完我所有的日志，看完我从小到大的照片，试着听我喜欢的歌。如果可以，甚至陪我去我喜欢的地方，只想弥补错过你的青春。';
var x = 0;
var speed = 150;
var current = 0;
function typeWrite(){
$('.type_words').html(myWords.substring(0, x++)+'_');
var timer = setTimeout("typeWrite()", speed);
if (x == myWords.length) {
x = myWords.length;
clearTimeout(timer)
}
}
小姐姐，我好喜欢你，你愿意做我女朋友吗？
愿意
不愿意
代码6补充说明： css文件和js文件全部在我的资源里面。 效果6：  所有HTML表白代码都在在我的资源html表白代码（全） 想要的可以下载。
|