移动端css实现元素融合按钮、动画滑动按钮（svg实现-更简易）

最新推荐文章于 2024-04-25 16:25:52 发布

QTY66666

最新推荐文章于 2024-04-25 16:25:52 发布

阅读量288

点赞数

分类专栏： svg filter 融合文章标签： css 动画 html

本文链接：https://blog.csdn.net/m0_49986452/article/details/120530620

版权

filter 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

融合

2 篇文章 0 订阅

订阅专栏

svg

1 篇文章 0 订阅

订阅专栏

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    html,
    body {
      margin: 0;
    }

    .base {
      background: #000;
      position: absolute;
      height: 100%;
      width: 100%;
    }

    .container {
      /* 这里id是svg中filter标签上的id*/
      filter: url(#gooey);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #61F8FF;
      width: 283px;
      height: 49px;
      position: absolute;
      border-radius: 24px;
    }

    .btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      background: #fff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <!-- svg yyds -->
  <svg xmlns="http://www.w3.org/2000/svg" style="display:none" version="1.2" class="svg-flt">
    <defs>
      <filter id="gooey">
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"></feGaussianBlur>
        <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo">
        </feColorMatrix>
        <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
      </filter>
    </defs>
  </svg>
  <!-- 使用svg后文字也能写在按钮内部真爽 -->
  <!-- 元素融合对渐变透明色不友好，使用rgba超过0.5透明就开始扭曲。解决方案就是使用opacity -->
  <!-- （背景、融合效果）和操作独立开即可。 -->
  <div class="base">
    <div class="container">
      <div class="btn" id="btn">按钮</div>
    </div>

  </div>
  <script>
    const btnEl = document.getElementById("btn");
    btnEl.addEventListener("touchstart", (e) => {
      btnEl.style.transform = 'translate(-50%,-150%)'
      btnEl.style.color = '#fff'
      btnEl.style.background = '#61F8FF'
    })
    btnEl.addEventListener("touchmove", (e) => {
      e.preventDefault();//阻止默认事件 不然屏幕会被拖动
      btnEl.style.left = e.touches[0].clientX - (btnEl.clientWidth) + 'px';
    })
    btnEl.addEventListener("touchend", (e) => {
      //因为高斯模糊的原因 按钮会看上去比较原尺寸大 使用scale来缩放（全靠感觉）。
      btnEl.style.transform = 'translate(-50%,-50%) scale(90%)'
      btnEl.style.color = '#000'
      btnEl.style.background = "#fff";
    })
  </script>
</body>
</html>

QTY66666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
移动端css实现元素融合按钮、动画滑动按钮（svg实现-更简易）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum
复制链接

扫一扫