移动端css实现元素融合按钮、动画滑动按钮（filter实现）

最新推荐文章于 2023-07-27 14:33:28 发布

QTY66666

最新推荐文章于 2023-07-27 14:33:28 发布

阅读量565

点赞数

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

本文链接：https://blog.youkuaiyun.com/m0_49986452/article/details/120530771

版权

filter 同时被 2 个专栏收录

2 篇文章

订阅专栏

融合

2 篇文章

订阅专栏

<!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;
      filter: contrast(20);
      position: absolute;
      height: 100%;
      width: 100%;
    }

    .root {
      position: absolute;
      width: 283px;
      height: 49px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .container {
      background: #61F8FF;
      filter: blur(3px);
      width: 283px;
      height: 49px;
      position: absolute;
      border-radius: 24px;
    }

    .btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(90%);
      width: 40px;
      height: 40px;
      transition: transform .1s;
    }

    .round {
      width: 40px;
      height: 40px;
      background: #fff;
      border-radius: 50%;
      filter: blur(3px);
    }

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

<body>
  <!--  给父级元素设置filter: contrast(20)图像对比度，
        可以让子元素设置filter:blur(3px)的模糊不模糊，但实际尺寸会略大 
  -->
  <div class="base">
    <!-- 固定一片区域给按钮容器和按钮做定位！！！必须定位，不然是糊的，
        给·按钮容器·和·需要与容器接触的元素·设置设置filter:blur()后;//高斯模糊
         当2元素接触时就会产生融合效果
    -->
    <div class="root">
      <!-- 按钮容器 -->
      <div class="container"></div>
      <!-- 多套一层用于定位 -->
      <!-- 按钮 -->
      <div class="btn" id='btn'>
        <!-- 文字和圆圈必须是分开的，不然会因为模糊度导致文字扭曲 -->
        <!-- 设置模糊的元素 -->
        <div class="round" id="round"></div>
        <div class="text">按钮</div>
      </div>
    </div>

  </div>
  <script>
    const btnEl = document.getElementById("btn");
    const roundEl = document.getElementById("round");
    btnEl.addEventListener("touchstart", (e) => {
      btnEl.style.transform = 'translate(-50%,-150%)'
      btnEl.style.color = '#fff'
      roundEl.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'
      roundEl.style.background = "#fff";
    })
  </script>
</body>
</html>