div+css实现小刺猬的爱情表白动画效果代码
代码语言：html
所属分类：表白
代码描述：div+css实现小刺猬的爱情表白动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"><head>
<meta charset="UTF-8">
<style>
body {
background: #a9def9;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 0;
overflow: hidden;
}
.grass {
position: absolute;
left: 0;
right: 0;
top: calc(100% - 100px);
bottom: 0;
background: #d0f4de;
}
.hedgehog {
position: absolute;
width: 200px;
height: 100px;
bottom: 100px;
}
.hedgehog-1 {
right: calc(50% + 30px);
}
.hedgehog-2 {
left: calc(50% + 30px);
}
.face {
position: absolute;
width: 100px;
height: 100px;
background: #ffcfb4;
z-index: 10;
}
.hedgehog-1 .face {
top: 10px;
right: 0;
border-radius: 60px 4px;
transform: rotate(64deg);
}
.hedgehog-2 .face {
top: 10px;
left: 0;
border-radius: 4px 60px;
transform: rotate(-61deg);
}
.body {
position: absolute;
top: -18px;
right: 5px;
width: 172px;
height: 131px;
border-radius: 80%;
transition: all 2s ease;
animation: breathe 2s infinite;
}
.hedgehog-1 .body {
background: #0074be;
}
.hedgehog-2 .body {
background: #f48fb1;
}
.nose {
position: absolute;
background: #f9aaa9;
width: 15px;
height: 17px;
border-radius: 40%;
z-index: 50;
}
.hedgehog-1 .nose {
top: 66px;
right: -27px;
}
.hedgehog-2 .nose {
top: 66px;
left: -27px;
}
.eye {
position: absolute;
background: #000;
width: 20px;
height: 20px;
border-radius: 100%;
z-index: 50;
}
.eye:after {
content: "";
position: absolute;
border-radius: 100%;
width: 8px;
height: 8px;
background: #fff;
}
.hedgehog-1 .eye {
top: 52px;
right: 10px;
animation: blink 2s infinite;
}
.hedgehog-1 .eye:after {
top: 3px;
right: 2px;
}
.hedgehog-2 .eye {
top: 52px;
left: 10px;
animation: blink2 2s 1s infinite;
}
.hedgehog-2 .eye:after {
top: 3px;
left: 2px;
}
.smile {
background: #f9aaa9;
width: 21px;
height: 11px;
border-radius: 15px 15px 40px 40px;
position: absolute;
z-index: 50;
}
.hedgehog-1 .smile {
top: 87px;
right: -1px;
transform: rotate(14deg);
}
.hedgehog-2 .smile {
top: 87px;
left: -1px;
transform: rotate(-14deg);
}
.hair {
position: absolute;
width: 90px;
height: 49px;
border-radius: 50%;
z-index: 100;
}
.hedgehog-1 .hair {
border-top: 30px solid #0074be;
transform-origin: left center;
}
.hedgehog-2 .hair {
border-top: 30px solid #f48fb1;
transform-origin: right center;
}
.hedgehog-1 .hair0 {
top: -6px;
right: -29px;
transform: rotate(0deg);
}
.hedgehog-2 .hair0 {
top: -6px;
left: -29px;
transform: rotate(0deg);
}
.hedgehog-1 .hair1 {
top: 9px;
right: -8px;
transform: rotate(-63deg);
}
.hedgehog-2 .hair1 {
top: -4px;
left: -34px;
transform: rotate(49deg);
}
.hedgehog-1 .hair2 {
top: 14px;
right: -1px;
transform: rotate(-100deg);
}
.hedgehog-2 .hair2 {
top: -5px;
left: -18px;
transform: rotate(99deg);
}
.hedgehog-1 .hair3 {
top: 26px;
right: 26px;
transform: rotate(-112deg);
}
.hedgehog-2 .hair3 {
top: -6px;
left: 19px;
transform: rotate(127deg);
}
.hedgehog-1 .hair4 {
top: 50px;
right: 39px;
transform: rotate(-128deg);
}
.hedgehog-2 .hair4 {
top: 30px;
left: 39px;
transform: rotate(157deg);
}
.leg {
position: absolute;
border-radius: 100%;
background: #ffcfb4;
z-index: 100;
}
.leg:after {
content: "";
border-radius: 100%;
border-top: 5px dotted #f9aaa9;
border-right: 5px dotted #f9aaa9;
position: absolute;
background-image: radial-gradient(#f9aaa9, #f9aaa9 49%, transparent 50%);
}
.leg1 {
width: 39px;
height: 28px;
}
.leg1:after {
width: 40px;
height: 16px;
}
.hedgehog-1 .leg1 {
top: 97px;
right: 50px;
}
.hedgehog-1 .leg1:after {
top: 9px;
left: 1px;
}
.hedgehog-2 .leg1 {
top: 97px;
left: 50px;
}
.hedgehog-2 .leg1:after {
top: 9px;
left: -1px;
}
.leg2 {
width: 35px;
height: 28px;
z-index: 40;
}
.leg2:after {
width: 30px;
height: 15px;
}
.hedgehog-1 .leg2 {
top: 88px;
left: 35px;
}
.hedgehog-1 .leg2:after {
top: 9px;
left: 5px;
}
.hedgehog-2 .leg2 {
top: 88px;
right: 35px;
}
.hedgehog-2 .leg2:after {
top: 9px;
left: 0px;
}
.heart {
position: absolute;
width: 100px;
height: 100px;
bottom: 0;
left: calc(50% - 50px);
transform: scale(0.2);
opacity: 0;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #fc2e5a;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
.heart1 {
animation: heart7 7s 2s infinite ease;
}
@-moz-keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@-webkit-keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@-o-keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@-moz-keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@-webkit-keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@-o-keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@-moz-keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@-webkit-keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@-o-keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@-moz-keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@-webkit-keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@-o-keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@-moz-keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@-webkit-keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@-o-keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@-moz-keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@-webkit-keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@-o-keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@-moz-keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@-webkit-keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@-o-keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@-moz-keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@-webkit-keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@-o-keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@-moz-keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@-webkit-keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@-o-keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@-moz-keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
@-webkit-keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
@-o-keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
@keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
.heart2 {
animation: heart6 5s 3s infinite ease;
}
@-moz-keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@-webkit-keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@-o-keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@-moz-keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@-webkit-keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@-o-keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@-moz-keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@-webkit-keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@-o-keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@-moz-keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@-webkit-keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@-o-keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@-moz-keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@-webkit-keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@-o-keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@-moz-keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@-webkit-keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@-o-keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@-moz-keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@-webkit-keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@-o-keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@-moz-keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@-webkit-keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@-o-keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@-moz-keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@-webkit-keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@-o-keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@-moz-keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
@-webkit-keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
@-o-keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
@keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
.heart3 {
animation: heart5 13s 5s infinite ease;
}
@-moz-keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@-webkit-keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@-o-keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@-moz-keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@-webkit-keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@-o-keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@-moz-keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@-webkit-keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@-o-keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@-moz-keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@-webkit-keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@-o-keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@-moz-keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@-webkit-keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@-o-keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@-moz-keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@-webkit-keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@-o-keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@-moz-keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@-webkit-keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@-o-keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@-moz-keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@-webkit-keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@-o-keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@-moz-keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@-webkit-keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@-o-keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@-moz-keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
@-webkit-keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
@-o-keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
@keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
.heart4 {
animation: heart6 9s 5s infinite ease;
}
@-moz-keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@-webkit-keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@-o-keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@-moz-keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@-webkit-keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@-o-keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@-moz-keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@-webkit-keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@-o-keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@-moz-keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@-webkit-keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@-o-keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@-moz-keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@-webkit-keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@-o-keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@-moz-keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@-webkit-keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@-o-keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@-moz-keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@-webkit-keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@-o-keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@-moz-keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@-webkit-keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@-o-keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@-moz-keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@-webkit-keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@-o-keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@-moz-keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
@-webkit-keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
@-o-keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
@keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
.heart5 {
animation: heart8 12s 5s infinite ease;
}
@-moz-keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@-webkit-keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@-o-keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@-moz-keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@-webkit-keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@-o-keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@-moz-keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@-webkit-keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@-o-keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@-moz-keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@-webkit-keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@-o-keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@-moz-keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@-webkit-keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@-o-keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@-moz-keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@-webkit-keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@-o-keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@-moz-keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@-webkit-keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@-o-keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@-moz-keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@-webkit-keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@-o-keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@-moz-keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@-webkit-keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@-o-keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@-moz-keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
@-webkit-keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
@-o-keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
@keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
.heart6 {
animation: heart1 14s 4s infinite ease;
}
@-moz-keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@-webkit-keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@-o-keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@-moz-keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@-webkit-keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@-o-keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@-moz-keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@-webkit-keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@-o-keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@-moz-keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@-webkit-keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@-o-keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@-moz-keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@-webkit-keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@-o-keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@-moz-keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@-webkit-keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@-o-keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@-moz-keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@-webkit-keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@-o-keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@-moz-keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@-webkit-keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@-o-keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@-moz-keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@-webkit-keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@-o-keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@keyframes heart9 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(400px, -1000px);
}
}
@-moz-keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
@-webkit-keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
@-o-keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
@keyframes heart10 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(500px, -1000px);
}
}
.heart7 {
animation: heart6 8s 4s infinite ease;
}
@-moz-keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@-webkit-keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@-o-keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@keyframes heart1 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-500px, -1000px);
}
}
@-moz-keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@-webkit-keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@-o-keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@keyframes heart2 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-300px, -1000px);
}
}
@-moz-keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@-webkit-keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@-o-keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@keyframes heart3 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-200px, -1000px);
}
}
@-moz-keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@-webkit-keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@-o-keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@keyframes heart4 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(-100px, -1000px);
}
}
@-moz-keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@-webkit-keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@-o-keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@keyframes heart5 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(0px, -1000px);
}
}
@-moz-keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@-webkit-keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@-o-keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@keyframes heart6 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(100px, -1000px);
}
}
@-moz-keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@-webkit-keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@-o-keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@keyframes heart7 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(200px, -1000px);
}
}
@-moz-keyframes heart8 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 5;
transform: scale(1) translate(300px, -1000px);
}
}
@-webkit-keyframes heart8 {
0% {
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0