• <dl id="06azv"></dl>

      <li id="06azv"></li>

          1. <dl id="06azv"></dl>

              <dl id="06azv"><ins id="06azv"></ins></dl>
              <dl id="06azv"><ins id="06azv"><thead id="06azv"></thead></ins></dl>

                <dl id="06azv"><ins id="06azv"></ins></dl>
              1. <li id="06azv"></li>

                <dl id="06azv"><s id="06azv"></s></dl>
                <li id="06azv"><ins id="06azv"><thead id="06azv"></thead></ins></li>

              2. <li id="06azv"><ins id="06azv"><strong id="06azv"></strong></ins></li>
                <dl id="06azv"></dl>

              3. <dl id="06azv"></dl>

                  <form id="06azv"></form>
                  1. <li id="06azv"><ins id="06azv"></ins></li>

                    1. <output id="06azv"></output>

                      代理加盟 2018全新代理計劃 0預存,0充值,獨立平臺,豐厚利潤!

                      您現在的位置: 秀站網 > 站長學院 > 建站教程 >

                      CSS hover背景/文字漸變效果

                      來源:未知 發布時間:2013-09-27熱度:我要評論
                      就不作其他解釋了,直接上代碼了,可以先試試效果,然后修改下顏色代碼就行了。大多數特效都是由CSS3完成的,唯一缺點就是兼容性,想要追求效果,就要失去兼容性。CSS3的Transition屬性,這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發,...

                      就不作其他解釋了,直接上代碼了,可以先試試效果,然后修改下顏色代碼就行了。
                      大多數特效都是由CSS3完成的,唯一缺點就是兼容性,想要追求效果,就要失去兼容性。CSS3的Transition屬性,這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發,并圓滑地以動畫效果改變CSS的屬性值。
                      
                      transition:顏色 變換延續的時間 變換速率 
                      transition:background-color 0.3s linear
                      
                      變換速率:
                      1、ease:(逐漸變慢)默認值,ease函數等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0).
                       
                      2、linear:(勻速),linear 函數等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0).
                       
                      3、ease-in:(加速),ease-in 函數等同于貝塞爾曲線(0.42, 0, 1.0, 1.0).
                       
                      4、ease-out:(減速),ease-out 函數等同于貝塞爾曲線(0, 0, 0.58, 1.0).
                       
                      5、ease-in-out:(加速然后減速),ease-in-out 函數等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)
                       
                      6、cubic-bezier:(該值允許你去自定義一個時間曲線), 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定于曲線上點P1和點P2。所有值需在[0, 1]區域內,否則無效。


                      //Mozilla內核
                      -moz-transition :
                      //Webkit內核
                      -webkit-transition :
                      //Opera
                      -o-transition :
                      //W3C 標準
                      transition :
                      案例展示:紅色部分就是代碼,復制過去試試效果。
                      .nav li {display:block;float:left;-webkit-transition:background-color 0.3s linear;-moz-transition:background-color 0.3s linear;-o-transition:background-color 0.3s linear;transition:background-color 0.3s linear;}
                      .nav li:hover {background:#454648}
                      .nav li a {padding:0 25px;margin-left:3px;display:block;float:left;font-size:14px;color:#8C8C8C;-webkit-transition:color 0.3s linear;-moz-transition:color 0.3s linear;-o-transition:color 0.3s linear;transition:color 0.3s linear;} .nav li a:hover {font-size:14px;color:#fff;}

                      本文地址:http://www.lrwh.tw/news/302.html

                        責任編輯:秀站網

                        相關閱讀

                        云南11选五5走势图