WEB 特效爱心表白-有网页源码

小编春风 2019年11月3日12:55:12 4 34

小编今天分享份特效爱心表白网页源码给大家。相信大家应该是不缺表白方式的,但不管如何,其实归根结底就是想给所爱的人一个难以忘记的表白。

WEB 特效爱心表白-有网页源码

特效爱心表白网页源码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>520</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
*{margin: 0; padding: 0;}
ul,ol{list-style: none;}
a{text-decoration: none;color: inherit;}
.clearfix:after{content: '';display: block;clear: both;}
.clear{clear: both;}
	
body{
background-color: #8a0a0a;
}
.love{
display: table;
flex-wrap: wrap;
margin: 100px auto;
}
.box{
float:left;
width: 25px;
height: 25px;
border-radius: 2px;
margin-right: 2px;
margin-bottom: 2px
}
.box:hover{
background: #8a0a0a;
}
.box:not(.transparent){
background-color: #fff;
opacity: 0;
transform: translateY(-300px);
animation: move 4s infinite;
}
@keyframes move{
25%{
opacity: 1;
transform: translateY(0);
}
50%{
opacity: 1;
transform: translateY(0);
}
65%{
opacity: 1;
transform: translateY(0);
}
100%{
opacity: 0;
transform: translateY(300px);
}
}
.box.delay1{
animation-delay: .1s;
}
.box.delay2{
animation-delay: .2s;
}
.box.delay3{
animation-delay: .4s;
}
.box.delay4{
animation-delay: .5s;
}
.box.delay5{
animation-delay: .7s;
}
.box.delay6{
animation-delay: .9s;
}
p{
width: 1000px;
margin: 200px auto 0;
color: #fff;
font-size: 40px;
text-align: center;
}
</style>
</head>
	
<body>

<div class="love">
<div class="box transparent"></div>
<div class="box white delay6"></div>
<div class="box white delay2"></div>
<div class="box transparent"></div>
<div class="box transparent"></div>
<div class="box transparent"></div>
<div class="box white delay4"></div>
<div class="box white delay3"></div>
<div class="box transparent"></div>
<div class="box clear white delay5"></div>
<div class="box white delay5"></div>
<div class="box white delay6"></div>
<div class="box white delay3"></div>
<div class="box transparent"></div>
<div class="box white delay6"></div>
<div class="box white delay1"></div>
<div class="box white delay4"></div>
<div class="box white delay2"></div>
<div class="box clear white"></div>
<div class="box white delay1"></div>
<div class="box white delay4"></div>
<div class="box white delay2"></div>
<div class="box white delay6"></div>
<div class="box whitedelay3"></div>
<div class="box white delay6"></div>
<div class="box white delay3"></div>
<div class="box white delay1"></div>
<div class="box clear white"></div>
<div class="box white delay3"></div>
<div class="box white delay1"></div>
<div class="box white delay1"></div>
<div class="box white delay6"></div>
<div class="box white delay3"></div>
<div class="box white delay5"></div>
<div class="box white delay2"></div>
<div class="box white delay4"></div>
<div class="box clear transparent"></div>
<div class="box white delay6"></div>
<div class="box white delay1"></div>
<div class="box white delay5"></div>
<div class="box white delay1"></div>
<div class="box white delay5"></div>
<div class="box white delay3"></div>
<div class="box white delay4"></div>
<div class="box transparent"></div>
<div class="box clear transparent"></div>
<div class="box transparent"></div>
<div class="box white delay5"></div>
<div class="box white delay1"></div>
<div class="box white delay5"></div>
<div class="box white delay2"></div>
<div class="box white"></div>
<div class="box transparent"></div>
<div class="box transparent"></div>
<div class="box clear transparent"></div>
<div class="box transparent"></div>
<div class="box transparent"></div>
<div class="box white"></div>
<div class="box white"></div>
<div class="box white delay2"></div>
<div class="box transparent"></div>
<div class="box transparent"></div>
<div class="box transparent"></div>

<div class="box clear transparent"></div>
<div class="box transparent"></div>
<div class="box transparent"></div>
<div class="box transparent"></div>
<div class="box white delay1"></div>
<div class="box transparent"></div>
<div class="box transparent"></div>
<div class="box transparent"></div>
<div class="box transparent"></div>
</div>
<p>代码流动,爱情悸动,虽然我不善言辞,<br />请让我用我的方式说:我爱你!</p>
	
</body>

</html>
weinxin
我的微信
这是我的微信扫一扫
小编春风

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:4   其中:访客  2   博主  2

    • 懿古今 懿古今 5

      玩玩还行,关键还是现实的互动和表白,不过对方是程序媛的话确实不错

      • 夏日博客 夏日博客 1

        代码式的表白方式。哈哈。

          • 弥雅 弥雅 博主

            @夏日博客 这是春风小编不知道从哪里倒腾来的,蛮有意思的!