• <small id="63y1u"><samp id="63y1u"></samp></small>

      1. Telephone
        15063366547
        QQ
        286601999

        控制hover顯示時(shí)間-CSS3 transition 過渡屬性

        發(fā)表時(shí)間:2015-12-18 09:50?? 作者:銳尚?? 瀏覽:

        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-transition-property: width;
          -moz-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, 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)文章/Related

      2. 解決不同分辨率顯示不同

        在css2中允許我們使用media的屬性,例如使用screen和print,我也寫過一篇關(guān)于使用...

      3. 97久久人妻一区二区中文无码,亚洲中文字幕久久精品91,东京热久久综合伊人av,国国产一级黄色免费电影
      4. <small id="63y1u"><samp id="63y1u"></samp></small>