課程
/前端開發
/HTML/CSS
/十天精通CSS3
在網站中如何使用
2017-03-10
源自：十天精通CSS3 9-8
正在回答
鼠標經過的時候輪播圖片移開就停止 很常見案例吧
<!DOCTYPE html>
<html>
<head>
<style>?
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s;
animation-play-state:paused;
/* Safari and Chrome */
-webkit-animation:mymove 5s;
-webkit-animation-play-state:running;
}
@keyframes mymove
from {left:0px;}
to {left:200px;}
@-webkit-keyframes mymove /* Safari and Chrome */
</style>
</head>
<body>
<p><strong>注釋：</strong>Internet Explorer 9 以及更早的版本不支持 animation-play-state 屬性。</p>
<div></div>
</body>
</html>
舉報
本課程為CSS3入門教程，深刻詳解CSS3知識讓網頁穿上絢麗裝備
3 回答為何animation-play-state這個屬性放在div：hover里面卻能控制span的動畫？
1 回答CSS3 中 animation-direction:alternate。反方向時，如何設定動畫開始的延時
2 回答word-wrap該如何使用
7 回答border-radius:100px / 10px;中這個除法是如何使用的
1 回答animation-direction中的 alternate屬性
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2017-10-09
鼠標經過的時候輪播圖片移開就停止 很常見案例吧
2017-03-12
<!DOCTYPE html>
<html>
<head>
<style>?
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s;
animation-play-state:paused;
/* Safari and Chrome */
-webkit-animation:mymove 5s;
-webkit-animation-play-state:running;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注釋：</strong>Internet Explorer 9 以及更早的版本不支持 animation-play-state 屬性。</p>
<div></div>
</body>
</html>