几个不错的CSS按钮闪烁动画

1,578次阅读
没有评论

共计 1517 个字符,预计需要花费 4 分钟才能阅读完成。

@-webkit-keyframes bigAssButtonPulse {from { background-color: #749a02; -webkit-box-shadow: 0 0 25px #333;}
      50% {background-color: #91bd09; -webkit-box-shadow: 0 0 50px #91bd09;}
      to {background-color: #749a02; -webkit-box-shadow: 0 0 25px #333;}
    }

    @-webkit-keyframes greenPulse {from { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333;}
      50% {background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09;}
      to {background-color: #749a02; -webkit-box-shadow: 0 0 9px #333;}
    }

    @-webkit-keyframes bluePulse {from { background-color: #007d9a; -webkit-box-shadow: 0 0 9px #333;}
      50% {background-color: #2daebf; -webkit-box-shadow: 0 0 18px #2daebf;}
      to {background-color: #007d9a; -webkit-box-shadow: 0 0 9px #333;}
    }

    @-webkit-keyframes redPulse {from { background-color: #bc330d; -webkit-box-shadow: 0 0 9px #333;}
      50% {background-color: #e33100; -webkit-box-shadow: 0 0 18px #e33100;}
      to {background-color: #bc330d; -webkit-box-shadow: 0 0 9px #333;}
    }

    @-webkit-keyframes magentaPulse {from { background-color: #630030; -webkit-box-shadow: 0 0 9px #333;}
      50% {background-color: #a9014b; -webkit-box-shadow: 0 0 18px #a9014b;}
      to {background-color: #630030; -webkit-box-shadow: 0 0 9px #333;}
    }

    @-webkit-keyframes orangePulse {from { background-color: #d45500; -webkit-box-shadow: 0 0 9px #333;}
      50% {background-color: #ff5c00; -webkit-box-shadow: 0 0 18px #ff5c00;}
      to {background-color: #d45500; -webkit-box-shadow: 0 0 9px #333;}
    }

    @-webkit-keyframes orangellowPulse {from { background-color: #fc9200; -webkit-box-shadow: 0 0 9px #333;}
      50% {background-color: #ffb515; -webkit-box-shadow: 0 0 18px #ffb515;}
      to {background-color: #fc9200; -webkit-box-shadow: 0 0 9px #333;}
    }

建议 animation 时间为 2.5~3 秒,比较有感觉

正文完
 
紫旭
版权声明:本站原创文章,由 紫旭 2019-08-22发表,共计1517字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)