likes
comments
collection
share

不使用任何库做一个猫咪进度条，仅需2点CSS知识

作者站长头像
站长
· 阅读数 47

一起用代码吸猫！本文正在参与【喵星人征文活动】。

陌生人，你好！我是春哥🐶，一个梦想是摸鱼🐟的前端工程师。

效果图

让我们先看看，所谓的猫咪进度条，究竟长啥样？

不使用任何库做一个猫咪进度条，仅需2点CSS知识

哪3个知识点

为了节约您的时间，直接扔出答案：

  1. css属性: mask-image 蒙版
  2. css属性: transition 过渡 如果您已经了然于胸，可以不用继续向下看了😄

背景

当产品提出一些奇奇怪怪的设计时，我都内心通常都是😠😠😠😠拒绝的。 但是很奇怪，当他提出希望“进度条可以变成一只会动的喵咪”时，我都内心非但没有抵触，反而有一种相见恨晚的感觉。 为什么？ 因为喵咪实在太可爱了！

步骤一：原材料——一张gif图片

此时我们需要准备一只会动的喵咪图片，最好是纯黑色的。 如下：

不使用任何库做一个猫咪进度条，仅需2点CSS知识

至于这个图片应该怎么做？ 如果你有一点点PS基础，你一定可以通过扣图工具+油漆桶工具+时间轴完成制作的。 如果你没有，那就更简单了——找UI同事要。

步骤二：梳理思路

主体思路：使用mask-image蒙版勾勒出猫咪的样子, 再调整背后纯色的宽度完成进度显示。

不使用任何库做一个猫咪进度条，仅需2点CSS知识

  1. 通过纯色猫咪的前景蒙版，勾勒出猫咪的形状
  2. 通过transition调整后景的背景色位置，完成进度条的加载

步骤三：coding

因为一些原因，我选择了将前景与背景设为了两个不同的div，通过调整背景的left属性来完成进度条的加载。 其实一开始我是想通过一个div完成全部功能的，但因为遇到一些疑问，因此只好退而求其次，使用两层div。 （遇到的问题放到了文章末尾，希望有大佬可以帮忙解答下~） 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .target {
      position: relative;
      display: inline-block;
      width: 452px;
      height: 452px;
      -webkit-mask-image: url('./cat-mask.gif');
      mask-image: url('./cat-mask.gif');
      background-color: #e5e5e5;
    }
    .bg {
      position: absolute;
      background-color: red;
      top: 0;
      left: 100%;
      right: 0;
      bottom: 0;
      transition: left 3s ease-in-out;
      -webkit-transition: left 3s ease-in-out;
    }
  </style>
</head>
<body>
  <div>
    <button onclick="updatePercent(20)">给我涨</button>
    <button onclick="updatePercent(-20)">给我缩</button>    
  </div>
  <div class="target">
    <div class="bg"></div>
  </div>
</body>
<script>
  let currentPercent = 0
  const setPercent = (percent) => {
    const el = document.getElementsByClassName('bg')[0]
    el.style.left = `${100 - percent}%`
  }
  const updatePercent = (value) => {
    currentPercent = Math.min(100, Math.max(0, currentPercent + value))
    setPercent(currentPercent)
  }
</script>
</html>

遇到的问题

问题1：有没有什么办法让渐变色也进行transition过渡？

问题细节：起初我希望通过调整 background-image:linear-gradient(white 10%, red 12%, red 100%) 这种形式来完成进度条的宽度调整的，但遇到了background-image不属于transition有效内容标准的情况。因此，请问有没有办法让渐变色也进行transition过渡?

问题2：如何快捷更改::after伪元素的样式？

问题细节：在问题1的路走不通后，我立刻想到使用::after,但一时没找到特别好的直接更改伪元素样式，如果有大佬有好思路的话不妨指教一二，谢谢。

转载自:https://juejin.cn/post/7032243646514593806
评论
请登录