3个好看的 button动画效果

懒羊羊大王呀

已于 2024-08-22 22:40:25 修改

阅读量452

点赞数 9

分类专栏： js 前端 CSS-效果文章标签：前端 javascript html5 css3 动画

于 2024-08-17 12:53:28 首次发布

本文链接：https://blog.csdn.net/m0_73777400/article/details/141272765

版权

CSS-效果同时被 3 个专栏收录

9 篇文章 1 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

3个好看的 button动画效果

今天，我将与大家分享我最近完成的一个项目——三个按钮的动画效果。

通过精心设计的CSS3动画，结合JavaScript的动态交互，我们能够创造出既美观又实用的用户界面元素。这些动画效果不仅能够提升用户体验，还能增强网页的吸引力和专业感。

无论你是前端开发的新手，还是经验丰富的老手，我相信你都能从这篇文章中获得一些灵感和技巧。让我们一起探索如何用代码创造出令人惊叹的视觉效果，让静态的网页变得生动起来。

第一个button的效果为：点击按钮会有光圈的效果；
第二个button的效果为：鼠标悬停会有波浪效果；
第三个button的效果为：鼠标悬停会有光晕及渐变的效果。

视频演示如下：

3个button标签

源代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>按钮特效</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      font: "sans-serif";
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-color: #040d15;
    }

    .container {
      width: 200px;
      height: 100px;
      margin: 50px;
      text-align: center;
      border: none;
    }

    button {
      position: relative;
      width: 200px;
      height: 80px;
      border: none;
      border-radius: 40px;
      text-align: center;
      line-height: 80px;
      color: #fff;
      font-size: 22px;
      letter-spacing: 2px;
      user-select: none;
    }

    button:hover {
      cursor: pointer;
    }

    /* button1开始 */
    .button1 {
      background: linear-gradient(to right, #0162c8, #55e7fc);
      overflow: hidden;
    }

    .button1 span {
      position: absolute;
      display: block;
      /* 元素居中 */
      transform: translate(-50%, -50%);
      border-radius: 150px;
      background-color: #fff;
      animation: ripple .8s linear infinite;
    }

    @keyframes ripple {
      0% {
        width: 0;
        height: 0;
        opacity: .5;
      }

      100% {
        width: 500px;
        height: 500px;
        opacity: 0;
      }
    }

    /* button1结束 */

    /* button2开始 */
    .button2 {
      position: relative;
      border: 5px solid #086ecc;
      color: #086ecc;
      font-weight: 700;
      text-align: center;
      overflow: hidden;
    }

    .button2::before {
      content: "";
      position: absolute;
      top: 100%;
      left: -50%;
      width: 200%;
      border-radius: 40%;
      aspect-ratio: 1;
      background-color: rgba(85, 231, 252, 0.8);
    }

    .button2 p {
      /* 目的是防止文字被伪元素挤占位置 */
      width: 200px;
      height: 80px;
      position: absolute;
      top: -5px;
      left: -5px;
    }

    .button2:hover::before {
      background-color: rgba(85, 231, 252, 0.8);
      animation: rotation 4s linear infinite alternate;

    }

    @keyframes rotation {
      0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: .7;
      }

      100% {
        transform: translate(0, -80px) rotate(360deg);
        opacity: 1;
      }
    }

    /* button2结束 */

    /* button3开始 */
    .button3 {
      background: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
      background-size: 400%;
    }

    .button3::before {
      content: "";
      position: absolute;
      left: -1%;
      top: -10%;
      z-index: -1;
      background: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
      background-size: 400%;
      border-radius: 30%;
      width: 100%;
      aspect-ratio: 2;
      filter: blur(20px);

    }

    .button3:hover::before {
      filter: blur(20px);
      animation: colors-gradient 8s ease infinite;
    }

    .button3:hover {
      animation: colors-gradient 8s ease infinite;
    }

    @keyframes colors-gradient {
      0% {
        background-position: 0%;
      }

      100% {
        background-position: 400%;
      }
    }

    /* button3结束 */
  </style>
</head>

<body>
  <div class="container"><button class="button1">BUTTON1</button></div>
  <div class="container"><button class="button2">
      <p>BUTTON2</p>
    </button></div>
  <div class="container"><button class="button3">BUTTON3</button></div>

</body>
<script>
  // button1 开始
  const button1 = document.querySelector('.button1');
  // 设置一个节流器,使得点击事件的最短触发间隔为1s
  let isReady = true;

  // 节流函数
  function handleClick(e) {
    if (isReady) {
      // e.clientX是获取点击点在浏览器窗口的x坐标, e.taerget是获取点击的元素左边缘的x坐标
      isReady = false;
      const x = e.clientX - e.target.offsetLeft;
      const y = e.clientY - e.target.offsetTop;
      const span = document.createElement("span");
      span.style.left = x + "px";
      span.style.top = y + "px";
      button1.appendChild(span);
      setTimeout(() => {
        span.remove();
        isReady = true;
      }, 800);
    } else return;
  };
  button1.addEventListener("click", handleClick);
  // button1 结束
</script>

</html>