<!DOCTYPE?html>
<html>
<head>
<title>animation</title>
?<style?type="text/css">
??@-webkit-keyframes?divanimation{
?0%{background-color:#00ae9d;}
40%{background-color:?#00ae9d;}
80%{background-color:?#00ae9d;}
100%{background-color:#00ae9d;transform:?scale(1.1);}?
}
?#div1{
position:?relative;
width:?1000px;
height:1000px;
margin:?150px?auto;
background:linear-gradient(to?right?bottom,#145b7d,#11264f,#11264f,#11264f);
}
?#divf{
position:absolute;
width:?100px;
height:100px;
margin:600px;
border-radius:?10%;
animation:?divanimation?3s?infinite?alternate;
transition:?1s;
}
?#divf_1{
position:?relative;
left:?17%?;
top:10%;
display:?linear-gradient;
font-weight:?bold;
font-size:?36px;
color:white;
}
#div1?#divf:hover{
background-color:?red;
transform:rotate(360deg)?scale(1.3);
animation-play-state:?paused;
}
</style>
</head>
<body>
??<div?id="div1">
??<div?id="divf"><div?id="divf_1">232</div></div>
??</div>
</body>
</html>運(yùn)行以后animation動(dòng)畫(huà)可以正常顯示,但是鼠標(biāo)移動(dòng)上去以后hover屬性中只執(zhí)行了pause和scale,有沒(méi)有什么辦法讓我鼠標(biāo)移上去以后執(zhí)行hover內(nèi)所有的動(dòng)畫(huà)效果呢?還是說(shuō)兩者是沖突的,只能執(zhí)行兩者之間的一個(gè)?
1 回答
牛奶老哥哥
TA貢獻(xiàn)204條經(jīng)驗(yàn) 獲得超92個(gè)贊
我目前發(fā)現(xiàn)的是transform里面的rotate動(dòng)畫(huà)是執(zhí)行了的,只是因?yàn)閠ransition的過(guò)渡時(shí)間沒(méi)了(你那個(gè)是360度瞬間就轉(zhuǎn)了一圈所以你看不出來(lái)效果),當(dāng)將
animation-play-state: paused;
屬性去掉時(shí),發(fā)現(xiàn)過(guò)渡時(shí)間有回來(lái)了,暫時(shí)是這個(gè)屬性的問(wèn)題.
添加回答
舉報(bào)
0/150
提交
取消