有一齒輪,現(xiàn)在做的動(dòng)畫(huà)是,滑鼠懸浮時(shí)才會(huì)觸發(fā)滾動(dòng)事件,
想做的動(dòng)畫(huà)是,頁(yè)面載入完成後,隔一段時(shí)間齒輪會(huì)自己滾出去再滾回來(lái)。
向右滾動(dòng)和向左滾動(dòng)都能實(shí)現(xiàn),但是不知道jquery中怎麼寫(xiě)「隔一段時(shí)間+滾出去再滾回來(lái)」
html:
<p id="wheel1">
<p>Running right</p>
</p>
<p id = "wheel2">
<p>Running left</p>
</p>
css:
<style type="text/css">
#wheel1{
width: 150px;
height: 150px;
background-color: pink;
border:5px dotted purple;
border-radius: 80px;
float: right;
}
#wheel2{
width: 150px;
height: 150px;
background-color: pink;
border:5px dotted purple;
border-radius: 80px;
}
#wheel2:hover{
transform: translate(1000px) rotate(720deg);
transition: transform 8s ease;
}
#wheel1:hover{
transform: translate(-500px) rotate(-720deg);
transition: transform 8s ease;
}
p{
font-size: 25px;
color: white;
margin: 30px;
}
隔一段時(shí)間使用setInterval
函數(shù):
setInterval(function(){
滾出去再滾回來(lái)();
},一段時(shí)間);
方法一:純CSS 實(shí)現(xiàn)
給兩個(gè)齒輪添加向左滾 和 向右滾的樣式
html
<p id="wheel1" class="roll-left">
<p>Running right</p>
</p>
<p id = "wheel2" class="roll-right">
<p>Running left</p>
</p>
在樣式裡添加了無(wú)限循環(huán)滾動(dòng)的動(dòng)畫(huà)。
如果需要滾出去隔一會(huì)再回來(lái),可以把translate(-1000px)
的值增大,例如 2000px,根據(jù)需求自己控制。
translate 的值增加後,需要回應(yīng)的增大 rotate 的值,也是根據(jù)需求自己調(diào)節(jié)就行了。
css
#wheel1, #wheel2{
width: 150px;
height: 150px;
background-color: pink;
border:5px dotted purple;
border-radius: 80px;
position: absolute;
}
#wheel1{
right: 0;
}
p{
font-size: 25px;
color: white;
margin: 30px;
}
.roll-left{
animation: roll-left 6s linear infinite; // 給動(dòng)畫(huà)添加 infinite 值,讓動(dòng)畫(huà)無(wú)限循環(huán)
-webkit-animation-direction:alternate; // 反向執(zhí)行動(dòng)畫(huà)
animation-direction:alternate;
}
.roll-right{
animation: roll-right 6s linear infinite;
-webkit-animation-direction:alternate;
animation-direction:alternate;
}
@keyframes roll-left{
from{}
to {transform: translate(-1000px) rotate(-720deg)}
}
@keyframes roll-right{
from{}
to{transform: translate(1000px) rotate(720deg)}
}
方法二:使用jquery 控制
如果想用 jquery 控制的話,css 需要修改一下
.roll-left{
animation: roll-left 8s linear;
}
.roll-right{
animation: roll-right 8s linear;
}
@keyframes roll-left{
0% {}
50% {transform: translate(-1000px) rotate(-720deg)}
100% {}
}
@keyframes roll-right{
0% {}
50% {transform: translate(1000px) rotate(720deg)}
100% {}
}
js
setInterval(function(){
$('#wheel1').addClass('roll-left').one('animationend', function() { // 每次動(dòng)畫(huà)完成后移除樣式
$('#wheel1').removeClass('roll-left');
});
}, 2000); // 通過(guò)修改這個(gè)數(shù)值去控制每隔多久執(zhí)行一次