按鈕添加呼吸燈效果

原創

2020-02-21 11:19

在頁面中添加一個提交按鈕

<body>
<div class="submit_style">
   <input type="submit" class="submit" value="登錄"/>
</div>
</body>

下面進行樣式設計。大小高寬就不說了，直奔重點

    border-radius:6px;  /*圓角*/
    cursor:pointer;     /*光標形狀，pointer爲一隻手的形狀*/
    margin:40px auto;   /*邊距*/
    border:1px solid #2b92d4;       /*按鈕邊框設置*/
    color:#fff;        /*文字顏色*/
    font-size:20px;    /*文字大小*/
    text-align:center;  /*居中顯示*/
    box-shadow:0 1px 2px rgba(0,0,0,.3);  /*邊框陰影設置*/
    overflow:hidden;

    /*線性漸變語法：
    background-image:-webkit-gradient(type,x1 y1, x2 y2, from(開始顏色值),to(結束顏色值), [color-stop(偏移量小數,停靠顏色值),…] );
        type:line   -->表示漸變爲線性
        x1,x2,y1,y2     -->漸變座標，x1=x2垂直變換,y1=y2左右變換
    */
    background-image:-webkit-gradient(linear,left top,left bottom,from(#6cc3fe),to(#21a1d0));       /*上下垂直漸變*/

    /*規定動畫變換速度：ease-in-out -->動畫以低速開始和結束 */
    -webkit-animation-timing-function:ease-in-out;

    /*爲 @keyframes 動畫規定一個名稱*/
    -webkit-animation-name:submit;

    /*完成一個動畫所需時間*/
    -webkit-animation-duration:2500ms;

    /*規定動畫播放次數：infinite爲無限次*/
    -webkit-animation-iteration-count:infinite;

    /*規定動畫播放方式：alternate爲輪流反向播放*/
    -webkit-animation-direction:alternate;

動畫創建好了以後，再進行呼吸效果的實現

@-webkit-keyframes submit {
    0% {
        opacity:.4;     /*元素不透明級別*/
        box-shadow:0 1px 2px rgba(255,255,255,0.1);
    }
    100% {
        opacity:1;
        border:1px solid rgba(59,235,235,2);
        box-shadow:0 1px 30px rgba(59,255,255,2);
    }
}