當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS3学习手记（10）过渡

發(fā)布時(shí)間：2023/12/10 CSS 30 豆豆

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

?

CSS3過渡

允許css的屬性值在一定的時(shí)間內(nèi)平滑地過渡
在鼠標(biāo)單擊、獲取焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動畫效果改變CSS的屬性值

transition

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

語法

transition-property:none|all|property

參數(shù)說明

none 沒有屬性改變
all 默認(rèn)值
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>

鼠標(biāo)經(jīng)過方塊變紅，離開后恢復(fù)正常

transition-duration屬性檢索設(shè)置對象過渡的持續(xù)時(shí)間

語法

transition-duration:time;

參數(shù)說明

規(guī)定完成過渡效果需要花費(fèi)的時(shí)間（以秒或毫秒計(jì)）
默認(rèn)值是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 檢索或設(shè)置對象中過渡的動畫類型

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

transition-delay屬性檢索或設(shè)置對象延遲過渡的時(shí)間

語法 transition-delay:time

參數(shù)說明

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

轉(zhuǎn)載于:https://www.cnblogs.com/zry2510/p/7084811.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

手记

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

CSS

CSS3学习手记（10） 过渡

?

CSS3過渡

transition

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

transition-delay屬性檢索或設(shè)置對象延遲過渡的時(shí)間

總結(jié)

CSS3学习手记（10）过渡