补充 / 添加动图大雁（加不加无所谓）演示站已添加
在 append 里添加下面代码- .a-bird{z-index:-1;position:absolute;width:120px;height:90px;background-image:url(http://sclubfans.imotor.com/attachments/month_1810/1810301146dbfa87deec5e83b5.png);background-repeat:no-repeat;-webkit-animation:fly 1s linear infinite,forward 30s linear infinite;-moz-animation:fly 1s linear infinite,forward 30s linear infinite;-ms-animation:fly 1s linear infinite,forward 30s linear infinite;}.a-bird-01{top:320px;left:-3%;background-position:0 -540px;-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-ms-transform:scale(0.8);-webkit-animation-delay:-0.67s,-26.077s;-moz-animation-delay:-0.67s,-26.077s;-ms-animation-delay:-0.67s,-26.077s;zoom:0.8\9;}.a-bird-02{top:240px;left:4%;background-position:0 -360px;-webkit-transform:scale(0.6);-moz-transform:scale(0.6);-ms-transform:scale(0.6);-webkit-animation-delay:-0.45s,-24.462s;-moz-animation-delay:-0.45s,-24.462s;-ms-animation-delay:-0.45s,-24.462s;zoom:0.6\9;}.a-bird-03{top:280px;left:12%;-webkit-transform:scale(0.7);-moz-transform:scale(0.7);-ms-transform:scale(0.7);-webkit-animation-delay:0s,-22.615s;-moz-animation-delay:0s,-22.615s;-ms-animation-delay:0s,-22.615s;zoom:0.7\9;}.a-bird-04{top:300px;left:85%;background-position:0 -630px;-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-ms-transform:scale(0.8);-webkit-animation-delay:-0.78s,-5.769s;-moz-animation-delay:-0.78s,-5.769s;-ms-animation-delay:-0.78s,-5.769s;zoom:0.8\9;}.a-bird-05{top:260px;left:93%;background-position:0 -270px;-webkit-transform:scale(0.7);-moz-transform:scale(0.7);-ms-transform:scale(0.7);-webkit-animation-delay:-0.34s,-3.923s;-moz-animation-delay:-0.34s,-3.923s;-ms-animation-delay:-0.34s,-3.923s;zoom:0.7\9;}.a-bird-06{top:220px;left:79%;background-position:0 -450px;-webkit-transform:scale(0.6);-moz-transform:scale(0.6);-ms-transform:scale(0.6);-webkit-animation-delay:-0.56s,-7.154s;-moz-animation-delay:-0.56s,-7.154s;-ms-animation-delay:-0.56s,-7.154s;zoom:0.6\9;}@-webkit-keyframes fly{0%{ background-position:0 0;}11.1%{ background-position:0 0;}11.11%{ background-position:0 -90px;}22.21%{ background-position:0 -90px;}22.22%{ background-position:0 -180px;}33.32%{ background-position:0 -180px;}33.33%{ background-position:0 -270px;}44.43%{ background-position:0 -270px;}44.44%{ background-position:0 -360px;}55.54%{ background-position:0 -360px;}55.55%{ background-position:0 -450px;}66.65%{ background-position:0 -450px;}66.66%{ background-position:0 -540px;}77.76%{ background-position:0 -540px;}77.77%{ background-position:0 -630px;}88.87%{ background-position:0 -630px;}88.88%{ background-position:0 -720px;}99.98%{ background-position:0 -720px;}100%{ background-position:0 0;}}@-moz-keyframes fly{0%{ background-position:0 0;}11.1%{ background-position:0 0;}11.11%{ background-position:0 -90px;}22.21%{ background-position:0 -90px;}22.22%{ background-position:0 -180px;}33.32%{ background-position:0 -180px;}33.33%{ background-position:0 -270px;}44.43%{ background-position:0 -270px;}44.44%{ background-position:0 -360px;}55.54%{ background-position:0 -360px;}55.55%{ background-position:0 -450px;}66.65%{ background-position:0 -450px;}66.66%{ background-position:0 -540px;}77.76%{ background-position:0 -540px;}77.77%{ background-position:0 -630px;}88.87%{ background-position:0 -630px;}88.88%{ background-position:0 -720px;}99.98%{ background-position:0 -720px;}100%{ background-position:0 0;}}@-ms-keyframes fly{0%{ background-position:0 0;}11.1%{ background-position:0 0;}11.11%{ background-position:0 -90px;}22.21%{ background-position:0 -90px;}22.22%{ background-position:0 -180px;}33.32%{ background-position:0 -180px;}33.33%{ background-position:0 -270px;}44.43%{ background-position:0 -270px;}44.44%{ background-position:0 -360px;}55.54%{ background-position:0 -360px;}55.55%{ background-position:0 -450px;}66.65%{ background-position:0 -450px;}66.66%{ background-position:0 -540px;}77.76%{ background-position:0 -540px;}77.77%{ background-position:0 -630px;}88.87%{ background-position:0 -630px;}88.88%{ background-position:0 -720px;}99.98%{ background-position:0 -720px;}100%{ background-position:0 0;}}@-webkit-keyframes forward{0%{ left:110%;}100%{ left:-20%;}}@-moz-keyframes forward{0%{ left:110%;}100%{ left:-20%;}}@-ms-keyframes forward{0%{ left:110%;}100%{ left:-20%;}}.animate-layer {position: fixed;top: 0;right: 0;bottom: 0;left: 0;overflow: hidden;z-index: -1;}.animate-layer:before{ display:none;}.animate-layer:after{ display:none;}
- <div id="append_parent"></div><div id="ajaxwaitid"></div>
- <div class="animate-layer">
- <s class="a-bird a-bird-01"></s>
- <s class="a-bird a-bird-02"></s>
- <s class="a-bird a-bird-03"></s>
- <s class="a-bird a-bird-04"></s>
- <s class="a-bird a-bird-05"></s>
- <s class="a-bird a-bird-06"></s>
- <s class="a-cloud a-cloud-01"></s>
- <s class="a-cloud a-cloud-02"></s>
- <s class="a-cloud a-cloud-03"></s>
- <s class="a-cloud a-cloud-04"></s>
- <s class="a-cloud a-cloud-05"></s>
- <s class="a-cloud a-cloud-06"></s>
- <s class="a-balloon a-balloon-01"></s>
- <s class="a-balloon a-balloon-02"></s>
- <s class="a-meteor a-meteor-01"></s>
- <s class="a-meteor a-meteor-02"></s>
- <s class="a-meteor a-meteor-03"></s>
- <s class="a-meteor a-meteor-04"></s>
- <s class="a-star a-star-01"></s>
- <s class="a-star a-star-02"></s>
- <s class="a-star a-star-03"></s>
- <s class="a-star a-star-04"></s>
- <s class="a-star a-star-05"></s>
- </div>
|
发表于 2018-10-30 11:23
