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

Cejauh 发布于 2019-08-22 1759 次阅读


AI 摘要

想让你的网页按钮瞬间吸引注意力吗?本文将为你揭示几个绝妙的CSS按钮闪烁动画,这些动画通过大胆的颜色和光影效果,让你的按钮在屏幕上“跳动”起来。从脉动的绿色到炫目的红色,每种动画都能为用户带来惊艳体验。探索这些简单的代码示例,轻松为你的项目增添活力与个性!快来一起实现这些令人惊叹的效果吧!
@-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秒,比较有感觉

May we meet again.
最后更新于 2025-05-07