jquery实现打字机式爱情表白场景动画效果代码

代码语言:html

所属分类:表白

代码描述:jquery实现打字机式爱情表白场景动画效果代码,先吐露真情,然后说出我喜欢你。

代码标签: jquery 表白 爱情 打字

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

   
<meta charset="UTF-8">





   
<style>
        html
,body{
         
margin:0px;
         
height:100%;
       
}
       
.bg_heart{
         
position:relative;
         
top:0;
         
left:0;
         
width:100%;
         
height:100%;
         
overflow:hidden;
         
background-image:url("//repo.bfw.wiki/bfwrepo/image/618da05d2c35e.png");
         
background-size:100% 100%;
         
z-index:-1;
       
}
       
       
.container{
         
position:absolute;
         
top:0;
         
left:0;
         
height:100%;
         
width:100%;
         
text-align:center;
         
color:white;
         
font-family:cursive;
       
}
       
       
       
.heart{
         
position:absolute;
         
top:-50%;
         
transform:rotate(-45deg);
         
-webkit-transform:rotate(-45deg);
         
-moz-transform:rotate(-45deg);
         
-m-transform:rotate(-45deg);
       
}
       
.heart:before{
         
position:absolute;
         
top:-50%;
         
left:0;
         
display:block;
         
content:"";
         
width:100%;
         
height:100%;
         
background:inherit;
         
border-radius:100%;
       
}
       
.heart:after{
         
position:absolute;
         
top:0;
         
right:-50%;
         
display:block;
         
content:"";
         
width:100%;
         
height:100%;
         
background:inherit;
         
border-radius:100%;
       
}
       
       
@keyframes love {
         
0%{top:110%}
       
}
       
@-webkit-keyframes love {
         
0%{top:110%}
       
}
       
@-moz-keyframes love {
         
0%{top:110%}
       
}
       
@-ms-keyframes love {
         
0%{top:110%}
       
}
   
</style>



</head>

<body>
   
<html>

   
<head>
       
<title>love you</title>
   
</head>

.........完整代码请登录后点击上方下载按钮下载查看

网友评论0