vue中使用css变量实现动态改变爱心颜色

最新推荐文章于 2024-08-19 08:00:00 发布

凛冬将至弋

最新推荐文章于 2024-08-19 08:00:00 发布

阅读量2.4k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/a15206087013/article/details/103146853

版权

一.需求

需要定时更改显示的样式的颜色,实现爱心流星雨的颜色实时变化

二.实现

需要使用到css变量，js的 document.body.style.setProperty函数
需要在data中定义两个属性
timer:’’,
value:0
在生命周期钩子mounted中进行添加定时器操作 this.timer = setInterval(this.get, 1000)
这样初始化时就会创建一个定时器，1000ms = 1s，则每秒都会运行 this.get函数
至于get函数，在methods中定义
get: function () {
this.value = this.value + 1
}

之后定义一个监听watch

 watch: {
    value: function (value) {
      // 当value发生变化,ok
      if (value % 5 === 0) {
        this.show = true
        var colorList = [ '#ff6666', '#87CEFF', '#483D8B', '#AEEEEE', '#7CCD7C', '#DDA0DD', '#EEB4B4', '#EE9A00' ]
        var num = Math.floor(Math.random() * 8)
        document.body.style.setProperty('--color', colorList[num])
      }
    }
  }

每隔5秒自动设置css变量 --color值为colorList中随机一个

调用: 在style中

.star::before {
  transform: rotate(-45deg);
  background-image: linear-gradient(90deg, var(--color), var(--color));
}
.star::after {
  transform: rotate(45deg);
  background-image: linear-gradient(0deg, var(--color), var(--color));
}