<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          css3動畫講解,關于css3的@keyframes和animation

          時間:?2017-11-29閱讀:?1232標簽:?css3

          通過css3我們可以創建動畫,它能取代gif圖片、Flash、Js動畫等,css3的animation動畫是應用在html的DOM元素上的,通過樣式來實現的。


          @keyframes 規則

          @Keyframes我們可以把他理解為“關鍵幀”,它的規則是:創建由當前樣式逐漸改為新樣式的動畫效果。對于一個"@keyframes"中的樣式規則是由多個百分比構成的如“0%”到"100%"之間,我們可以使用“from”和“to”來代表一個動畫是從哪開始,到那結束,"from“就相當與0%,”to"就相當于100%。

          實例:

          @keyframes myfirst{ /*動畫名稱:myfirst */
            from {background: red;}/*0%*/
            to {background: yellow;}/*100*/
          }
          //或者寫成百分百的形式:
          @keyframes myfirst{ /*動畫名稱:myfirst */
            0%   {background:red;}
            25%  {background:yellow;}
            50%  {background:blue;}
            100% {background:green;}
          }

          為了兼容瀏覽器,所以一般要加前綴:@-moz-keyframes兼容/* Firefox */、@-webkit-keyframes兼容/* Safari 和 Chrome */、@-o-keyframes兼容/* Opera */。

          @keyframes應該保證定義了 0% 和 100%,這樣才能保證瀏覽器最佳的顯示效果。


          animation

          @Keyframes定義好了后,我們需要通過animation去調用剛才定義好的動畫,CSS3的animation類似于transition屬性,他們都是隨著時間改變元素的屬性值。他們主要區別是transition需要觸發一個事件(hover事件或click事件等)才會隨時間改變其css屬性;而animation在不需要觸發任何事件的情況下也可以顯式的隨著時間變化來改變元素css的屬性值,從而達到一種動畫的效果。anmiation是所有動畫屬性的簡寫屬性:

          屬性 描述
          animation 所有動畫屬性的簡寫屬性,除了 animation-play-state 屬性。
          animation-name 規定 @keyframes 動畫的名稱。
          animation-duration 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。
          animation-timing-function 規定動畫的速度曲線。默認是 "ease"。
          animation-delay 規定動畫何時開始。默認是 0。
          animation-iteration-count 規定動畫被播放的次數。默認是 1。
          animation-direction 規定動畫是否在下一周期逆向地播放。默認是 "normal"。
          animation-play-state 規定動畫是否正在運行或暫停。默認是 "running"。
          animation-fill-mode 規定對象動畫時間之外的狀態。

          同樣為了兼容,都需要添加對應的前綴。


          實例:

          div
          {
          animation-name: myfirst;
          animation-duration: 5s;
          animation-timing-function: linear;
          animation-delay: 2s;
          animation-iteration-count: infinite;
          animation-direction: alternate;
          animation-play-state: running;
          /* Firefox: */
          -moz-animation-name: myfirst;
          -moz-animation-duration: 5s;
          -moz-animation-timing-function: linear;
          -moz-animation-delay: 2s;
          -moz-animation-iteration-count: infinite;
          -moz-animation-direction: alternate;
          -moz-animation-play-state: running;
          /* Safari 和 Chrome: */
          -webkit-animation-name: myfirst;
          -webkit-animation-duration: 5s;
          -webkit-animation-timing-function: linear;
          -webkit-animation-delay: 2s;
          -webkit-animation-iteration-count: infinite;
          -webkit-animation-direction: alternate;
          -webkit-animation-play-state: running;
          /* Opera: */
          -o-animation-name: myfirst;
          -o-animation-duration: 5s;
          -o-animation-timing-function: linear;
          -o-animation-delay: 2s;
          -o-animation-iteration-count: infinite;
          -o-animation-direction: alternate;
          -o-animation-play-state: running;
          }

          與上面的動畫相同,但是使用了簡寫的動畫 animation 屬性:

          div
          {
          animation: myfirst 5s linear 2s infinite alternate;
          /* Firefox: */
          -moz-animation: myfirst 5s linear 2s infinite alternate;
          /* Safari 和 Chrome: */
          -webkit-animation: myfirst 5s linear 2s infinite alternate;
          /* Opera: */
          -o-animation: myfirst 5s linear 2s infinite alternate;
          }

          上述實例內容來源于w3school。

          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/200

          理解 CSS3中 object-fit

          在檢查網站的時候發現圖片給于固定寬的時候,會壓縮變形,要保證,img元素不變形,寬高比不變。從別人那里了解到object-fit,以前從未用過,所以就總結給自己看看,理解一下。

          css3常用動效以及總結

          box-shadow:盒子陰影,可以給卡片添加提高美化效果。可廣泛應用于內容展示頁面。css3 過渡:最簡單的過渡是一個div,給它加上如下代碼,便可以從寬度100px華麗的過渡到寬度為300px。

          css3新特性總結

          css3新特性總結:圓角邊框、多背景圖、顏色和透明度(由原來的rgb到現在的rgba)、多列布局和彈性盒模型、盒子的變幻(2D、3D)、過渡和動畫、引入web字體(在服務器端存儲)、媒體查詢、陰影

          用CSS3實現無限循環的無縫滾動

          使在頁面中循環展示信息的功能之前一般是用js來實現的,那么用CSS3該如何實現實現呢;使用CSS來進行動畫的展示,會讓頁面顯得更加流暢。如果能用CSS實現,可以嘗試盡量用CSS實現下

          css3中計數器的使用

          css3里有個很強大的功能,就是計算器,使用它可以很方便對頁面中的任意元素進行計數,實現類似于有序列表的功能。與有序列表相比,突出特性在于可以對任意元素計數,同時實現個性化計數。

          css3特效_CSS3彈跳Loading加載動畫特效的實現

          今天給大家分享一款非常常用的css 加載動畫,這款CSS3 Loading動畫主要由幾個小球通過規律的上下跳動,漸隱漸顯而成,效果十分不錯。尤其在移動端中使用,基本代替了圖片來實現加載的效果。

          CSS3中一些鮮為人知的屬性

          CSS3是CSS(層疊樣式表)技術的升級版本,CSS3規范里的元素能以不同速度向前發展,因為不同的瀏覽器廠商只支持給定特性。這篇文章主要整理一些關于css3中的鮮為人知的屬性

          CSS3 動畫性能優化

          CSS3 動畫給 Web 的用戶體驗帶來了巨大提升,本文將嘗試從瀏覽器渲染的角度,來解析動畫優化的原理及其技巧。為大家提供一些動畫性能優化的參考。

          css3實現背景圖片顏色修改的多種方式

          css3可以改變圖片的顏色了。從此再也不用設計出多張圖,而且隨時可以修改。下面就簡單介紹下css3中是如何做到改變背景圖片的顏色效果的。

          純css3實現餅狀圖

          網頁中,有時候會碰到餅狀圖的需求,比如統計圖表,進度指示器,定時器等,實現方式也是各種各樣,現在也有不少現成的js庫,可以直接拿來使用,方便很多。這里筆者為大家演示一種純css實現餅狀圖效果的方法。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网