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

天下熙熙
  • 439

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

回复
阅读 968
4 个回答

圆圈和弧线是这样画的:
我把代码放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>

粉色的圆圈可以f12 查看main.js 的CirCleProgress 这个方法看
image.png
箭头也可以f12查看css 样式,animation动画+图片
image.png

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

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

宣传栏