jquery实现打字机式爱情表白场景动画效果代码
代码语言:html
所属分类:表白
代码描述: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