<acronym id="sqfc4"></acronym>
<output id="sqfc4"></output>
<acronym id="sqfc4"></acronym>
<pre id="sqfc4"></pre>

<p id="sqfc4"></p>
  • 迅騰網絡>圈子>建站知識> 圖片動態縮放代碼,css怎么實現圖片放大縮小動畫

    圖片動態縮放代碼,css怎么實現圖片放大縮小動畫

    熱度:172 / 2022-11-29 / 廊坊網站建設 / 建站知識

    示例1:

    1

    <div class="ballon"></div>

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    /*css部分*/

       @keyframes scaleDraw {  /*定義關鍵幀、scaleDrew是需要綁定到選擇器的關鍵幀名稱*/

                0%{

                    transform: scale(1);  /*開始為原始大小*/

                }

                25%{

                    transform: scale(1.1); /*放大1.1倍*/

                }

                50%{

                    transform: scale(1);

                }

                75%{

                    transform: scale(1.1);

                }

            }

        .ballon{

                width: 150px;

                height: 200px;

                background: url("images/balloon.png");

                background-size: 150px 200px;

                -webkit-animation-name: scaleDraw; /*關鍵幀名稱*/

                -webkit-animation-timing-function: ease-in-out; /*動畫的速度曲線*/

                -webkit-animation-iteration-count: infinite;  /*動畫播放的次數*/

                -webkit-animation-duration: 5s; /*動畫所花費的時間*/

            }

    上面的幾個屬性也可以合在一起寫

    1

    2

    animation: scaleDraw 5s ease-in-out infinite;

    -webkit-animation: scaleDraw 5s ease-in-out infinite;

    效果:

    實例2:

    1

    2

    3

    4

    5

    <div class="live">

            <img src="images/live.png" alt="">

            <span></span>

            <span></span>

    </div>

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    .live{

               position: relative;

               width: 100px;

               height: 100px;

           }

           .live img{

               width: 100px;

               height: 100px;

               z-index: 0;

           }

            @keyframes living {

                0%{

                    transform: scale(1);

                    opacity: 0.5; 

                }

                50%{

                    transform: scale(1.5); 

                    opacity: 0;   /*圓形放大的同時,透明度逐漸減小為0*/

                }

                100%{

                    transform: scale(1);

                    opacity: 0.5;

                }

            }

            .live span{

                position: absolute;

                width: 100px;

                height: 100px;

                left: 0;

                bottom: 0;

                background: #fff;

                border-radius: 50%;

                -webkit-animation: living 3s linear infinite;

                z-index: -1;

            }

            .live span:nth-child(2){

                -webkit-animation-delay: 1.5s; /*第二個span動畫延遲1.5秒*/

            }

    實質就是就是利用了動畫的延遲屬性,兩層圓的動畫相關的屬性基本相同,除了最外層的圓多設置了animation-delay屬性

    返回列表頁>
    久久久久久久福利国产一级
    <acronym id="sqfc4"></acronym>
    <output id="sqfc4"></output>
    <acronym id="sqfc4"></acronym>
    <pre id="sqfc4"></pre>

    <p id="sqfc4"></p>