css3漂浮动画
2019-06-19 本文已影响0人
干炸里脊不如你
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.nav li{width: 130px;height:150px;position: relative;}
.nav li a{width: 130px;height:150px;display: block;overflow: hidden;background-position: -540px -100px;}
li a i {
background: #000;
border-radius: 2px;
bottom: 26px;
left:20px;
box-shadow: 0 0 2px #ff6a82;
display: none;
height: 5px;
opacity: 0;
overflow: hidden;
position: absolute;
width: 5px;
display:block;
}
.nav li a.hover span,.nav li a.hover em{
animation: moveAni 1s linear infinite alternate;
-webkit-animation: moveAni 1s linear infinite alternate;
-moz-animation: moveAni 1s linear infinite alternate;
-m-animation: moveAni 1s linear infinite alternate;
-o-animation: moveAni 1s linear infinite alternate;
}
.nav li a.hover .i-1{
animation: lightAni1 3s linear infinite;
-webkit-animation: lightAni1 3s linear infinite;
-moz-animation: lightAni1 3s linear infinite;
-m-animation: lightAni1 3s linear infinite;
-o-animation: lightAni1 3s linear infinite;
}
.nav li a.hover .i-2{
animation: lightAni2 3s 1s linear infinite;
-webkit-animation: lightAni2 3s 1s linear infinite;
-moz-animation: lightAni2 3s 1s linear infinite;
-m-animation: lightAni2 3s 1s linear infinite;
-o-animation: lightAni2 3s 1s linear infinite;
}
.nav li a.hover .i-3{
animation: lightAni1 3s 2s linear infinite;
-webkit-animation: lightAni1 3s 2s linear infinite;
-moz-animation: lightAni1 3s 2s linear infinite;
-m-animation: lightAni1 3s 2s linear infinite;
-o-animation: lightAni1 3s 2s linear infinite;
}
.nav li a.hover .i-4{
animation: lightAni1 3s 2.2s linear infinite;
-webkit-animation: lightAni1 3s 2.2s linear infinite;
-moz-animation: lightAni1 3s 2.2s linear infinite;
-m-animation: lightAni1 3s 2.2s linear infinite;
-o-animation: lightAni1 3s 2.2s linear infinite;
}
.nav li a.hover .i-5{
animation: lightAni3 3s 1.5s linear infinite;
-webkit-animation: lightAni3 3s 1.5s linear infinite;
-moz-animation: lightAni3 3s 1.5s linear infinite;
-m-animation: lightAni3 3s 1.5s linear infinite;
-o-animation: lightAni3 3s 1.5s linear infinite;
}
.nav li a.hover .i-6{
animation: lightAni2 3s .5s linear infinite;
-webkit-animation: lightAni2 3s .5s linear infinite;
-moz-animation: lightAni2 3s .5s linear infinite;
-m-animation: lightAni2 3s .5s linear infinite;
-o-animation: lightAni2 3s .5s linear infinite;
}
.nav li a.hover .i-7{
animation: lightAni1 3s .8s linear infinite;
-webkit-animation: lightAni1 3s .8s linear infinite;
-moz-animation: lightAni1 3s .8s linear infinite;
-m-animation: lightAni1 3s .8s linear infinite;
-o-animation: lightAni1 3s .8s linear infinite;
}
@keyframes lightAni1{
0%{
opacity: 0.5;
transform:translateY(0);
}
50%{
opacity: 1;
transform:translateY(-50px);
}
100%{
opacity: 0;
transform:translateY(-100px);
}
}
@-webkit-keyframes lightAni1{
0%{
opacity: 0.5;
-webkit-transform:translateY(0);
}
50%{
opacity: 1;
-webkit-transform:translateY(-50px);
}
100%{
opacity: 0;
-webkit-transform:translateY(-100px);
}
}
@-moz-keyframes lightAni1{
0%{
opacity: 0.5;
-moz-transform:translateY(0);
}
50%{
opacity: 1;
-moz-transform:translateY(-50px);
}
100%{
opacity: 0;
-moz-transform:translateY(-100px);
}
}
@-m-keyframes lightAni1{
0%{
opacity: 0.5;
-m-transform:translateY(0);
}
50%{
opacity: 1;
-m-transform:translateY(-50px);
}
100%{
opacity: 0;
-m-transform:translateY(-100px);
}
}
@-o-keyframes lightAni1{
0%{
opacity: 0.5;
-o-transform:translateY(0);
}
50%{
opacity: 1;
-o-transform:translateY(-50px);
}
100%{
opacity: 0;
-o-transform:translateY(-100px);
}
}
@keyframes lightAni2{
0%{
opacity: 0.5;
transform:translate(0,0);
}
50%{
opacity: 1;
transform:translate(-10px,-50px);
}
100%{
opacity: 0;
transform:translate(-20px,-100px);
}
}
@-webkit-keyframes lightAni2{
0%{
opacity: 0.5;
-webkit-transform:translate(0,0);
}
50%{
opacity: 1;
-webkit-transform:translate(-10px,-50px);
}
100%{
opacity: 0;
-webkit-transform:translate(-20px,-100px);
}
}
@-moz-keyframes lightAni2{
0%{
opacity: 0.5;
-moz-transform:translate(0,0);
}
50%{
opacity: 1;
-moz-transform:translate(-10px,-50px);
}
100%{
opacity: 0;
-moz-transform:translate(-20px,-100px);
}
}
@-m-keyframes lightAni2{
0%{
opacity: 0.5;
-m-transform:translate(0,0);
}
50%{
opacity: 1;
-m-transform:translate(-10px,-50px);
}
100%{
opacity: 0;
-m-transform:translate(-20px,-100px);
}
}
@-o-keyframes lightAni2{
0%{
opacity: 0.5;
-o-transform:translate(0,0);
}
50%{
opacity: 1;
-o-transform:translate(-10px,-50px);
}
100%{
opacity: 0;
-o-transform:translate(-20px,-100px);
}
}
@keyframes lightAni3{
0%{
opacity: 0.5;
transform:translate(0,0);
}
50%{
opacity: 1;
transform:translate(10px,-50px);
}
100%{
opacity: 0;
transform:translate(20px,-100px);
}
}
@-webkit-keyframes lightAni3{
0%{
opacity: 0.5;
-webkit-transform:translate(0,0);
}
50%{
opacity: 1;
-webkit-transform:translate(10px,-50px);
}
100%{
opacity: 0;
-webkit-transform:translate(20px,-100px);
}
}
@-moz-keyframes lightAni3{
0%{
opacity: 0.5;
-moz-transform:translate(0,0);
}
50%{
opacity: 1;
-moz-transform:translate(10px,-50px);
}
100%{
opacity: 0;
-moz-transform:translate(20px,-100px);
}
}
@-m-keyframes lightAni3{
0%{
opacity: 0.5;
-m-transform:translate(0,0);
}
50%{
opacity: 1;
-m-transform:translate(10px,-50px);
}
100%{
opacity: 0;
-m-transform:translate(20px,-100px);
}
}
@-o-keyframes lightAni3{
0%{
opacity: 0.5;
-o-transform:translate(0,0);
}
50%{
opacity: 1;
-o-transform:translate(10px,-50px);
}
100%{
opacity: 0;
-o-transform:translate(20px,-100px);
}
}
@keyframes moveAni{
0%{
transform:translateY(0);
}
100%{
transform:translateY(-10px);
}
}
@-webkit-keyframes moveAni{
0%{
-webkit-transform:translateY(0);
}
100%{
-webkit-transform:translateY(-10px);
}
}
@-moz-keyframes moveAni{
0%{
-moz-transform:translateY(0);
}
100%{
-moz-transform:translateY(-10px);
}
}
@-m-keyframes moveAni{
0%{
-m-transform:translateY(0);
}
100%{
-m-transform:translateY(-10px);
}
}
@-o-keyframes moveAni{
0%{
-o-transform:translateY(0);
}
100%{
-o-transform:translateY(-10px);
}
}
</style>
</head>
<body>
<ul class="nav">
<li class="nav-2">
<a href="#" class="on hover" rel="0">
<span>愿望墙 BLESSING WALL</span>
<em></em>
<i class="i-1"></i>
<i class="i-2"></i>
<i class="i-3"></i>
<i class="i-4"></i>
<i class="i-5"></i>
<i class="i-6"></i>
<i class="i-7"></i>
</a>
</li>
</ul>
</body>
</html>
