1. <i id="s6b2k"><small id="s6b2k"></small></i>
    <b id="s6b2k"><bdo id="s6b2k"></bdo></b>
  2. <wbr id="s6b2k"></wbr>

    CSS3常見動畫的實現方式_css3_CSS_網頁制作

    來源:腳本之家  責任編輯:小易  

    一、是什么

    CSS動畫(CSS Animations)是為層疊樣式表建議的允許可擴展標記語言(XML)元素使用CSS的動畫的模塊

    即指元素從一種樣式逐漸過渡為另一種樣式的過程

    常見的動畫效果有很多,如平移、旋轉、縮放等等,復雜動畫則是多個簡單動畫的組合

    css實現動畫的方式,有如下幾種:

    transition 實現漸變動畫 transform 轉變動畫 animation 實現自定義動畫

    二、實現方式

    transition 實現漸變動畫

    transition的屬性如下:

    property:填寫需要變化的css屬性 duration:完成過渡效果需要的時間單位(s或者ms) timing-function:完成效果的速度曲線 delay: 動畫效果的延遲觸發時間
     

    其中timing-function的值有如下:

    描述
    linear 勻速(等于 cubic-bezier(0,0,1,1))
    ease 從慢到快再到慢(cubic-bezier(0.25,0.1,0.25,1))
    ease-in 慢慢變快(等于 cubic-bezier(0.42,0,1,1))
    ease-out 慢慢變慢(等于 cubic-bezier(0,0,0.58,1))
    ease-in-out 先變快再到慢(等于 cubic-bezier(0.42,0,0.58,1)),漸顯漸隱效果
    cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值

    注意:并不是所有的屬性都能使用過渡的,如display:none<->display:block

    舉個例子,實現鼠標移動上去發生變化動畫效果

    <style>
           .base {
                width: 100px;
                height: 100px;
                display: inline-block;
                background-color: #0EA9FF;
                border-width: 5px;
                border-style: solid;
                border-color: #5daf34;
                transition-property: width, height, background-color, border-width;
                transition-duration: 2s;
                transition-timing-function: ease-in;
                transition-delay: 500ms;
            }
    
            /*簡寫*/
            /*transition: all 2s ease-in 500ms;*/
            .base:hover {
                width: 200px;
                height: 200px;
                background-color: #5daf34;
                border-width: 10px;
                border-color: #3a8ee6;
            }
    </style>
    <div ></div>

    transform 轉變動畫

    包含四個常用的功能:

    translate:位移 scale:縮放 rotate:旋轉 skew:傾斜

    一般配合transition過度使用

    注意的是,transform不支持inline元素,使用前把它變成block

    舉個例子

    <style>
        .base {
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: #0EA9FF;
            border-width: 5px;
            border-style: solid;
            border-color: #5daf34;
            transition-property: width, height, background-color, border-width;
            transition-duration: 2s;
            transition-timing-function: ease-in;
            transition-delay: 500ms;
        }
        .base2 {
            transform: none;
            transition-property: transform;
            transition-delay: 5ms;
        }
    
        .base2:hover {
            transform: scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
        }
    </style>
     <div ></div>

    可以看到盒子發生了旋轉,傾斜,平移,放大

    animation 實現自定義動畫

    animation是由 8 個屬性的簡寫,分別如下:

    屬性 描述 屬性值
    animation-duration 指定動畫完成一個周期所需要時間,單位秒(s)或毫秒(ms),默認是 0  
    animation-timing-function 指定動畫計時函數,即動畫的速度曲線,默認是 "ease" linear、ease、ease-in、ease-out、ease-in-out
    animation-delay 指定動畫延遲時間,即動畫何時開始,默認是 0  
    animation-iteration-count 指定動畫播放的次數,默認是 1  
    animation-direction 指定動畫播放的方向 默認是 normal normal、reverse、alternate、alternate-reverse
    animation-fill-mode 指定動畫填充模式。默認是 none forwards、backwards、both
    animation-play-state 指定動畫播放狀態,正在運行或暫停。默認是 running running、pauser
    animation-name 指定 @keyframes 動畫的名稱  

    CSS 動畫只需要定義一些關鍵的幀,而其余的幀,瀏覽器會根據計時函數插值計算出來,

    通過 @keyframes 來定義關鍵幀

    因此,如果我們想要讓元素旋轉一圈,只需要定義開始和結束兩幀即可:

    @keyframes rotate{
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(360deg);
        }
    }

    from 表示最開始的那一幀,to 表示結束時的那一幀

    也可以使用百分比刻畫生命周期

    @keyframes rotate{
        0%{
            transform: rotate(0deg);
        }
        50%{
            transform: rotate(180deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }

    定義好了關鍵幀后,下來就可以直接用它了:

    animation: rotate 2s;

    三、總結

    屬性 含義
    transition(過度) 用于設置元素的樣式過度,和animation有著類似的效果,但細節上有很大的不同
    transform(變形) 用于元素進行旋轉、縮放、移動或傾斜,和設置樣式的動畫并沒有什么關系,就相當于color一樣用來設置元素的“外表”
    translate(移動) 只是transform的一個屬性值,即移動
    animation(動畫) 用于設置動畫屬性,他是一個簡寫的屬性,包含6個屬性

    以上就是CSS3常見動畫的實現方式的詳細內容,更多關于CSS3 動畫的實現的資料請關注真格學網其它相關文章!


  3. 本文相關:
  4. css3制作的背景漸變動畫效果
  5. css3實現的天氣圖標動畫效果
  6. 純css3精美3d卡片翻轉動畫特效
  7. css3通過var()和calc()函數實現動畫特效
  8. css3實現的六邊形波紋加載動畫特效源碼
  9. css3過渡旋轉透視2d3d動畫等效果的實例代碼
  10. 純css3實現圓圈動態發光特效動畫的示例代碼
  11. 鼠標懸停圖文列表css3動畫特效代碼
  12. 純css3實現的人物飛行初始頁加載動畫特效源碼
  13. css3動畫有哪些實現方式?
  14. css3過渡和css3動畫它們都能實現動畫效果,只是寫...
  15. css3實現動畫效果有哪些屬性
  16. 怎么實現,網頁里有CSS3動畫效果
  17. 怎么實現html5 css3 動畫效果
  18. css3過渡和css3動畫制作的動畫有什么區別
  19. css3動畫實現原則?
  20. css3 實現動畫效果,怎樣使他無限循環動下去?
  21. 如何利用CSS3動畫實現彈跳效果
  22. 請問做好一個css3動畫后,如何實現讓動畫持續一定...
  23. 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全主頁網頁制作csscss3css3純css3實現的人物飛行初始頁加載動畫特效源碼css教程css3div+css教程web標準教程瀏覽器兼容教程css布局實例css3的transform中scale縮放詳解純css繪制漂亮的圓形圖案效果css3通過scale()、rotate()實現放大、旋轉純css實現聊天框小尖角、氣泡效果css3 icon font完全指南(css3 font 會取代icon圖標)css3實現div圓角效果完整代碼 css3實現背景顏色漸變讓圖片不再是唯一的實現方式8款精美的css3表單設計(登錄表單/下拉選擇/按鈕附演示css3 media queries(響應式布局可以讓你定制不同的分使用css3背景漸變中的透明度來設置不同顏色的背景漸變css3 制作的圖片滾動效果css3常見動畫的實現方式css3實現的水平標題菜單css3 實現的圖片懸停的切換按鈕css3實現三角形不斷放大效果css3實現背景圖片顏色修改的多種方式css3 制作的懸停縮放特效css3 制作的書本翻頁特效css3 制作的彩虹按鈕樣式css3制作的背景漸變動畫效果
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.yu113.com All Rights Reserved
    战天txt全集下载