科猫网

  1. 科猫网首页
  2. 好文分享

html满屏飘爱心代码如何做（一篇文章教你如何制作表白爱心特效）

• 好文分享
如今为了追到女朋友，众位男士也是掏空心思，绞尽脑汁想各种表白的新招式，务必给女神一个难以忘记的表白。程序员当然也不例外。既然学的是编程，那就要好好利用编程做一个与众不同的表白，那最适合的编程语言就是前端了，能够轻而易举的就做出各种让女孩心动的代码特效。 更多特效源码，编程资料，私信我1即可免费领取。 首先特效镇文：
html满屏飘爱心代码如何做（一篇文章教你如何制作表白爱心特效）

今天我们讲的就是如何用代码做出一个爱心表白特效。源码如下：

<!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;

}

neWS.KEMaOWaNG.oRg.cN

.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;

}

neWS.KEMaOWaNG.oRg.cN

.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>

neWS.KEMaOWaNG.oRg.cN

</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>

neWS.KEMaOWaNG.oRg.cN

<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>

neWS.KEMaOWaNG.oRg.cN

<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>我爱代码，也爱你，虽然我不善言辞，请让我用我的方式说：我爱你！</p>

</body>

</html>

html满屏飘爱心代码如何做（一篇文章教你如何制作表白爱心特效）

猜你喜欢