美文网首页
利用CSS变量指定抽奖大转盘指针位置

利用CSS变量指定抽奖大转盘指针位置

作者: microkof | 来源:发表于2020-08-04 15:17 被阅读0次

前言

有这样一种情况,某些CSS3动画的效果依赖于后端传过来的不定值数据,这时候,怎样将后端数据注入到CSS3动画里呢?

可以使用CSS3变量。

范例

image.png

点击匀速转按钮,指针会以自身中心点为旋转点,进行匀速旋转,而且无限旋转下去。

当点击渐停按钮,也就是模拟服务器发来了中奖数据,比如180°方向是二等奖,服务器认定你中了二等奖,那么指针会旋转几圈,最终渐停到180°方向。

整体从匀速旋转到渐停,视觉效果要自然。怎么写?

代码

  <style>
    .img {
      margin: auto;
      width: 200px;
      height: 200px;
    }

    @keyframes rotate-linear {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(720deg);
      }
    }

    .rotate-linear {
      animation: rotate-linear .6s linear forwards infinite;
    }

    @keyframes rotate-stop {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(var(--target-deg));
      }
    }

    .rotate-stop {
      animation: rotate-stop 6s forwards ease-out;
    }
  </style>
  <img src="zhizhen.jpg" class="img">
  <button>匀速转</button> <button>渐停</button>
  <script>
    var flag = 0;
    var timer = null;
    document.getElementsByTagName('button')[0].onclick = function () {
      document.getElementsByTagName('img')[0].classList.add('rotate-linear');
      timer = setInterval(() => {
        if (flag === 1) {
          clearInterval(timer);
          document.getElementsByTagName('img')[0].classList.remove('rotate-linear');
          document.querySelector('body').style.setProperty('--target-deg', 3600 + 180 + 'deg');
          document.getElementsByTagName('img')[0].classList.add('rotate-stop');
        }
      }, 600);

    }
    document.getElementsByTagName('button')[1].onclick = function () {
      flag = 1;
    }
  </script>

CSS

一个匀速关键帧,0.6秒转一圈,一个渐停关键帧,用6秒时间从飞速旋转到渐停。

核心:transform: rotate(var(--target-deg));,尽管CSS中没有这个变量,但是没有关系,JS给body赋予这个变量就行了。

JS

点击按钮之后开始匀速旋转,每0.6秒查看一次flag有没有变化,点击渐停按钮后,flag会发生变化,此时去掉匀速旋转动画,加上渐停动画。

渐停动画的角度怎么定?假定180是服务器发回来的数据,意思是指针要停到180°位置。为什么要3600 + 180?因为渐停过程要6秒,所以要给足够的旋转角度,3600是我认为差不多的一个数字。

相关文章

  • 利用CSS变量指定抽奖大转盘指针位置

    前言 有这样一种情况,某些CSS3动画的效果依赖于后端传过来的不定值数据,这时候,怎样将后端数据注入到CSS3动画...

  • 使用vue作出锤子官方商城的3d-banner效果

    原理 利用js获取鼠标指针位置,根据位置计算偏转角度,通过设定css中transform的perspective/...

  • 2.3 链表(二)

    怎么写好链表代码 理解指针或引用的含义指针存储了指定变量的内存地址,通过指针就能找到这个变量p -> next =...

  • 55.跳棋

    和跳棋2的思路类似,也是利用左右指针来表示所能达到的位置。为了能正确的推出循环,利用两个变量来保存right 如果...

  • 整理常用CSS

    字体属性:(font) CSS文字属性: CSS边框空白 CSS符号属性: CSS背景样式: 指定背景位置 CSS...

  • C语言指针

    指针定义 指针:一个变量,其值为另一个变量的地址,即,内存位置的直接地址 指针定义格式 在使用指针存储其他变量地址...

  • 小程序的大转盘活动怎么做?

    日常生活中最常见的抽奖活动莫过于大转盘抽奖了吧,无论线上线下。大转盘抽奖活动具有多样性、并可开展基于粘性维护的活动...

  • php实现刮刮卡大转盘抽奖概率

    php实现刮刮卡大转盘抽奖概率 本文实例为大家分享了php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法,用法很简单...

  • Python seek和tell方法

    seek() 方法用于移动文件读取指针到指定位置。tell()返回文件中的位置。

  • * 与 & 以及二级指针

    *: 星号,用来声明指针的; &:连字号运算符,定义内存位置; 二级指针:指向指针的指针。 指针 指针是一个变量,...

网友评论

      本文标题:利用CSS变量指定抽奖大转盘指针位置

      本文链接:https://www.haomeiwen.com/subject/hmbrrktx.html