前端HTML5CSS动画变形动画之过渡
生活随笔
收集整理的這篇文章主要介紹了
前端HTML5CSS动画变形动画之过渡
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$美少女戰(zhàn)士$</title><style>.box {width: 200px;height: 200px;background-color: red;/*脫標(biāo) left top*//* position: absolute;left:0;top:0;*//* transition 簡(jiǎn)寫(xiě)屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過(guò)渡屬性。 3
transition-property 規(guī)定應(yīng)用過(guò)渡的 CSS 屬性的名稱(chēng)。 3
transition-duration 定義過(guò)渡效果花費(fèi)的時(shí)間。默認(rèn)是 0。 3
transition-timing-function 規(guī)定過(guò)渡效果的時(shí)間曲線。默認(rèn)是 "ease"。 linear線性 3
transition-delay 規(guī)定過(guò)渡效果何時(shí)開(kāi)始。默認(rèn)是 0。*/transition:all 5s linear 2s ;/*transition:all 5s ease 2s;!*ease緩和，linear線型*!*//*過(guò)渡在鼠標(biāo)懸浮時(shí)觸發(fā)，如果沒(méi)有某屬性transition鼠標(biāo)懸浮時(shí)就會(huì)觸發(fā)該屬性如果有該屬性那么鼠標(biāo)懸浮時(shí)該屬性會(huì)過(guò)渡 過(guò)渡只有鼠標(biāo)懸浮時(shí)才有用*//*transition:all 過(guò)渡時(shí)間 linear 等待時(shí)間；*//*linear線型linear linear線型linear linear線型linear*//*transtion過(guò)渡transtion transtion過(guò)渡transtion transtion過(guò)渡 transtion*/}.fa {width: 1000px;height: 400px;border: 1px solid #ccc;}.fa:hover .box {border-radius: 50%;border-radius:50%;/*邊界半徑用于時(shí)方塊產(chǎn)生圓角*/opacity: 1;/*鼠標(biāo)懸浮時(shí)逐漸過(guò)渡到不透明*//*opacity背景和內(nèi)容都透明*//*width:1000px;*/}/*鼠標(biāo)懸浮觸發(fā)一旦鼠標(biāo)離開(kāi)觸發(fā)就會(huì)停止或返回*/</style>
</head>
<body>
<!--c3
動(dòng)畫(huà)
過(guò)渡：從一個(gè)狀態(tài)到另一個(gè)狀態(tài)(時(shí)間 )
transtion:
動(dòng)畫(huà)：多個(gè)狀態(tài)的變換
先定義后使用
-->
<div class="fa"><div class="box"></div>
</div>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的前端HTML5CSS动画变形动画之过渡的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： python基础—循环基础知识点
- 下一篇： DjangoHTML页面加载和静态文件加