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