導(dǎo)讀:搭建網(wǎng)站搭建網(wǎng)站CSS3 transition 允許 CSS 元素的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。我們可以在不使用 Flash 動(dòng)畫或 JavaScript 的情況下，在建站技術(shù)教學(xué)建站技術(shù)論壇。

CSS3 transition 允許 CSS 元素的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。我們可以在不使用 Flash 動(dòng)畫或 JavaScript 的情況下，在元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動(dòng)畫效果改 變 CSS 的屬性值。以下是 transition 屬性的瀏覽器支持、語法和示例。

瀏覽器支​持：

Internet Explorer 10 及以上版本、Firefox、Chrome 以及 Opera 支持 transition 屬性。Safari 需要前綴 -webkit-。Internet Explorer 9 以及更早的版本不支持 transition 屬性。Chrome 25 以及更早的版本，需要前綴 -webkit-。

語法​:

transition 屬性主要包含四個(gè)屬性值：transition-property -- 規(guī)定應(yīng)用過渡的 CSS 屬性的名稱；transition-duration -- 定義過渡效果花費(fèi)的時(shí)間，默認(rèn)是 0；transition-timing-function -- 規(guī)定過渡效果的時(shí)間曲線。默認(rèn)是 "ease"；transition-delay -- 規(guī)定過渡效果何時(shí)開始，默認(rèn)是 0。transition -- 簡(jiǎn)寫屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過渡屬性。如需向多個(gè)樣式添加過渡效果，請(qǐng)?zhí)砑佣鄠€(gè)屬性，由逗號(hào)隔開。

一、改變寬度屬性

div.css3-transition-test1 { transition-property: width; transition-duration: 1s; transition-timing-function: ease-in; transition-delay: 0; /* Firefox 4 */ -moz-tradede手機(jī)模板nsition-property: width; -m織夢(mèng)模板oz-transition-duration: 1s; -moz-transition-timing-function: ease-in; -moz-transition-delay: 0; /* Safari and Chrome */ -webkit-transition-property: width; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in; -webkit-transition-delay: 0; /* Opera */ -o-transition-property: width; -o-transition-duration: 1s; -o-transition-timing-function: ease-in; -o-transition-delay: 0; } 或 div.css3-transition-test1 { transition: width 1s ease-in; -moz-transition: width 1s ease-in; /* Firefox 4 */ -webkit-transition: width 1s ease-in; /* Safari and Chrome */ -o-transition: width 1s ease-in; /* Opera */ }

二、改變多個(gè)屬性

p.css3-transition-test2 { -webkit-transition: -webkit-transform 1s, opacity 1s, background 1s, width 1s, height 1s, font-size 1s; -moz-transition-property: width, height, -o-transform, background, font-size, opacity; -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s; -o-transition-property: width, height, -o-transform, background, font-size, opacity; -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s; transition-property: width, height, 織夢(mèng)cms模板transform, background, font-size, opacity; transition-duration: 1s, 1s, 1s, 1s, 1s, 1s; } p.css3-transition-test2:hover { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }相關(guān)建站技術(shù)教學(xué)建站技術(shù)論壇。

關(guān)鍵詞標(biāo)簽: 搭建網(wǎng)站 時(shí)間 屬性