當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS3学习手记（10）过渡

發布時間：2023/12/10 CSS 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3学习手记（10）过渡小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?

CSS3過渡

允許css的屬性值在一定的時間內平滑地過渡
在鼠標單擊、獲取焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值

transition

transition-property屬性檢索或設置對象中的參與過渡的屬性 ??

語法

transition-property:none|all|property

參數說明

none 沒有屬性改變
all 默認值
property 元素屬性名

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">body{background: #abcdef}div{width: 100px;height: 100px;margin: auto;background:lightcyan; transition-property:background}div:hover{cursor: pointer;background: red;transition-property:background }</style> </head><body><div></div></body> </html>

鼠標經過方塊變紅，離開后恢復正常

transition-duration屬性檢索設置對象過渡的持續時間

語法

transition-duration:time;

參數說明

規定完成過渡效果需要花費的時間（以秒或毫秒計）
默認值是0

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">body{background: #abcdef}div{width: 100px;height: 100px;margin: auto;background:lightcyan; transition-property:background;transition-duration: 3s}div:hover{cursor: pointer;background: red;transition-property:background;transition-duration: 3s }</style> </head><body><div></div></body> </html>

transition-timing-function 檢索或設置對象中過渡的動畫類型

linear 線性過渡
ease ?平滑過渡
ease-in 由慢到快
ease-out 由快到慢
ease-in-out 由慢到快在到慢
step-start?
step-end ?

transition-delay屬性檢索或設置對象延遲過渡的時間

語法 transition-delay:time

參數說明

指定秒或毫秒之前要等待切換效果開始
默認值 0

轉載于:https://www.cnblogs.com/zry2510/p/7084811.html

總結

以上是生活随笔為你收集整理的CSS3学习手记（10）过渡的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

手记

上一篇： java计算机毕业设计线上医药用品分销系
下一篇：漂亮html表格页面模板,四款好看实用的

CSS

CSS3学习手记（10） 过渡

?

CSS3過渡

transition

transition-timing-function 檢索或設置對象中過渡的動畫類型

transition-delay屬性檢索或設置對象延遲過渡的時間

總結

CSS3学习手记（10）过渡