【云朵浮动】
<img class="zuos" src="imgs/page01/zuos.png" alt=""/>
/*云动画*/
.page01 .zuos {
width:2.8133333333333335rem;
height:1rem;
position: absolute;
left: -0.26666667rem;
top: 1.2rem;
-webkit-animation: yundong 5s -3s linear infinite;
animation: yundong 5s -3s linear infinite;
}
@keyframes yundong {
0% {
-webkit-transform: translate(0px, 0);
transform: translate(0px, 0);
}
50% {
-webkit-transform: translate(-12px, -2px);
transform: translate(-12px, -2px);
}
100% {
-webkit-transform: translate(0px, 0);
transform: translate(0px, 0);
}
}
【上滑动画】
<img class="up" src="imgs/page01/up.png" alt=""/>
.page01 .up {
width: 1.38666667rem;
height: 2.56rem;
position: absolute;
left: 4.36rem;
top: 12.6rem;
-webkit-animation: up 1.5s linear infinite;
animation: up 1.5s linear infinite;
}
@keyframes up {
0% {
//opacity: 0.5;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
100% {
//opacity: 1;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
【滑动时拨开云雾】
<img class="zuosyd animated" src="imgs/page01/zuosyd.png" alt=""/>
<img class="yousyd animated" src="imgs/page01/yousyd.png" alt=""/>
【css】
.page01 .zuosyd {
width: 5.69333333rem;
height: 3.24rem;
position: absolute;
left: 1.2rem;
top: 15.46666667rem;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.page01 .yousyd {
width: 4.30666667rem;
height: 2.85333333rem;
position: absolute;
right: 1.86666667rem;
top: 15.6rem;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
【js】
//初始化加载
if(firstInit){
var imgFile = [
'./imgs/bg01.png',
'./imgs/aiyinsitan.gif',
'./imgs/anniu.png',
'./imgs/page01/zuos.png',
'./imgs/page01/zuox.png',
'./imgs/page01/yous.png',
'./imgs/page01/youx.png',
'./imgs/page01/up.png',
'./imgs/page01/zuosyd.png',
'./imgs/page01/yousyd.png',
'./imgs/page01/shanzi.png',
];
ImgLoadingByFile(imgFile,'loadingPage','img-loading-txt','readyGo','musicStar','pageContainer');
firstInit = false;
}
$(window).scroll( function() {
var sh = $(window).scrollTop();
var rem = parseInt($('body').css('width'))/10;
function addClass(classID,showClass){
if(!$('.'+classID).hasClass(showClass)){
$('.'+classID).addClass(showClass);
}
}
/********动画**********/
if(sh>(100/75*rem)){//page01云散开
addClass('zuosyd','fadeOutLeft');
addClass('yousyd','fadeOutRight');
} else{
$('.zuosyd').removeClass('fadeOutLeft') ;
$('.yousyd').removeClass('fadeOutRight') ;
}
})
【汽车尾气】
<img class="car01" src="imgs/page01/car01.png" alt=""/>
<img class="car01-qi" src="imgs/page01/car01-qi.png" alt=""/>
----css
.page01 .car01{
width: 2.76rem;
height: 1.8533333333333333rem;
position: absolute;
left: 1.92rem;
top: 18.92rem;
}
.page01 .car01-qi{
width: 0.7066666666666667rem;
height: 1rem;
position: absolute;
left: 4.45333333rem;
top: 19.6rem;
animation: car01-qimove 2s ease-in infinite;
-webkit-animation: car01-qimove 2s ease-in infinite;
}
----css 动画
/*汽车尾气动画*/
@keyframes car01-qimove {
0% {
left: 4.45333333rem;
transform: scale3d(1, 1, 1);
-webkit-transform: scale3d(1, 1, 1);
opacity: 0.8;
}
10% {
opacity: 1;
}
50% {
left: 4.50666667rem;
opacity: 1;
}
60% {
opacity: 0.2;
transform: scale3d(0.9, 1.3, 1);
-webkit-transform: scale3d(0.9, 1.3, 1);
}
100% {
left: 4.53333333rem;
-webkit-transform: scale3d(0.9, 1.3, 1);
transform: scale3d(0.9, 1.3, 1);
opacity: 0;
}
}
【标示牌晃动】
<img class="car02-save" src="imgs/page01/car02-save.png" alt=""/>
.page01 .car02-save {
width: 0.85333333rem;
height: 0.90666667rem;
position: absolute;
left: 6.85333333rem;
top: 19.76rem;
-webkit-animation: car02-savemove 3s ease infinite;
animation: car02-savemove 3s ease infinite;
-webkit-transform-origin: center top;
transform-origin: center top;
}
@keyframes car02-savemove {
0% {
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
}
50% {
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}
100% {
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
}
}
网友评论