css心跳動畫

標籤：otl   relative   pre   bsp   top   ota   order   parent   transform   

1、圖片無限放大縮小，類似心跳

css如下

   @keyframes scaleDraw {  /*定義主要畫面格、scaleDrew主要畫面格名稱*/            0%{                transform: scale(1);  /*開始為原始大小*/            }            25%{                transform: scale(1.6); /*放大1.1倍*/            }            50%{                transform: scale(1);            }            75%{                transform: scale(1.6);            }        }

元素css中寫上

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

2、元素或者圖片，類似波紋擴散動畫無限迴圈

html部分 <div class="parent">         <img src="...." alt="">         <span></span>         <span></span>     </div>

css部分　　　　.parent{           position: relative;           width: 200px;           height: 200px;       }       .parent img{           width: 200px;           height: 200px;           z-index: 0;       }        @keyframes biging{            0%{                transform: scale(1);                opacity: 0.5;              }            50%{                transform: scale(1.5);                  opacity: 0;   /*圓形放大的同時，透明度逐漸減小為0*/            }            100%{                transform: scale(1);                opacity: 0.5;            }        }        .parent span{            position: absolute;            width: 100px;            height: 100px;            left: 0;            bottom: 0;            background: #fff;            border-radius: 50%;            -webkit-animation: biging 3s linear infinite;            z-index: -1;        }        .parent span:nth-child(2){            -webkit-animation-delay: 2s; /*第二個span動畫需要延遲2秒*/        }

3、製作動畫相簿

重疊的圖片控制一張的透明度的無限迴圈變化

@keyframes picOpacit{            0%{                opacity: 0;            }            50%{                opacity: 1;            }            100%{                opacity: 0;            }        }        .pic2{            position: absolute;            width: 100px;            height: 100px;            left: 0;            top: 0;            -webkit-animation: picOpacity 3s ease-in-out infinite;        }

 4、載入的旋轉動畫

/*載入中動畫*/@keyframes rotate{    0%{        transform:rotate(0deg);        -ms-transform:rotate(0deg);     /* IE 9 */        -moz-transform:rotate(0deg);     /* Firefox */        -webkit-transform:rotate(0deg); /* Safari oí Chrome */        -o-transform:rotate(0deg);    }    100%{        transform:rotate(360deg);        -ms-transform:rotate(360deg);     /* IE 9 */        -moz-transform:rotate(360deg);     /* Firefox */        -webkit-transform:rotate(360deg); /* Safari oí Chrome */        -o-transform:rotate(360deg);    }}.notLoad img{    position: relative;    top: .05rem;    margin-right: 3px;    width: .32rem;    height: .32rem;    -webkit-animation: rotate 2s ease-in-out infinite;}

 

css心跳動畫