请问这2个效果是怎样实现的？有没有demo呢？粉色那个圈是轮播图的跑马灯指示器。我想用el-carousel来做的话。默认的是横条。我该在原来的基础上改写吗？还是把默认的隐藏。自己另外写一个放上去呢？如图：链接： http://www.clevermama.com.cn/

请问这2个css效果是怎样实现的？有没有demo呢？

发布于
2020-10-20

更新于
2020-10-22

圆圈和弧线是这样画的：
我把代码放codepen了，链接：https://codepen.io/cuteyangyang/pen/gOMwaLN

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    .canvas-wrapper {
      background: #666;
      width: 300px;
      height: 150px;
    }
  </style>
</head>
<body>

<div class="canvas-wrapper">
  <canvas id="my-canvas" width="300" height="150"></canvas>
</div>
<script>
  var canvas = document.getElementById("my-canvas");
  var ctx = canvas.getContext("2d");

  演示()

  function 演示() {

    开始绘制()
    setTimeout(清除, 2100)

    setInterval(function () {
      开始绘制()
      setTimeout(清除, 2100)
    }, 3000)
  }


  function 开始绘制() {
    画实心圆()

    var 初始角度 = -0.5 * Math.PI
    var 动画时间 = 2   // 秒
    弧线动画(初始角度, 动画时间)
  }

  function 画实心圆() {
    ctx.beginPath()
    ctx.arc(100, 75, 50, 0, 2 * Math.PI)
    ctx.fillStyle = "#EC6CA5"
    ctx.closePath()
    ctx.fill()
  }

  function 弧线动画(初始角度, 动画时间) {
    var 起始角度 = 初始角度
    var 渲染间隔时间 = 1000 / 60   // 每秒60帧
    var 每次增加角度 = 2 * Math.PI / ((动画时间 * 1000) / 渲染间隔时间)

    var timer = setInterval(画弧线, 渲染间隔时间)

    function 画弧线() {
      结束角度 = 起始角度 + 每次增加角度
      ctx.beginPath();
      ctx.arc(100, 75, 50, 起始角度, 结束角度);
      ctx.strokeStyle = "#ffffff"
      ctx.lineWidth = 2
      ctx.stroke()
      起始角度 = 结束角度

      if (结束角度 - 初始角度 >= 2 * Math.PI) {
        clearInterval(timer)
      }

      console.log(结束角度)
    }
  }

  function 清除() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
  }

</script>
</body>
</html>

raohong

1.3k1711

发布于
2020-10-20

https://codesandbox.io/s/recu...

圆圈，关键点是 stroke-dashoffset + stroke-dasharray

箭头直接看他 animation 定义就可以了

粉色的圆圈可以f12 查看main.js 的CirCleProgress 这个方法看

箭头也可以f12查看css 样式，animation动画+图片

用el-carousel来做的话，我觉得无论是改还是隐藏放上去都不是很好处理（我没改过，个人觉得可以自己写一个）

zangeci

14.8k71731

发布于
2020-10-20

一定能要用css的画也是可以，圆很简单，主要是白边的动画，可以利用clip-path,但这个比较复杂，需要会绘制弧形路径，箭头就比较简单了，两个三角箭头而已，画箭头的方式可以用两边的border+transform，也可以用伪元素画两条边通过transform将两条边靠一起。通常还是做成图片吧，自己画恐怕不能百分百还原，UI不一定通过，最后还是要换成图片

请问这2个css效果是怎样实现的？有没有demo呢？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？

css布局怎么保证右边一直在可视范围内？