CSS中實現動畫效果-附案例

51CTO博客   發布時間:2022-02-25 14:35:03   作者:酷爾。   我要評論
這篇文章主要介紹了 CSS中實現動畫效果并附上案例代碼及實現效果,就是CSS動畫樣式處理,動畫聲明需要使用@keyframes name,后面的name是人為定義的動畫名稱,下面我們來看看文章的具體實現內容吧,需要的小伙伴可以參考一下

一、什么是動畫?

動畫就是一幀又一幀圖片,按順序展現在人的眼前,但是由于人的視覺反應不過來就會產生圖畫動起來的效果。

二、動畫動作

1.動畫的聲明@keyframes name

動畫聲明需要使用@keyframes name,后面的name是人為定義的動畫名稱

 @keyframes move {

     0% {

         transform: translate(0, 0);

     }



     25% {

         transform: translate(1000px, 0px);

     }



     50% {

         transform: translate(1000px, 400px);

     }



     75% {

         transform: translate(0px, 400px);

     }



     100% {

         transform: translate(0, 0);

     }

 }

2.動畫的動作

在以上代碼中,{}內包含的就是動畫的動作,每一個完整的動畫都會一定的時間,其中

意思是每達到時間的百分之多少就向某狀態進行轉變。

三、動畫屬性

<!-- 

    動畫屬性有很多種

    div {

        動畫的名稱(必須要有)

        animation-name: move;

        動畫的運動曲線(linear是勻速stept()是分步)

        animation-timing-function: linear;

        動畫的運動時間

        animation-duration: 3s;

        動畫的運動次數(infinite是無限循環)

        animation-iteration-count: infinite;

        動畫的開始時間

        animation-delay: 1s;

        動畫是否逆序播放

        animation-direction: alternate;



    }

    動畫播放期間觸碰暫停

    div:hover {

        animation-play-state: paused;

    }

    動畫播放完畢是否回到初始位置

    animation-fill-mode: forwards;(不回到初始位置)

    backwards(回到初始位置)

 -->

1.代碼示例

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        @keyframes move {

            0% {

                width: 0;

                height: 0;

            }



            100% {

                width: 300px;

                height: 300px;

            }

        }



        div {

            margin: 200px auto;

            /* width: 300px;

            height: 300px; */

            background-color: darkviolet;

            animation-name: move;

            animation-timing-function: linear;

            animation-duration: .4s;

            animation-iteration-count: infinite;

            animation-delay: 1s;

            animation-direction: alternate;

            animation-fill-mode: forwards;

        }



        div:hover {

            animation-play-state: paused;

        }

    </style>

</head>



<body>

    <div></div>

</body>



</html>

2.效果展示

四、項目案例

1.奔跑的小熊

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <!-- 

        每一幀圖片連接到一塊就組成了一個動畫

     -->

    <style>

        body {

            position: relative;

            background-color: gray;

        }



        @keyframes bear {

            0% {

                background-position: 0px 0px;

            }



            100% {

                background-position: -1600px 0px;

            }

        }



        @keyframes bgcmove {

            0% {

                left: 0;

            }



            100% {

                left: 50%;

                transform: translateX(-50%);

            }

        }



        @keyframes mountains {

            0% {

                background-position: 0px 0px;

            }



            100% {

                background-position: -3840px 0px;

            }

        }



        .mountain {

            /* 

            這里定位定到父類的底部,得不到想要的結果

             */

            position: absolute;

            bottom: -601px;

            width: 100%;

            height: 200px;

            background-image: url(../bg1.png);

            animation: mountains 8s linear infinite;

        }



        .nav {

            position: absolute;

            bottom: -601px;

            width: 200px;

            height: 100px;

            background-image: url(../bear.png);

            /* background-size: 100% 100%; */

            /* animation: name duration timing-function delay iteration-count direction fill-mode; */

            /* 值得注意的是steps與linear不可以混合使用 */

            animation: bear .8s steps(8) infinite, bgcmove 3s linear forwards;

        }

    </style>

</head>



<body>

    <div class="mountain"></div>

    <div class="nav"></div>



</body>



</html>

2.城市熱點圖

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        body {

            background-color: #333;

        }



        .map {

            position: relative;

            width: 747px;

            height: 616px;

            background: url(../map.png) no-repeat;

            margin: 0 auto;

        }



        .city {

            position: absolute;

            top: 227px;

            right: 193px;

            color: #fff;

        }



        .tb {

            top: 500px;

            right: 80px;

        }



        .dotted {

            width: 8px;

            height: 8px;

            background-color: #09f;

            border-radius: 50%;

        }



        .city div[class^="pulse"] {

            /* 保證我們小波紋在父盒子里面水平垂直居中 放大之后就會中心向四周發散 */

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            width: 8px;

            height: 8px;

            box-shadow: 0 0 12px #009dfd;

            border-radius: 50%;

            animation: pulse 1.2s linear infinite;

        }



        .city div.pulse2 {

            animation-delay: 0.4s;

        }



        .city div.pulse3 {

            animation-delay: 0.8s;

        }



        @keyframes pulse {

            0% {}



            70% {

                /* transform: scale(5);  我們不要用scale 因為他會讓 陰影變大*/

                width: 40px;

                height: 40px;

                opacity: 1;

            }



            100% {

                width: 70px;

                height: 70px;

                opacity: 0;

            }

        }

    </style>

</head>



<body>

    <div class="map">

        <div class="city">

            <div class="dotted"></div>

            <div class="pulse1"></div>

            <div class="pulse2"></div>

            <div class="pulse3"></div>

        </div>

        <div class="city tb">

            <div class="dotted"></div>

            <div class="pulse1"></div>

            <div class="pulse2"></div>

            <div class="pulse3"></div>

        </div>

    </div>

</body>



</html>

小熊奔跑,背景及小熊:

到此這篇關于 CSS中實現動畫效果-附案例的文章就介紹到這了,更多相關 CSS中實現動畫效果內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

相關文章

  • CSS3 Tab動畫實例之背景切換動態效果

    這篇文章主要介紹了CSS3 Tab動畫實例之背景切換動態效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-08-20
  • css3制作的背景漸變動畫效果

    這篇文章主要介紹了css3實現的加載動畫效果,幫助大家更好的利用css3制作網頁,感興趣的朋友可以了解下
    2021-04-07
  • css3實現的天氣圖標動畫效果

    這篇文章主要介紹了css3實現的天氣圖標動畫效果,幫助大家更好的利用css3制作網頁,感興趣的朋友可以了解下
    2021-04-06
  • 簡單的css文字動畫效果

    這篇文章主要介紹了css文字動畫效果如何實現,幫助大家更好的理解和學習使用css,感興趣的朋友可以了解下
    2021-04-06
  • 使用CSS3 backface-visibility屬性制作3D翻轉動畫效果

    使用CSS3 backface-visibility屬性制作翻轉動畫效果,非常不錯,喜歡的朋友快來下載體驗吧
    2021-02-18
  • css實現快速炫酷抖動動畫效果

    這篇文章主要介紹了css實現快速炫酷抖動動畫效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-01-29
  • css3動畫鼠標放上圖片逐漸變大鼠標離開圖片逐漸縮小效果

    這篇文章主要介紹了css3動畫鼠標放上圖片逐漸變大鼠標離開圖片逐漸縮小,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-01-27

最新評論

免费人成视频在线观看