有一齒輪,現在做的動畫是,滑鼠懸浮時才會觸發滾動事件,
想做的動畫是,頁面載入完成後,隔一段時間齒輪會自己滾出去再滾回來。
向右滾動和向左滾動都能實現,但是不知道jquery中怎麼寫「隔一段時間+滾出去再滾回來」
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;
}
雷雷
隔一段時間使用
setInterval
函數:方法一:純CSS 實現
給兩個齒輪添加向左滾 和 向右滾的樣式
html
在樣式裡添加了無限循環滾動的動畫。
如果需要滾出去隔一會再回來,可以把
translate(-1000px)
的值增大,例如 2000px,根據需求自己控制。translate 的值增加後,需要回應的增大 rotate 的值,也是根據需求自己調節就行了。
css
方法二:使用jquery 控制
如果想用 jquery 控制的話,css 需要修改一下
js