巧用less循环加变量实现燃烧的蜡烛动画

本文参照网上的燃烧蜡烛实例，在vue-cli中使用less循环及变量实现，想学习less循环及变量使用的小伙伴可以参考一下

完整代码如下

<template><div class="test-container"><div class="g-candle"><div class="g-body"></div><div class="g-fire-box"><div class="g-fire"><div class="g-ball" v-for="item in 200" :key="item"></div></div></div></div></div>
</template><script>
export default {}
</script><style lang='less' scoped>
.test-container{height: 100%;background: #000;overflow: hidden;.g-candle {position: absolute;width: 400px;height: 400px;top: 50%;left: 50%;transform: translate(-50%, -50%);}.g-body {position: relative;width: 100px;height: 300px;margin: 280px auto;// border: 1px solid #fff;background: linear-gradient(230deg, #ca9800, #573903, black 70%);z-index: 1;&::before {position: absolute;content: "";width: 100px;height: 40px;border-radius: 50%;// border: 1px solid #fff;box-sizing: border-box;top: -20px;background: radial-gradient(#a46800, #5c3104 45%, #905602 100%);}&::after {position: absolute;content: "";width: 4px;height: 48px;background: #fff;left: 50%;top: -22px;transform: translate(-50%, -50%);border-radius: 50% 50% 0 0;background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .8) 60%, #fff);opacity: .7;filter: blur(1px);}}.g-fire-box {position: absolute;top: 97px;left: 50%;width: 80px;height: 200px;transform: translate(-50%, -50%);filter: blur(2px) contrast(20);}.g-fire {position: absolute;top: 30px;left: 50%;border-radius: 45%;box-sizing: border-box;border: 120px solid #000;border-bottom: 120px solid transparent;transform: translate(-50%, 0) scaleX(.45);background-color: #761b00;// filter: blur(20px) contrast(30);}.g-ball {position: absolute;top: 60px;transform: translate(0, 0);background: #fa8763;border-radius: 50%;z-index: -1;mix-blend-mode: screen;}.loop(@count) when (@count > 0) {.g-ball:nth-child(@{count}){@width: ~`Math.random()*50+'px'`;width: @width;height: @width;left: calc(~`Math.random()*100-60 +'px'`);}.g-ball:nth-child(@{count}){animation: movetop 1s linear ~`Math.random()*3000/1000+'s'` infinite;}.loop((@count - 1))}.loop(200);@keyframes movetop {0% {transform: translate(0, 0);}20% {transform: translate(0, 0);}87.7% {transform: translate(0, -170px);opacity: 0;}100% {transform: translate(0, -170px);opacity: 0;}}
}
</style>

项目参考地址：https://codepen.io/Chokcoco/pen/jJJbmz
注意事项：

1.less中使用随机函数需要引入js: ~`js语句`
2.vue-cli需要配置vue.config.js支持less中使用js，否则会报错css: {loaderOptions: {less: {lessOptions: {javascriptEnabled: true}}}},

巧用less循环加变量实现燃烧的蜡烛动画相关推荐

es6 循环加载ES6模块
循环加载ES6模块 "循环加载"(circular dependency)指的是,a脚本的执行依赖b脚本,而b脚本的执行又依赖a脚本. // a.js var b = requir ...
Python Turtle 绘图[难度2星]：一朵雪花（基础代码、加变量/加自定义函数优化）
2022年北京冬奥会开幕式上"一朵雪花"贯穿始终,给大家印象深刻.今天我们也让海龟来绘制一朵雪花.先绘制一朵普通雪花,在下一期分享中再让海龟来绘制一朵"中国结雪花&quo ...
vue 循环加载动态组件以及传值
今天遇到一个需求,某个页面是个动态页面,由多个子组件构成. 之前我们的做法是将N个需要的组件import进主页面,然后引用一下即可.但是现在遇到的问题是, 这个动态页面存在多个业务,有的业务需要某几个 ...
R 循环中将变量作为对象名
R 循环中将变量作为对象名 for (i in c("tmp1", "tmp2", "tmp3")) { print(i) } [1] &q ...
基于vue的公共looploading组件（vue循环加载--组件）
前些天做的组件,觉得挺有意思,上传到了github上 https://github.com/SwnCowDevil/my-looploading 说明: 一款基于vue的循环加载公共组件, 组件 ...
Vue本地图片循环加载显示不出来，vue img标签 :src地址拼接
Vue本地图片循环加载显示不出来,vue img标签 :src地址拼接上代码: <img:src="img"alt="banner" /> dat ...
java方法中的循环里的变量_Java中循环声明变量方法
Java循环声明变量之前想这样做,但是网上一直搜索不到,下面是我的方式项目中 // 得到需要查询外表的数量,然后分别创建缓存,插入数据多的时候如果编码在缓存里面,就不需要再去查询数据库了.key: ...
Linux 循环与变量
2019独角兽企业重金招聘Python工程师标准>>> shell中经常会遇到循环,总结一下常用的循环以及当循环的参数是变量的用法. 1 for循环用法循环的变量已知且不多时,可以 ...
MySQL limit后面加变量
如下所示MySQL存储过程中的一段代码,limit后面加了一个变量,而不是一个常量. DECLARE var_num1 INT ; SET var_num1=10; SELECT * FROM tes ...

巧用less循环加变量实现燃烧的蜡烛动画

巧用less循环加变量实现燃烧的蜡烛动画相关推荐

最新文章

热门文章