[CSS3] 製作一個閃動的按鈕 (a flashing button)


話不多說,
先來看動畫效果:按鈕閃爍

DEMO





好了,來看要怎麼完成這樣的效果吧。
代碼如下。
 

HTML

<button type="button" class="webgolds flash-button">我是一個閃動的按鈕</button>
 

CSS

.flash-button{
    background:red;
    padding:5px 10px;
    color:#fff;
    border:none;
    border-radius:5px;
    
    animation-name: flash;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    //Firefox 1+
    -webkit-animation-name: flash;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    //Safari 3-4
    -moz-animation-name: flash;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
}

@keyframes flash {  
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}

//為了支持舊版瀏覽器 Firefox 1+, 加入-webkit和-moz css前綴
@-webkit-keyframes flash {  
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}

//為了支持舊版瀏覽器 Safari 3-4, 加入-webkit和-moz css前綴
@-moz-keyframes flash {  
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}



再來看另一個範例。圓形閃動效果

DEMO
 
 

HTML
<span class="flashing webgolds"></span>

CSS
.flashing{
    background:red;
    width:20px;height:20px; /*正圓形,所以寬與高都設一樣*/
    padding:5px 10px;
    color:#fff;
    border:none;
    border-radius:99em;
    display:inline-block;
    animation-name: flash;
    animation-duration: 1.8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    /* Chrome 4+, Safari 4+, Opera 15+ */
    -webkit-animation-name: flash;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
  -webkit-box-shadow: 0 0 33px #B20000;
  
    /* Firefox 5+ */
    -moz-animation-name: flash;
    -moz-animation-duration: 0.7s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
  -moz-box-shadow: 0 0 3px #B20000;
}

@keyframes flash {  
    0% { opacity: 1.0 }
    50% { opacity: 0.5 }
    100% { opacity: 1.0 }
}

/* Chrome 4+, Safari 4+, Opera 15+ */
@-webkit-keyframes flash {  
    0% { opacity: 1.0 }
    50% { opacity: 0.5 }
    100% { opacity: 1.0 }
}

/* Firefox 5+ */
@-moz-keyframes flash {  
    0% { opacity: 1.0 }
    50% { opacity: 0.5 }
    100% { opacity: 1.0 }
}


jsfiddle.net/xkc0g2Lk/

回上一頁

相關文章:

喜歡這篇文章嗎?立即分享

Posted : / Views: 1306
Last updated :2017-07-01