html5卡片平行视差效果,HTML5/jQuery很棒的交互式平行视差皓月当空场景动画
CSS
语言：
CSSSCSS
确定
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
font-family: 'Open Sans', sans-serif;
background-color: #02080f;
}
.stars-wrapper {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: -webkit-radial-gradient(center ellipse, #061a33 0%, #000000 100%);
background: radial-gradient(ellipse at center, #061a33 0%, #000000 100%);
background-size: 110%;
background-position: 100% 100%;
overflow: hidden;
}
.title-wrapper {
left: 0;
top: 0;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
.title-wrapper .title {
width: 31vw;
position: absolute;
text-align: justify;
top: 34.2vh;
left: 45vw;
right: 15%;
font-size: 5vw;
line-height: 1.3;
font-weight: normal;
margin: 0;
color: #fff;
color: #030f1d;
opacity: .8;
text-transform: uppercase;
letter-spacing: .1em;
}
.title-wrapper .title:after {
content: attr(data-title);
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(325deg, #fcf9ef 0%, rgba(252, 249, 239, 0.7) 30%, rgba(252, 249, 239, 0.01) 100%);
background: linear-gradient(125deg, #fcf9ef 0%, rgba(252, 249, 239, 0.7) 30%, rgba(252, 249, 239, 0.01) 100%);
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 100%;
-webkit-background-clip: text;
overflow: hidden;
color: transparent;
}
.moon-wrapper {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
.moon {
width: 14vw;
height: 14vw;
position: absolute;
top: 33vh;
left: 24vw;
border-radius: 50%;
background: #e7e1df url(/uploads/161201/moon.png) 50% 50% no-repeat;
background-size: 102%;
box-shadow: 0px 0px 80px 0px rgba(183, 176, 130, 0.6), 0px 0px 350px 0px rgba(222, 221, 215, 0.3);
}
.moon:after {
content: "";
display: block;
position: absolute;
left: 5%;
top: 5%;
width: 90%;
height: 90%;
border-radius: 50%;
background-color: transparent;
box-shadow: 0px 0px 150px 0px rgba(183, 176, 130, 0.1), 0px 0px 340px 0px rgba(222, 221, 215, 0.1);
-webkit-filter: blur(10px);
filter: blur(10px);
}
.stars-cluster {
position: absolute;
left: 3%;
right: 3%;
top: 3%;
bottom: 3%;
}
.stars-cluster.stars-cluster-1 {
left: 20%;
right: 25%;
top: 20%;
bottom: 40%;
}
.stars-cluster.stars-cluster-1 .star-7,
.stars-cluster.stars-cluster-1 .star-22,
.stars-cluster.stars-cluster-1 .star-30 {
-webkit-animation: shooting-star 10s ease-out 1s forwards;
animation: shooting-star 10s ease-out 1s forwards;
}
.stars-cluster.stars-cluster-1 .star-22 {
-webkit-animation-delay: 4s;
animation-delay: 4s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.stars-cluster.stars-cluster-1 .star-30 {
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
.stars-cluster.stars-cluster-1 .star-20 {
-webkit-animation: shooting-star-2 8s ease-out 5s forwards infinite;
animation: shooting-star-2 8s ease-out 5s forwards infinite;
}
.stars-cluster.stars-cluster-2 .star-11,
.stars-cluster.stars-cluster-2 .star-16 {
-webkit-animation: shooting-star 10s ease-out 8s forwards;
animation: shooting-star 10s ease-out 8s forwards;
}
.stars-cluster.stars-cluster-2 .star-16 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.stars-cluster.stars-cluster-2 .star-7 {
-webkit-animation-delay: 9s;
animation-delay: 9s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.stars-cluster.stars-cluster-2 .star-4 {
-webkit-animation: shooting-star-2 11s ease-out 6s forwards infinite;
animation: shooting-star-2 11s ease-out 6s forwards infinite;
}
.star {
background-color: #f3f2d6;
border-radius: 50%;
position: absolute;
-webkit-animation-name: pulsate;
animation-name: pulsate;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate-reverse;
animation-direction: alternate-reverse;
}
.stars-cluster-1 .star-1 {
width: 2px;
height: 2px;
opacity: 0.72099828;
top: 29.95989576%;
left: 65.29121015%;
-webkit-animation-duration: 0.52411392s;
animation-duration: 0.52411392s;
-webkit-animation-delay: 0.94955835s;
animation-delay: 0.94955835s;
}
.stars-cluster-1 .star-2 {
width: 2px;
height: 2px;
opacity: 0.79505637;
top: 98.05038108%;
left: 14.40965626%;
-webkit-animation-duration: 0.58351631s;
animation-duration: 0.58351631s;
-webkit-animation-delay: 0.9806508s;
animation-delay: 0.9806508s;
}
.stars-cluster-1 .star-3 {
width: 2px;
height: 2px;
opacity: 0.77856783;
top: 34.3142553%;
left: 16.40910017%;
-webkit-animation-duration: 0.41953463s;
animation-duration: 0.41953463s;
-webkit-animation-delay: 0.72627512s;
animation-delay: 0.72627512s;
}
.stars-cluster-1 .star-4 {
width: 2px;
height: 2px;
opacity: 0.25423953;
top: 0.29304102%;
left: 51.38101119%;
-webkit-animation-duration: 2.09697217s;
animation-duration: 2.09697217s;
-webkit-animation-delay: 0.9056403s;
animation-delay: 0.9056403s;
}
.stars-cluster-1 .star-5 {
width: 2px;
height: 2px;
opacity: 0.76435249;
top: 11.74195614%;
left: 83.59505306%;
-webkit-animation-duration: 2.16146951s;
animation-duration: 2.16146951s;
-webkit-animation-delay: 0.70791301s;
animation-delay: 0.70791301s;
}
.stars-cluster-1 .star-6 {
width: 1px;
height: 1px;
opacity: 0.48265369;
top: 86.04648353%;
left: 46.75517415%;
-webkit-animation-duration: 1.59022748s;
animation-duration: 1.59022748s;
-webkit-animation-delay: 0.9697649s;
animation-delay: 0.9697649s;
}
.stars-cluster-1 .star-7 {
width: 2px;
height: 2px;
opacity: 0.51754694;
top: 57.76966347%;
left: 66.39238521%;
-webkit-animation-duration: 0.41617273s;
animation-duration: 0.41617273s;
-webkit-animation-delay: 0.26474514s;
animation-delay: 0.26474514s;
}
.stars-cluster-1 .star-8 {
width: 1px;
height: 1px;
opacity: 0.31662437;
top: 37.15999033%;
left: 9.53239619%;
-webkit-animation-duration: 0.9777221s;
animation-duration: 0.9777221s;
-webkit-animation-delay: 0.9121044s;
animation-delay: 0.9121044s;
}
.stars-cluster-1 .star-9 {
width: 1px;
height: 1px;
opacity: 0.36969777;
top: 94.60265879%;
left: 43.18863%;
-webkit-animation-duration: 1.71822847s;
animation-duration: 1.71822847s;
-webkit-animation-delay: 0.99851638s;
animation-delay: 0.99851638s;
}
.stars-cluster-1 .star-10 {
width: 2px;
height: 2px;
opacity: 0.45492268;
top: 10.54596317%;
left: 79.13248721%;
-webkit-animation-duration: 1.0353066s;
animation-duration: 1.0353066s;
-webkit-animation-delay: 0.75883656s;
animation-delay: 0.75883656s;
}
.stars-cluster-1 .star-11 {
width: 2px;
height: 2px;
opacity: 0.33776435;
top: 7.22813855%;
left: 43.43668073%;
-webkit-animation-duration: 2.21873091s;
animation-duration: 2.21873091s;
-webkit-animation-delay: 0.73921856s;
animation-delay: 0.73921856s;
}
.stars-cluster-1 .star-12 {
width: 2px;
height: 2px;
opacity: 0.65192474;
top: 58.88883923%;
left: 66.18798049%;
-webkit-animation-duration: 2.39472329s;
animation-duration: 2.39472329s;
-webkit-animation-delay: 0.29184886s;
animation-delay: 0.29184886s;
}
.stars-cluster-1 .star-13 {
width: 3px;
height: 3px;
opacity: 0.21738612;
top: 90.40888632%;
left: 94.39967251%;
-webkit-animation-duration: 1.58244196s;
animation-duration: 1.58244196s;
-webkit-animation-delay: 0.09631276s;
animation-delay: 0.09631276s;
}
.stars-cluster-1 .star-14 {
width: 1px;
height: 1px;
opacity: 0.3515215;
top: 30.37933782%;
left: 87.89074223%;
-webkit-animation-duration: 0.74080547s;
animation-duration: 0.74080547s;
-webkit-animation-delay: 0.96489527s;
animation-delay: 0.96489527s;
}
.stars-cluster-1 .star-15 {
width: 2px;
height: 2px;
opacity: 0.28844278;
top: 55.48196817%;
left: 22.78388238%;
-webkit-animation-duration: 0.80787716s;
animation-duration: 0.80787716s;
-webkit-animation-delay: 0.335251s;
animation-delay: 0.335251s;
}
.stars-cluster-1 .star-16 {
width: 1px;
height: 1px;
opacity: 0.66775909;
top: 90.50486365%;
left: 99.80587426%;
-webkit-animation-duration: 2.07410384s;
animation-duration: 2.07410384s;
-webkit-animation-delay: 0.92277637s;
animation-delay: 0.92277637s;
}
.stars-cluster-1 .star-17 {
width: 1px;
height: 1px;
opacity: 0.4452725;
top: 69.59604579%;
left: 56.08090437%;
-webkit-animation-duration: 1.06249009s;
animation-duration: 1.06249009s;
-webkit-animation-delay: 0.05692791s;
animation-delay: 0.05692791s;
}
.stars-cluster-1 .star-18 {
width: 2px;
height: 2px;
opacity: 0.3639188;
top: 87.87287683%;
left: 39.7769863%;
-webkit-animation-duration: 1.05921577s;
animation-duration: 1.05921577s;
-webkit-animation-delay: 0.45612393s;
animation-delay: 0.45612393s;
}
.stars-cluster-1 .star-19 {
width: 2px;
height: 2px;
opacity: 0.24006028;
top: 3.18245804%;
left: 52.98761872%;
-webkit-animation-duration: 1.73431143s;
animation-duration: 1.73431143s;
-webkit-animation-delay: 0.10544216s;
animation-delay: 0.10544216s;
}
.stars-cluster-1 .star-20 {
width: 3px;
height: 3px;
opacity: 0.54282923;
top: 41.65320599%;
left: 54.57955245%;
-webkit-animation-duration: 1.01783763s;
animation-duration: 1.01783763s;
-webkit-animation-delay: 0.64551156s;
animation-delay: 0.64551156s;
}
.stars-cluster-1 .star-21 {
width: 2px;
height: 2px;
opacity: 0.33621752;
top: 35.55274068%;
left: 57.26360565%;
-webkit-animation-duration: 1.32848072s;
animation-duration: 1.32848072s;
-webkit-animation-delay: 0.80098035s;
animation-delay: 0.80098035s;
}
.stars-cluster-1 .star-22 {
width: 3px;
height: 3px;
opacity: 0.41040664;
top: 88.7307646%;
left: 11.83346529%;
-webkit-animation-duration: 0.47695233s;
animation-duration: 0.47695233s;
-webkit-animation-delay: 0.11151021s;
animation-delay: 0.11151021s;
}
.stars-cluster-1 .star-23 {
width: 2px;
height: 2px;
opacity: 0.67292027;
top: 5.11488076%;
left: 48.88335094%;
-webkit-animation-duration: 0.77871806s;
animation-duration: 0.77871806s;
-webkit-animation-delay: 0.36446494s;
animation-delay: 0.36446494s;
}
.stars-cluster-1 .star-24 {
width: 1px;
height: 1px;
opacity: 0.72821791;
top: 35.78953764%;
left: 55.4262721%;
-webkit-animation-duration: 1.50367332s;
animation-duration: 1.50367332s;
-webkit-animation-delay: 0.62211057s;
animation-delay: 0.62211057s;
}
.stars-cluster-1 .star-25 {
width: 3px;
height: 3px;
opacity: 0.64095206;
top: 52.17554877%;
left: 52.89422618%;
-webkit-animation-duration: 0.59698207s;
animation-duration: 0.59698207s;
-webkit-animation-delay: 0.84015558s;
animation-delay: 0.84015558s;
}
.stars-cluster-1 .star-26 {
width: 3px;
height: 3px;
opacity: 0.59843546;
top: 6.88046622%;
left: 5.3421576%;
-webkit-animation-duration: 0.67183452s;
animation-duration: 0.67183452s;
-webkit-animation-delay: 0.28985589s;
animation-delay: 0.28985589s;
}
.stars-cluster-1 .star-27 {
width: 2px;
height: 2px;
opacity: 0.74967089;
top: 86.62546764%;
left: 19.61580694%;
-webkit-animation-duration: 1.9108722s;
animation-duration: 1.9108722s;
-webkit-animation-delay: 0.47954545s;
animation-delay: 0.47954545s;
}
.stars-cluster-1 .star-28 {
width: 3px;
height: 3px;
opacity: 0.64263943;
top: 79.40750744%;
left: 10.04642127%;
-webkit-animation-duration: 1.41944797s;
animation-duration: 1.41944797s;
-webkit-animation-delay: 0.35998955s;
animation-delay: 0.35998955s;
}
.stars-cluster-1 .star-29 {
width: 2px;
height: 2px;
opacity: 0.5789501;
top: 85.40343952%;
left: 43.03662421%;
-webkit-animation-duration: 1.57507757s;
animation-duration: 1.57507757s;
-webkit-animation-delay: 0.31424896s;
animation-delay: 0.31424896s;
}
.stars-cluster-1 .star-30 {
width: 2px;
height: 2px;
opacity: 0.55103182;
top: 52.63830428%;
left: 55.25212344%;
-webkit-animation-duration: 1.00166448s;
animation-duration: 1.00166448s;
-webkit-animation-delay: 0.49810404s;
animation-delay: 0.49810404s;
}
.stars-cluster-1 .star-31 {
width: 2px;
height: 2px;
opacity: 0.65187603;
top: 40.65684453%;
left: 89.71395099%;
-webkit-animation-duration: 0.90825027s;
animation-duration: 0.90825027s;
-webkit-animation-delay: 0.04467909s;
animation-delay: 0.04467909s;
}
.stars-cluster-1 .star-32 {
width: 2px;
height: 2px;
opacity: 0.61456379;
top: 67.67045893%;
left: 69.40688121%;
-webkit-animation-duration: 1.54681715s;
animation-duration: 1.54681715s;
-webkit-animation-delay: 0.77860141s;
animation-delay: 0.77860141s;
}
.stars-cluster-1 .star-33 {
width: 1px;
height: 1px;
opacity: 0.71771648;
top: 59.52628325%;
left: 75.28990388%;
-webkit-animation-duration: 1.8486244s;
animation-duration: 1.8486244s;
-webkit-animation-delay: 0.80528525s;
animation-delay: 0.80528525s;
}
.stars-cluster-1 .star-34 {
width: 2px;
height: 2px;
opacity: 0.58502819;
top: 28.33541639%;
left: 64.22932767%;
-webkit-animation-duration: 1.92579004s;
animation-duration: 1.92579004s;
-webkit-animation-delay: 0.50641435s;
animation-delay: 0.50641435s;
}
.stars-cluster-1 .star-35 {
width: 1px;
height: 1px;
opacity: 0.5683257;
top: 93.20040063%;
left: 72.737872%;
-webkit-animation-duration: 1.31296303s;
animation-duration: 1.31296303s;
-webkit-animation-delay: 0.06222108s;
animation-delay: 0.06222108s;
}
.stars-cluster-1 .star-36 {
width: 3px;
height: 3px;
opacity: 0.2050349;
top: 35.08438428%;
left: 70.36254634%;
-webkit-animation-duration: 2.31314153s;
animation-duration: 2.31314153s;
-webkit-animation-delay: 0.93764515s;
animation-delay: 0.93764515s;
}
.stars-cluster-1 .star-37 {
width: 2px;
height: 2px;
opacity: 0.74189211;
top: 54.83028376%;
left: 38.07873598%;
-webkit-animation-duration: 2.02548211s;
animation-duration: 2.02548211s;
-webkit-animation-delay: 0.79344162s;
animation-delay: 0.79344162s;
}
.stars-cluster-1 .star-38 {
width: 2px;
height: 2px;
opacity: 0.43003294;
top: 67.0696008%;
left: 75.17042283%;
-webkit-animation-duration: 1.69703087s;
animation-duration: 1.69703087s;
-webkit-animation-delay: 0.6536478s;
animation-delay: 0.6536478s;
}
.stars-cluster-1 .star-39 {
width: 2px;
height: 2px;
opacity: 0.251623;
top: 67.03819265%;
left: 74.378742%;
-webkit-animation-duration: 1.05650857s;
animation-duration: 1.05650857s;
-webkit-animation-delay: 0.80697731s;
animation-delay: 0.80697731s;
}
.stars-cluster-1 .star-40 {
width: 2px;
height: 2px;
opacity: 0.23231438;
top: 96.05290564%;
left: 4.15322843%;
-webkit-animation-duration: 2.15563773s;
animation-duration: 2.15563773s;
-webkit-animation-delay: 0.3007552s;
animation-delay: 0.3007552s;
}
.stars-cluster-2 .star-1 {
width: 2px;
height: 2px;
opacity: 0.49367286;
top: 78.79713373%;
left: 29.25707451%;
-webkit-animation-duration: 1.70062796s;
animation-duration: 1.70062796s;
-webkit-animation-delay: 0.49654356s;
animation-delay: 0.49654356s;
}
.stars-cluster-2 .star-2 {
width: 3px;
height: 3px;
opacity: 0.54159974;
top: 40.90454299%;
left: 99.12248962%;
-webkit-animation-duration: 2.06251648s;
animation-duration: 2.06251648s;
-webkit-animation-delay: 0.0375472s;
animation-delay: 0.0375472s;
}
.stars-cluster-2 .star-3 {
width: 2px;
height: 2px;
opacity: 0.6870244;
top: 50.20717424%;
left: 51.90587619%;
-webkit-animation-duration: 1.23026944s;
animation-duration: 1.23026944s;
-webkit-animation-delay: 0.73998838s;
animation-delay: 0.73998838s;
}
.stars-cluster-2 .star-4 {
width: 3px;
height: 3px;
opacity: 0.62659536;
top: 59.99385479%;
left: 0.65461758%;
-webkit-animation-duration: 0.71081299s;
animation-duration: 0.71081299s;
-webkit-animation-delay: 0.77722246s;
animation-delay: 0.77722246s;
}
.stars-cluster-2 .star-5 {
width: 4px;
height: 4px;
opacity: 0.52014122;
top: 32.32348391%;
left: 24.8579104%;
-webkit-animation-duration: 2.10369977s;
animation-duration: 2.10369977s;
-webkit-animation-delay: 0.00941635s;
animation-delay: 0.00941635s;
}
.stars-cluster-2 .star-6 {
width: 3px;
height: 3px;
opacity: 0.275104;
top: 56.48763657%;
left: 96.66075804%;
-webkit-animation-duration: 0.71180857s;
animation-duration: 0.71180857s;
-webkit-animation-delay: 0.8036809s;
animation-delay: 0.8036809s;
}
.stars-cluster-2 .star-7 {
width: 2px;
height: 2px;
opacity: 0.67439522;
top: 60.0361848%;
left: 99.93838076%;
-webkit-animation-duration: 0.69830506s;
animation-duration: 0.69830506s;
-webkit-animation-delay: 0.08475777s;
animation-delay: 0.08475777s;
}
.stars-cluster-2 .star-8 {
width: 2px;
height: 2px;
opacity: 0.54250316;
top: 32.77277509%;
left: 37.26224869%;
-webkit-animation-duration: 1.88800253s;
animation-duration: 1.88800253s;
-webkit-animation-delay: 0.86997839s;
animation-delay: 0.86997839s;
}
.stars-cluster-2 .star-9 {
width: 4px;
height: 4px;
opacity: 0.6608232;
top: 73.4124199%;
left: 37.20687246%;
-webkit-animation-duration: 2.17864173s;
animation-duration: 2.17864173s;
-webkit-animation-delay: 0.83524105s;
animation-delay: 0.83524105s;
}
.stars-cluster-2 .star-10 {
width: 4px;
height: 4px;
opacity: 0.55444787;
top: 37.42282826%;
left: 79.08954469%;
-webkit-animation-duration: 1.71050812s;
animation-duration: 1.71050812s;
-webkit-animation-delay: 0.06825139s;
animation-delay: 0.06825139s;
}
.stars-cluster-2 .star-11 {
width: 2px;
height: 2px;
opacity: 0.29012401;
top: 89.45827228%;
left: 54.93955014%;
-webkit-animation-duration: 1.63457534s;
animation-duration: 1.63457534s;
-webkit-animation-delay: 0.21745025s;
animation-delay: 0.21745025s;
}
.stars-cluster-2 .star-12 {
width: 3px;
height: 3px;
opacity: 0.54059601;
top: 52.97489509%;
left: 30.71310753%;
-webkit-animation-duration: 2.2496856s;
animation-duration: 2.2496856s;
-webkit-animation-delay: 0.01289872s;
animation-delay: 0.01289872s;
}
.stars-cluster-2 .star-13 {
width: 2px;
height: 2px;
opacity: 0.21363638;
top: 11.13217422%;
left: 95.66818471%;
-webkit-animation-duration: 1.98788315s;
animation-duration: 1.98788315s;
-webkit-animation-delay: 0.93089734s;
animation-delay: 0.93089734s;
}
.stars-cluster-2 .star-14 {
width: 3px;
height: 3px;
opacity: 0.3220008;
top: 15.94900594%;
left: 39.33463295%;
-webkit-animation-duration: 1.49800243s;
animation-duration: 1.49800243s;
-webkit-animation-delay: 0.92516513s;
animation-delay: 0.92516513s;
}
.stars-cluster-2 .star-15 {
width: 3px;
height: 3px;
opacity: 0.76562906;
top: 65.41056361%;
left: 47.76265528%;
-webkit-animation-duration: 1.24388247s;
animation-duration: 1.24388247s;
-webkit-animation-delay: 0.08390243s;
animation-delay: 0.08390243s;
}
.stars-cluster-2 .star-16 {
width: 3px;
height: 3px;
opacity: 0.53969318;
top: 87.97705721%;
left: 85.77210996%;
-webkit-animation-duration: 1.09518011s;
animation-duration: 1.09518011s;
-webkit-animation-delay: 0.96920268s;
animation-delay: 0.96920268s;
}
.stars-cluster-2 .star-17 {
width: 4px;
height: 4px;
opacity: 0.68320237;
top: 68.87226768%;
left: 81.18112932%;
-webkit-animation-duration: 1.86322963s;
animation-duration: 1.86322963s;
-webkit-animation-delay: 0.37831406s;
animation-delay: 0.37831406s;
}
.stars-cluster-2 .star-18 {
width: 4px;
height: 4px;
opacity: 0.2321661;
top: 25.77336137%;
left: 82.09954833%;
-webkit-animation-duration: 0.72090623s;
animation-duration: 0.72090623s;
-webkit-animation-delay: 0.29495269s;
animation-delay: 0.29495269s;
}
.stars-cluster-2 .star-19 {
width: 2px;
height: 2px;
opacity: 0.30222439;
top: 3.44906615%;
left: 84.09169419%;
-webkit-animation-duration: 1.62960782s;
animation-duration: 1.62960782s;
-webkit-animation-delay: 0.1989756s;
animation-delay: 0.1989756s;
}
.stars-cluster-2 .star-20 {
width: 4px;
height: 4px;
opacity: 0.26656862;
top: 56.90372277%;
left: 66.33246285%;
-webkit-animation-duration: 1.12962105s;
animation-duration: 1.12962105s;
-webkit-animation-delay: 0.87063879s;
animation-delay: 0.87063879s;
}
.stars-cluster-2 .star-21 {
width: 3px;
height: 3px;
opacity: 0.34874407;
top: 10.60475807%;
left: 75.55002391%;
-webkit-animation-duration: 2.37590233s;
animation-duration: 2.37590233s;
-webkit-animation-delay: 0.49278106s;
animation-delay: 0.49278106s;
}
.stars-cluster-2 .star-22 {
width: 2px;
height: 2px;
opacity: 0.57709206;
top: 72.18709069%;
left: 27.40811745%;
-webkit-animation-duration: 1.3765361s;
animation-duration: 1.3765361s;
-webkit-animation-delay: 0.63206429s;
animation-delay: 0.63206429s;
}
.stars-cluster-2 .star-23 {
width: 4px;
height: 4px;
opacity: 0.71594372;
top: 46.91714069%;
left: 8.05842141%;
-webkit-animation-duration: 0.76272756s;
animation-duration: 0.76272756s;
-webkit-animation-delay: 0.49546826s;
animation-delay: 0.49546826s;
}
.stars-cluster-2 .star-24 {
width: 3px;
height: 3px;
opacity: 0.47752863;
top: 60.14267169%;
left: 49.52873827%;
-webkit-animation-duration: 0.55223837s;
animation-duration: 0.55223837s;
-webkit-animation-delay: 0.70237041s;
animation-delay: 0.70237041s;
}
.stars-cluster-2 .star-25 {
width: 2px;
height: 2px;
opacity: 0.46362037;
top: 29.30579802%;
left: 19.66766489%;
-webkit-animation-duration: 1.24825819s;
animation-duration: 1.24825819s;
-webkit-animation-delay: 0.36530572s;
animation-delay: 0.36530572s;
}
.stars-cluster-2 .star-26 {
width: 3px;
height: 3px;
opacity: 0.22468928;
top: 30.0263514%;
left: 48.14072419%;
-webkit-animation-duration: 1.34308767s;
animation-duration: 1.34308767s;
-webkit-animation-delay: 0.30802967s;
animation-delay: 0.30802967s;
}
.stars-cluster-2 .star-27 {
width: 3px;
height: 3px;
opacity: 0.42669195;
top: 67.08937699%;
left: 58.39687365%;
-webkit-animation-duration: 0.95181399s;
animation-duration: 0.95181399s;
-webkit-animation-delay: 0.18754005s;
animation-delay: 0.18754005s;
}
.stars-cluster-2 .star-28 {
width: 2px;
height: 2px;
opacity: 0.44942259;
top: 79.05382151%;
left: 83.5604036%;
-webkit-animation-duration: 2.26860013s;
animation-duration: 2.26860013s;
-webkit-animation-delay: 0.30984034s;
animation-delay: 0.30984034s;
}
.stars-cluster-2 .star-29 {
width: 3px;
height: 3px;
opacity: 0.76505046;
top: 88.84856447%;
left: 44.96914546%;
-webkit-animation-duration: 2.18224359s;
animation-duration: 2.18224359s;
-webkit-animation-delay: 0.85191002s;
animation-delay: 0.85191002s;
}
.stars-cluster-2 .star-30 {
width: 3px;
height: 3px;
opacity: 0.71507148;
top: 79.28875973%;
left: 61.91310247%;
-webkit-animation-duration: 2.02781984s;
animation-duration: 2.02781984s;
-webkit-animation-delay: 0.18988311s;
animation-delay: 0.18988311s;
}
.stars-cluster-2 .star-31 {
width: 4px;
height: 4px;
opacity: 0.40217528;
top: 57.83390459%;
left: 36.65053435%;
-webkit-animation-duration: 1.52626457s;
animation-duration: 1.52626457s;
-webkit-animation-delay: 0.59650305s;
animation-delay: 0.59650305s;
}
.stars-cluster-2 .star-32 {
width: 2px;
height: 2px;
opacity: 0.48824655;
top: 58.42626649%;
left: 10.22150554%;
-webkit-animation-duration: 1.15316441s;
animation-duration: 1.15316441s;
-webkit-animation-delay: 0.10563989s;
animation-delay: 0.10563989s;
}
.stars-cluster-2 .star-33 {
width: 3px;
height: 3px;
opacity: 0.2070885;
top: 80.71076127%;
left: 29.2481527%;
-webkit-animation-duration: 1.52895436s;
animation-duration: 1.52895436s;
-webkit-animation-delay: 0.97295808s;
animation-delay: 0.97295808s;
}
.stars-cluster-2 .star-34 {
width: 4px;
height: 4px;
opacity: 0.68310274;
top: 28.08589404%;
left: 3.04431745%;
-webkit-animation-duration: 0.64554486s;
animation-duration: 0.64554486s;
-webkit-animation-delay: 0.28581266s;
animation-delay: 0.28581266s;
}
.stars-cluster-2 .star-35 {
width: 3px;
height: 3px;
opacity: 0.77964337;
top: 27.6594888%;
left: 35.31864304%;
-webkit-animation-duration: 1.97399622s;
animation-duration: 1.97399622s;
-webkit-animation-delay: 0.06134597s;
animation-delay: 0.06134597s;
}
.stars-cluster-2 .star-36 {
width: 2px;
height: 2px;
opacity: 0.67149897;
top: 16.93604565%;
left: 60.6250674%;
-webkit-animation-duration: 2.14073855s;
animation-duration: 2.14073855s;
-webkit-animation-delay: 0.1830971s;
animation-delay: 0.1830971s;
}
.stars-cluster-2 .star-37 {
width: 3px;
height: 3px;
opacity: 0.21677322;
top: 73.96097549%;
left: 47.25923818%;
-webkit-animation-duration: 0.52251075s;
animation-duration: 0.52251075s;
-webkit-animation-delay: 0.56396914s;
animation-delay: 0.56396914s;
}
.stars-cluster-2 .star-38 {
width: 3px;
height: 3px;
opacity: 0.28827927;
top: 95.7336667%;
left: 21.16283106%;
-webkit-animation-duration: 0.85879076s;
animation-duration: 0.85879076s;
-webkit-animation-delay: 0.78154005s;
animation-delay: 0.78154005s;
}
.stars-cluster-2 .star-39 {
width: 3px;
height: 3px;
opacity: 0.21943557;
top: 12.48179052%;
left: 95.16794682%;
-webkit-animation-duration: 2.34176263s;
animation-duration: 2.34176263s;
-webkit-animation-delay: 0.1253609s;
animation-delay: 0.1253609s;
}
.stars-cluster-2 .star-40 {
width: 2px;
height: 2px;
opacity: 0.50583154;
top: 37.06230265%;
left: 68.70687257%;
-webkit-animation-duration: 1.4157573s;
animation-duration: 1.4157573s;
-webkit-animation-delay: 0.99501541s;
animation-delay: 0.99501541s;
}
.stars-cluster-3 .star-1 {
width: 5px;
height: 5px;
opacity: 0.2196045;
top: 24.6874952%;
left: 89.10908487%;
-webkit-animation-duration: 0.68783362s;
animation-duration: 0.68783362s;
-webkit-animation-delay: 0.06944409s;
animation-delay: 0.06944409s;
}
.stars-cluster-3 .star-2 {
width: 5px;
height: 5px;
opacity: 0.72573626;
top: 55.73282305%;
left: 87.93742501%;
-webkit-animation-duration: 1.05392516s;
animation-duration: 1.05392516s;
-webkit-animation-delay: 0.07504456s;
animation-delay: 0.07504456s;
}
.stars-cluster-3 .star-3 {
width: 5px;
height: 5px;
opacity: 0.72529951;
top: 55.62304021%;
left: 15.23692252%;
-webkit-animation-duration: 2.12550798s;
animation-duration: 2.12550798s;
-webkit-animation-delay: 0.78403494s;
animation-delay: 0.78403494s;
}
.stars-cluster-3 .star-4 {
width: 3px;
height: 3px;
opacity: 0.55553545;
top: 41.6112493%;
left: 2.34587654%;
-webkit-animation-duration: 0.62134108s;
animation-duration: 0.62134108s;
-webkit-animation-delay: 0.549214s;
animation-delay: 0.549214s;
}
.stars-cluster-3 .star-5 {
width: 2px;
height: 2px;
opacity: 0.53970771;
top: 52.15501566%;
left: 64.8052813%;
-webkit-animation-duration: 1.73416909s;
animation-duration: 1.73416909s;
-webkit-animation-delay: 0.09277473s;
animation-delay: 0.09277473s;
}
.stars-cluster-3 .star-6 {
width: 5px;
height: 5px;
opacity: 0.72880044;
top: 18.98104004%;
left: 11.74198973%;
-webkit-animation-duration: 0.62904881s;
animation-duration: 0.62904881s;
-webkit-animation-delay: 0.67549215s;
animation-delay: 0.67549215s;
}
.stars-cluster-3 .star-7 {
width: 3px;
height: 3px;
opacity: 0.56738141;
top: 35.31063362%;
left: 62.58800065%;
-webkit-animation-duration: 1.23874177s;
animation-duration: 1.23874177s;
-webkit-animation-delay: 0.49191368s;
animation-delay: 0.49191368s;
}
.stars-cluster-3 .star-8 {
width: 4px;
height: 4px;
opacity: 0.73157989;
top: 15.84226089%;
left: 50.8374532%;
-webkit-animation-duration: 0.40644008s;
animation-duration: 0.40644008s;
-webkit-animation-delay: 0.85831796s;
animation-delay: 0.85831796s;
}
.stars-cluster-3 .star-9 {
width: 3px;
height: 3px;
opacity: 0.22092685;
top: 98.36417697%;
left: 22.11660668%;
-webkit-animation-duration: 2.10034438s;
animation-duration: 2.10034438s;
-webkit-animation-delay: 0.49466777s;
animation-delay: 0.49466777s;
}
.stars-cluster-3 .star-10 {
width: 5px;
height: 5px;
opacity: 0.35452103;
top: 44.86449636%;
left: 73.100704%;
-webkit-animation-duration: 0.87878946s;
animation-duration: 0.87878946s;
-webkit-animation-delay: 0.4621741s;
animation-delay: 0.4621741s;
}
.stars-cluster-3 .star-11 {
width: 3px;
height: 3px;
opacity: 0.36832717;
top: 82.41865339%;
left: 2.27783655%;
-webkit-animation-duration: 1.05761801s;
animation-duration: 1.05761801s;
-webkit-animation-delay: 0.99212826s;
animation-delay: 0.99212826s;
}
.stars-cluster-3 .star-12 {
width: 2px;
height: 2px;
opacity: 0.74122884;
top: 72.04099263%;
left: 9.53169228%;
-webkit-animation-duration: 0.75408026s;
animation-duration: 0.75408026s;
-webkit-animation-delay: 0.24388227s;
animation-delay: 0.24388227s;
}
.stars-cluster-3 .star-13 {
width: 3px;
height: 3px;
opacity: 0.23499457;
top: 50.78815122%;
left: 68.0255977%;
-webkit-animation-duration: 1.75741815s;
animation-duration: 1.75741815s;
-webkit-animation-delay: 0.58968519s;
animation-delay: 0.58968519s;
}
.stars-cluster-3 .star-14 {
width: 4px;
height: 4px;
opacity: 0.34211943;
top: 75.76707641%;
left: 54.77072399%;
-webkit-animation-duration: 0.49572825s;
animation-duration: 0.49572825s;
-webkit-animation-delay: 0.26548849s;
animation-delay: 0.26548849s;
}
.stars-cluster-3 .star-15 {
width: 5px;
height: 5px;
opacity: 0.69612899;
top: 77.58624754%;
left: 55.82023715%;
-webkit-animation-duration: 1.8887249s;
animation-duration: 1.8887249s;
-webkit-animation-delay: 0.54374174s;
animation-delay: 0.54374174s;
}
/**
* ----------------------------------------
* @animation pulsate
* ---------------------------------------
*/
@-webkit-keyframes pulsate {
0% {
-webkit-transform: scale(0.85);
transform: scale(0.85);
opacity: .2;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes pulsate {
0% {
-webkit-transform: scale(0.85);
transform: scale(0.85);
opacity: .2;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
/**
* ----------------------------------------
* @animation shooting-star
* ---------------------------------------
*/
@-webkit-keyframes shooting-star {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
opacity: 1;
}
20%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform: translate(400px, 200px);
transform: translate(400px, 200px);
opacity: 0;
}
}
@keyframes shooting-star {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
opacity: 1;
}
20%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform: translate(400px, 200px);
transform: translate(400px, 200px);
opacity: 0;
}
}
/**
* ----------------------------------------
* @animation shooting-star-2
* ---------------------------------------
*/
@-webkit-keyframes shooting-star-2 {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
opacity: 1;
}
10%,
100% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
-webkit-transform: translate(600px, 150px);
transform: translate(600px, 150px);
opacity: .3;
}
}
@keyframes shooting-star-2 {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
opacity: 1;
}
10%,
100% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
-webkit-transform: translate(600px, 150px);
transform: translate(600px, 150px);
opacity: .3;
}
}
html5卡片平行视差效果,HTML5/jQuery很棒的交互式平行视差皓月当空场景动画相关推荐
- html5圆形头像滚动效果,基于jQuery实现响应式圆形图片轮播特效
本文实例讲述了基于jQuery实现响应式圆形图片轮播特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件,misl ...
- html5怎么产生手风琴效果,Html5 js如何实现手风琴效果
Html5 js如何实现手风琴效果 发布时间:2020-08-03 09:54:10 来源:亿速云 阅读:92 作者:小猪 这篇文章主要为大家展示了Html5 js如何实现手风琴效果,内容简而易懂,希 ...
- html5手机触屏效果,html5手机触屏touch事件的详细介绍
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享. 今天为大家介绍的事件 ...
- html5怎么实现雨滴效果,HTML5实现晶莹剔透的雨滴特效
HTML5雨滴特效 img { display: none; } body { overflow: hidden; } #canvas { position: absolute; top: 0px; ...
- html5图片文字环绕效果,HTML5实现Word中文字全环绕图片效果
实现这个功能是当时看见数字报的展示出来的编排方式,就是图片+热点,而且下载打开还是PDF的,让我这个WP用户咋个看.想实现Word中的编排方式,也需要浏览器支持Word插件,火狐.谷歌.Opera这些 ...
- HTML5段落标签的效果,HTML5标签：section元素的使用方法及作用
html元素中section标签是html5中新增的标签,主要用于定义文档页面中"节"或"段"的区块,下面,我们就详细了解一下 标签的使用方法及作用. 标签定义 ...
- HTML5的web开发,基于Html5技术的WEB开发
摘 要:HTML是互联网上应用最广泛的语言,得到了业界大力支持,已经成为WEB发展的标准.它强大了对多媒体的支持力度和远程与本地对数据的处理能力,本文对HTML5的新特性进行了总结,分析了该语言在移动 ...
- 「首席架构师推荐」一系列很棒的的浏览器端JavaScript库资源
包管理器 托管JavaScript库并提供用于获取和打包它们的工具. npm - npm是JavaScript的包管理器. Bower - 网络包管理器. component - 用于构建更好的Web ...
- html5页面滚动视差效果特,34个网页视差滚动插件和视差特效教程分享
34个网页视差滚动插件和视差特效教程分享 Sponsor 视差滚动这个设计趋势从去年开始一直流行到现在,这个特效的视觉体验非常不错,比如前面分享的<19个创意网页设计欣赏>文章,有很多使视 ...
最新文章
- 15行代码AC——习题5-5 复合词(Compound Words, UVa 10391)——解题报告
- cookie 百科_Cookie和session应该这样理解
- centos7 安装 php7
- Linux chapter 7
- 简述prototype, _proto_, constructor三者的关系
- windows下安装sqlmap 详细教程
- Win8驱动的兼容性问题
- SQL - 数据查询语句之字符串拆分
- IOS开发-ERROR ITMS-90096: Your binary is not optimized for iPhone 5
- Dell intel i5 1135笔记本 win10 ubuntu18.04双系统
- You can't specify target table 'ship_product_cat' for update in FROM clause
- [转]拍照怎么搜题？（下）
- 自动呼叫分配系统中心系统组成
- SIwave仿真手册——软件基础（一）
- 砼匠商砼ERP大屏展示效果图
- Windows 无法删除文件夹 —— 访问被拒绝 / 因为目录不是空的
- 数据库恢复技术习题练习
- 大学里面必拿的证书四六级证书
- mysql之字符串连接操作
- 通信算法之五十九：SC_FDE系统中的匹配滤波与频偏纠正