vue 流星的样式和流光canvas

流星的代码，发现挺好玩的，先上代码，后再分开解构样式：

<template><div class="index"><div class="star" style="top: 0px;left: 500px;"></div></div>
</template><script>
import { getUrlPara } from '@/utils/factory'
import Parallax from 'parallax-js'
import gsap from 'gsap'export default {name: 'kyUniverseTestPage',components: {},data(){return {}},async created() {},mounted(){},methods: {goGrap() {gsap.from("#titok", {duration: 1, x: 100});// gsap.fromTo('#titok',{width: 0, height: 0}, {duration: 1.5, width: 100, height: 200})// gsap.set("#titok", {rotationX: 360});},parallax(){if(this.parallaxIns){this.parallaxIns.destroy()this.parallaxIns = null}this.$nextTick(() =>{const innerDom = document.querySelector('.inner')console.log('innerDom',innerDom);if(innerDom){this.parallaxIns = new Parallax(innerDom)}}) },handleAppoint() {_baq.track("form", { assets_id:this.pageInfo.assetsid, })if (!this.$hqTool.getCookie("token")) {this.$showSecondLogin.show(() =>{location.href = this.openlink});} else {console.log('this.openlink',this.openlink);if (!this.openlink) {this.$toast('地址为空',)return} else {location.href = this.openlink}}},async getTitokInfo() {let params = {id:this.act_id}try {let res = await this.$api.getTitokInfo(params)if (res.code === 200 && res.data) {let titlt = res.data.pagetitlelet assetsid = res.data.assetsidthis.pageInfo = res.datadocument.title = titlt// 设置登录的资产idlocalStorage.setItem("customerAssetsId",assetsid);// 抖音埋点_baq.track("page_view", { assets_id: assetsid, })// 设置商机this.setBussiness(titlt)// 获取url schemethis.getTitokWxUrlScheme(res.data.coverimageurl)} else {this.$toast(res.msg || '接口报错') }} catch (e) {console.log('eeeeee',e);}},setBussiness(titlt) {let bussinessParams =JSON.stringify({memo: titlt,registerChannelId: "dyxd",});localStorage.setItem("bussinessParams",bussinessParams);},// 获取url schemeasync getTitokWxUrlScheme(picUrl){if (!picUrl) returntry {let params = {"expire": true,"expireInterval":1,"expireType": 1,"jumpWxa": {"path": "/pages/titok/index","query": `pic=${picUrl}`}}let res = await this.$api.getTitokWxUrlScheme(params)console.log('11111111111res',res);if (''+res.code === '200' ) {this.openlink = res.data}else {this.$toast(res.msg || '接口报错') }} catch (e) {console.log('e',e);} }}
}
</script>
<style lang="less" scoped>
.index {background-color:#0e1c8b;position: fixed;left: 0;top: 0;right: 0;bottom: 0;pointer-events: none;z-index: 1;
}
.star {display:block;width:5px;height:5px;border-radius:50%;background:#FFF;position:absolute;transform-origin:100% 0;animation:star-ani 4s linear infinite;box-shadow:0 0 5px 5px rgba(255,255,255,.3);opacity:0;z-index:2;
}
.star:after {content:'';display:block;top:0px;left:4px;border:0px solid #fff;border-width:0px 90px 2px 90px;border-color:transparent transparent transparent rgba(255,255,255,.3);transform:rotate(-45deg) translate3d(1px,3px,0);box-shadow:0 0 1px 0 rgba(255,255,255,.1);transform-origin:0% 100%;
}
@keyframes star-ani {0% {opacity:0;transform:scale(0) translate3d(0,0,0);
}
20% {opacity:0.8;transform:scale(0.2) translate3d(-100px,100px,0);
}
40% {opacity:0.8;transform:scale(0.4) translate3d(-200px,200px,0);
}
60% {opacity:0.8;transform:scale(0.6) translate3d(-300px,300px,0);
}
80% {opacity:1;transform:scale(1) translate3d(-400px,400px,0);
}
100% {opacity:1;transform:scale(1.2) translate3d(-500px,500px,0);
}
}
</style>

看代码可以知道：看看星星的动画是由用animation和transform写出来的。

 animation:star-ani 4s linear infinite;

@keyframes star-ani {0% {opacity:0;transform:scale(0) translate3d(0,0,0);
}
20% {opacity:0.8;transform:scale(0.2) translate3d(-100px,100px,0);
}
40% {opacity:0.8;transform:scale(0.4) translate3d(-200px,200px,0);
}
60% {opacity:0.8;transform:scale(0.6) translate3d(-300px,300px,0);
}
80% {opacity:1;transform:scale(1) translate3d(-400px,400px,0);
}
100% {opacity:1;transform:scale(1.2) translate3d(-500px,500px,0);
}
}

星星的样式，其实是由一个div加上一个伪元素组成，这里可以理解为两个div
第一个div是一个圆加上阴影：

.star {display:block;width:5px;height:5px;border-radius:50%;background:#FFF;position:absolute;transform-origin:100% 0;animation:star-ani 4s linear infinite;box-shadow:0 0 5px 5px rgba(255,255,255,.3);opacity:0;z-index:2;
}

伪元素是
由border组成和阴影box-shadow

.star:after {content:'';display:block;top:0px;left:4px;border:0px solid #fff;border-width:0px 90px 2px 90px;border-color:transparent transparent transparent rgba(255,255,255,.3);transform:rotate(-45deg) translate3d(1px,3px,0);box-shadow:0 0 1px 0 rgba(255,255,255,.1);transform-origin:0% 100%;
}

二、流光canvas
参考一下，晚点分享

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.sciBg {background: url('https://uploads.codesandbox.io/uploads/user/b95a7d92-15b4-471c-a9bf-d5cf0d6477e2/9w6A-one.jpg') center no-repeat;background-size: 1920px 500px;width: 100%;height: 500px;}</style>
</head>
<body><div class="sciBg"><div style="margin: 0 auto;width: 900px"><canvas id="myCanvas4" width="900" height="500" style="border:1px solid #fff;" ></canvas></div></div><script>function  drawCanvas4() {let c = document.getElementById("myCanvas4");let context = c.getContext("2d");let width = 900;//画布宽度let height = 500;//画布高度let fPoints = [{x: 452, y: 410,r:2}, {x: 452, y: 410,r:2},{x:368,y:0,r:2},{x:536,y:0,r:2}];//初始点坐标function drawCircle() {for (let i = 0; i < fPoints.length; i++) {context.fillStyle = 'rgba(2, 179, 253,1)';//填充颜色-实心圆context.fill();//画实心圆context.beginPath();context.arc(fPoints[i].x, fPoints[i].y, fPoints[i].r, 0, Math.PI * 2);context.closePath();}if (fPoints[0].y > 265) {fPoints[0].x -= 2;fPoints[0].y -= 1.15;fPoints[1].x += 2;fPoints[1].y -= 1.15;} else if (fPoints[0].y > 0) {fPoints[0].y -= 2.5;fPoints[1].y -= 2.5;} else if (fPoints[0].y < 0) {fPoints = [{x: 452, y: 410,r:1.5}, {x: 452, y: 410,r:1.5},{x:368,y:0,r:2},{x:536,y:0,r:2}];//初始点坐标}if(fPoints[2].y < 264){fPoints[2].y += 2;fPoints[3].y += 2;}else if(fPoints[2].y<310){fPoints[2].x += 2;fPoints[2].y += 1.15;fPoints[3].x -= 2;fPoints[3].y += 1.15;}}function draw() {var img = new Image();img.onload = function(){context.drawImage(img,0,0);}img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';}function render() {//默认值为source-overlet prev = 'source-over';//只显示canvas上原图像的重叠部分context.globalCompositeOperation = 'destination-in';//设置主canvas的绘制透明度context.globalAlpha = 0.9;//这一步目的是将canvas上的图像变的透明context.fillRect(0, 0, width, height);//在原图像上重叠新图像context.globalCompositeOperation = prev;//在主canvas上画新圆drawCircle();if (width !== 0) {//在动画没有结束前，递归渲染window.requestAnimationFrame(render);}}draw()window.requestAnimationFrame(render);}drawCanvas4()</script>
</body>
</html>

vue 流星的样式和流光canvas相关推荐

五十九、Vue中的样式绑定
@Author:Runsen @Date:2020/10/16 大四是一个焦虑的时期.烦恼有时候是具体问题带来的压力,有时候却是无端的.莫名其妙的,有时候还极易受到外界的影响,别人一句话就会激起内心难 ...
Vue 中英文组件样式写法
Vue 中英文组件样式写法 Vue 项目国际化样式处理一.全局(main.js)添加自定义指令: v-lang 会自动添加语言对应的 class [中:zh,英:en] Vue.direct ...
vue的scoped 样式隔离，样式穿透，及细节
先说环境吧:vue 3.2.45,也试过vue 3.2.16 vue的scoped样式隔离原理: 在当前组件的.vue文件中,如果style标签加了scoped属性,那么在组件渲染为DOM时,会对每 ...
15 Vue中子组件样式的绑定和行内样式模版编写
[基础]模板样式绑定2-进阶场景子组件的样式绑定如何区分父子组件子组件使用样式的小坑行内样式的编写场景这篇文章继续学习Vue的模板样式绑定.上篇文章你已经对Vue中的样式绑定有一个基本了 ...
前端之vue的CSS样式
vue的CSS样式 vue项目的结构 Vue的三种样式化方法: 外部CSS文件样式向单个文件组件添加全局样式单个组件内部的样式相关名称: CSS预处理器(如SCSS)或后处理器(如PostCSS ...
Vue绑定Class样式
Vue绑定Class样式 vue有一个控制样式的小技巧,适用于单个或多个元素需要多种风格样式的切换. 我们可以先准备一个基本样式,以及之后需要切换的多种样式类型 <style>.basic ...
vue 设置滚动条样式
vue 设置滚动条样式 //在index文件中/* @charset "utf-8"; */::-webkit-scrollbar {width: 5px;}/*定义滚动条轨道内 ...
VUE动态绑定Css样式、Style行内样式
VUE动态绑定Css样式.Style样式一.背景这两天做的uniapp项目开发的时候遇到了动态写css样式的问题了,因为uniapp的语法是vue的语法,所以uniapp的样式问题主要也就是vue ...
vue修改滚动条样式的方法
这篇文章主要介绍了vue修改滚动条样式,首先要知道,修改滚动条样式,利用伪元素-webkit-scrollbar.下面来看看文章内容的具体实现吧目录首先要知道,修改滚动条样式,利用伪元素-webk ...

vue 流星的样式和流光canvas

vue 流星的样式和流光canvas相关推荐

最新文章

热门文章