課程
/前端開發(fā)
/HTML/CSS
/十天精通CSS3
在網(wǎng)站中如何使用
2017-03-10
源自:十天精通CSS3 9-8
正在回答
鼠標(biāo)經(jīng)過的時(shí)候輪播圖片移開就停止 很常見案例吧
<!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>
舉報(bào)
本課程為CSS3入門教程,深刻詳解CSS3知識(shí)讓網(wǎng)頁(yè)穿上絢麗裝備
3 回答為何animation-play-state這個(gè)屬性放在div:hover里面卻能控制span的動(dòng)畫?
1 回答CSS3 中 animation-direction:alternate。反方向時(shí),如何設(shè)定動(dòng)畫開始的延時(shí)
2 回答word-wrap該如何使用
7 回答border-radius:100px / 10px;中這個(gè)除法是如何使用的
1 回答animation-direction中的 alternate屬性
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2017-10-09
鼠標(biāo)經(jīng)過的時(shí)候輪播圖片移開就停止 很常見案例吧
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>