css动效代码（持续更新中。。。）

最新推荐文章于 2025-06-24 16:13:20 发布

原创最新推荐文章于 2025-06-24 16:13:20 发布 · 580 阅读

2 ·

CC 4.0 BY-SA版权

问题探究专栏收录该内容

10 篇文章

订阅专栏

本文分享了按钮动效的实践案例，包括悬浮球按钮的动态效果和闪光特效的实现，通过CSS动画让静态按钮更具吸引力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要更新一些按钮动效的实践。静态按钮往往不够吸引人，试试让它动起来吧～
悬浮球

 .susbension {
    position: fixed;
    top: 156px;
    right: 10px;
    z-index: 9;
    display: inline-block;
    width: 60px;
    height: 60px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 55%, rgba(240, 245, 255, 0.9), rgba(240, 245, 255, 0.9) 40%, rgba(225, 238, 255, 0.8) 60%, rgba(43, 130, 255, 0.4));
    border-radius: 100%;
    animation: bubble-anim 1.5s ease-in-out infinite alternate;

    &::before {
      position: absolute;
      top: 1%;
      left: 5%;
      z-index: 2;
      width: 90%;
      width: 40%;
      height: 90%;
      height: 80%;
      // background: radial-gradient(circle at top, white, rgba(255, 255, 255, 0) 58%);
      background: radial-gradient(circle at 130% 130%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 58%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);
      border-radius: 100%;
      transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);
      content: "";
      filter: blur(5px);
    }

    &::after {
      position: absolute;
      top: 5%;
      left: 10%;
      z-index: 2;
      display: block;
      width: 80%;
      height: 80%;
      background: radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 74%, white 80%, white 84%, rgba(255, 255, 255, 0) 100%);
      border-radius: 100%;
      transform: rotateZ(-30deg);
      content: "";
      filter: blur(1px);
    }

    .susbension-box {
      position: absolute;
      top: 7px;
      left: 11px;
      display: block;
      width: 37px;
      height: 46px;
      background-image: url(../../images/receiveCourse.png);
      background-size: contain;
      background-repeat: no-repeat;
      border-radius: 100%;
    }
  }

闪光特效

&::before {
      position: absolute;
      top: 0;
      width: 25px;
      height: 54px;
      background: #fff;
      opacity: 0.3;
      transform: skewX(-25deg);
      animation: light 1s ease-out infinite;
      content: '';
      }