<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="head pr">
<a href="" target="_blank">
<img src="images/banner_01.jpg" alt="">
<i class="hoverlight"></i>
<i class="hoverlight1"></i>
</a>
</div>
<style>.pr{ position: relative}
.banner{ background: #170f1c; overflow: hidden}
.banner img{ width: 100%}
.banner ul{ position: absolute; right:50%; top:50%; margin-right: -32%; margin-top:10%; width:30%; color: #fff; text-align: center }
.banner ul li{ width: 20%; display: inline-block; margin-right: 3%; line-height: 30px; font-size: 18px}
.banner ul li:nth-child(1) img{ animation:rollIn 1s; -webkit-animation: rollIn 1s }
.banner ul li:nth-child(2) img{ animation:rollIn 2s; -webkit-animation: rollIn 1.4s }
.banner ul li:nth-child(3) img{ animation:rollIn 3s; -webkit-animation: rollIn 1.8s }
.banner ul li:nth-child(4) img{ animation:rollIn 3s; -webkit-animation: rollIn 2.2s }
.hoverlight {
cursor: pointer;
position: absolute;
left: 0px;
bottom: -10%;
width: 20%;
height: 200%;
background-image: linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
background-image: -o-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
background-image: -ms-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
animation: light_move 5s 2s infinite linear;
-webkit-animation: light_move 4.5s 2s infinite linear;
transform-origin:0 bottom;
-webkit-transform-origin:0 bottom;
}.hoverlight1 {
cursor: pointer;
position: absolute;
left: 90%;
bottom: -30%;
width: 10%;
height: 200%;
background-image: linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
background-image: -o-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
background-image: -ms-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
animation: light_move1 5s 4s infinite linear;
-webkit-animation: light_move1 4.5s 2s infinite linear;
transform-origin:0 bottom;
-webkit-transform-origin:0 bottom;
}
@keyframes bounce{0%,20%,53%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-5px,0)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,-4px,0)}}
@keyframes rollIn{0%{opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}to{opacity:1;transform:none}}.rollIn{animation-name:rollIn}@keyframes rollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0) rotate(-120deg)}}
@keyframes rotate{
0%{ -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);transform: rotate(0deg);}
50%{ -webkit-transform: rotate(360deg);-moz-transform: rotate(90deg);transform: rotate(360deg);}
100%{ -webkit-transform: rotate(0deg);-moz-transform: rotate(90deg);transform: rotate(0deg);}
}
@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}.move{
-webkit-animation: movement 3s linear normal both infinite;
-o-animation: movement 3s linear normal both infinite;
animation: movement 3s linear normal both infinite;
}
.move1{
-webkit-animation: movement1 3s linear normal both infinite;
-o-animation: movement1 3s linear normal both infinite;
animation: movement1 3s linear normal both infinite;
}
.move2{
-webkit-animation: movement2 3s linear normal both infinite;
-o-animation: movement2 3s linear normal both infinite;
animation: movement2 3s linear normal both infinite;
}
.move3{
-webkit-animation: movement3 3s linear normal both infinite;
-o-animation: movement3 3s linear normal both infinite;
animation: movement3 3s linear normal both infinite;
}@keyframes movement {
0% { -webkit-transform: translate(0px,-3px); transform: translate(0px,-3px); }
25% { -webkit-transform: translate(3px,6px); transform: translate(3px,6px); }
50% { -webkit-transform: translate(6px,10px); transform: translate(6px,10px); }
75% { -webkit-transform: translate(8px,0px); transform: translate(8px,0px); }
100% { -webkit-transform: translate(0px,-3px); transform: translate(0px,-3px); }
}
@-webkit-keyframes movement {
0% { -webkit-transform: translate(0px,-3px); transform: translate(0px,-3px); }
25% { -webkit-transform: translate(3px,6px); transform: translate(3px,6px); }
50% { -webkit-transform: translate(6px,10px); transform: translate(6px,10px); }
75% { -webkit-transform: translate(8px,0px); transform: translate(8px,0px); }
100% { -webkit-transform: translate(0px,-3px); transform: translate(0px,-3px); }
}
@keyframes movement1 {
0% { -webkit-transform: translate(6px,-3px); transform: translate(6px,-3px); }
25% { -webkit-transform: translate(3px,6px); transform: translate(3px,6px); }
50% { -webkit-transform: translate(-6px,-10px); transform: translate(-6px,-10px); }
75% { -webkit-transform: translate(8px,0px); transform: translate(8px,0px); }
100% { -webkit-transform: translate(6px,-3px); transform: translate(6px,-3px); }
}
@-webkit-keyframes movement1 {
0% { -webkit-transform: translate(6px,-3px); transform: translate(6px,-3px); }
25% { -webkit-transform: translate(3px,6px); transform: translate(3px,6px); }
50% { -webkit-transform: translate(-6px,-10px); transform: translate(-6px,-10px); }
75% { -webkit-transform: translate(8px,0px); transform: translate(8px,0px); }
100% { -webkit-transform: translate(6px,-3px); transform: translate(6px,-3px); }
}
@keyframes movement2 {
0% { -webkit-transform: translate(10px,3px); transform: translate(10px,3px); }
25% { -webkit-transform: translate(3px,6px); transform: translate(3px,6px); }
50% { -webkit-transform: translate(6px,-3px); transform: translate(6px,-3px); }
75% { -webkit-transform: translate(-8px,0px); transform: translate(-8px,0px); }
100% { -webkit-transform: translate(10px,3px); transform: translate(10px,3px); }
}
@-webkit-keyframes movement2 {
0% { -webkit-transform: translate(10px,3px); transform: translate(10px,3px); }
25% { -webkit-transform: translate(3px,6px); transform: translate(3px,6px); }
50% { -webkit-transform: translate(6px,-3px); transform: translate(6px,-3px); }
75% { -webkit-transform: translate(-8px,0px); transform: translate(-8px,0px); }
100% { -webkit-transform: translate(10px,3px); transform: translate(10px,3px); }
}@keyframes movement3 {
0% { -webkit-transform: translate(-10px,3px); transform: translate(-10px,3px); }
25% { -webkit-transform: translate(-4px,6px); transform: translate(-4px,6px); }
50% { -webkit-transform: translate(2px,8px); transform: translate(2px,8px); }
75% { -webkit-transform: translate(-8px,0px); transform: translate(-8px,0px); }
100% { -webkit-transform: translate(-10px,3px); transform: translate(-10px,3px); }
}
@-webkit-keyframes movement3 {
0% { -webkit-transform: translate(-10px,3px); transform: translate(-10px,3px); }
25% { -webkit-transform: translate(-4px,6px); transform: translate(-4px,6px); }
50% { -webkit-transform: translate(2px,8px); transform: translate(2px,8px); }
75% { -webkit-transform: translate(-8px,0px); transform: translate(-8px,0px); }
100% { -webkit-transform: translate(-10px,3px); transform: translate(-10px,3px); }
}
@keyframes light_move {
0% {transform:rotate(0deg); opacity: 0}
30%{transform:rotate(40deg); opacity: 1}
75%{transform:rotate(90deg);}
100%{transform:rotate(0deg);}
}@-webkit-keyframes light_move {
0% {-webkit-transform:rotate(0deg);opacity: 0}
30%{-webkit-transform:rotate(40deg);opacity: 1}
75%{-webkit-transform:rotate(90deg);}
100%{-webkit-transform:rotate(0deg);}
}@keyframes light_move1 {
0% {transform:rotate(0deg);opacity: 0}
30%{transform:rotate(-40deg);opacity: 1}
75%{transform:rotate(-90deg);}
100%{transform:rotate(0deg);}
}@-webkit-keyframes light_move1 {
0% {-webkit-transform:rotate(0deg);opacity: 0}
30%{-webkit-transform:rotate(-40deg);opacity: 1}
75%{-webkit-transform:rotate(-90deg);}
100%{-webkit-transform:rotate(0deg);}
}
</style>
</body>
</html>
