小编给大家分享一下如何利用CSS + JS实现唯美星空轨迹运动效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
CSS是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体,颜色,位置等的语言,并且CSS样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由CSS根据这个层次结构决定,从而实现级联效果,发展至今,CSS不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。
先给大家分享效果图:
& lt; ! doctype html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能title> cloth</title>
& lt;才能style>
,,body {
,,背景:# 000;,
}
img {
,,显示:块;
,浮动:,;
保证金才能:0,1 px 0, 0;
}
canvas {
,,背景:# 131 c35 线性渐变(# 192853,# 131 c35);
,显示:块;
浮:,才能离开;/*,才能uncomment 用test overlay */,/*
位置:才能,绝对;
,,左:0;
,,不透明度:5;
,,:0;
,,*/,
}
& lt;才能/style>
& lt;/head>
& lt; body>
& lt;才能div id=癱ontainer"祝辞& lt;/div>
& lt;才能script 类型=拔谋?javascript" https://www.yisu.com/zixun/, src=" http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js ">
<帆布id=" c ">
<>脚本
var c=. getelementbyid (' c '),
ctx=c.getContext (2 d),
连续波=c。宽度=400,
ch=c。身高=300,
兰德=function (a, b){返回~ ~ ((math . random () * (b + 1)) + a);},
井底扭矩=函数(度){
返回度*(数学。π/180);
}，
圆={
x: (cw/2) + 5,
y: (ch/2) + 22日
半径:90,
速度:2
旋转:0,
angleStart: 270,
angleEnd: 90,
颜色:220
厚度:18,
模糊:25
}，
粒子=[],
particleMax=100,
updateCircle=function () {
如果(圆。旋转<360){
圆。+=circle.speed旋转;
其他}{
圆。旋转=0;
}
}，
renderCircle=function () {
ctx.save ();
ctx.translate(圆。x, circle.y);
ctx.rotate(井底扭矩(circle.rotation));
ctx.beginPath ();
ctx。弧(0,0,圆。半径,井底扭矩(circle.angleStart),井底扭矩(circle.angleEnd),真正的);
ctx。线宽=circle.thickness;
ctx。strokeStyle=gradient1;
ctx.stroke ();
ctx.restore ();
}，
renderCircleBorder=function () {
ctx.save ();
ctx.translate(圆。x, circle.y);
ctx.rotate(井底扭矩(circle.rotation));
ctx.beginPath ();
ctx。弧(0,0,圆。半径+ (circle.thickness/2)井底扭矩(circle.angleStart),井底扭矩(circle.angleEnd),真正的);
ctx。线宽=2;
ctx。strokeStyle=gradient2;
ctx.stroke ();
ctx.restore ();
}，
renderCircleFlare=function () {
ctx.save ();
ctx.translate(圆。x, circle.y);
ctx.rotate(井底扭矩(circle.rotation + 185));
ctx.scale (1,1);
ctx.beginPath ();
ctx。弧(0,圆。半径30 0,数学。π* 2,假);
ctx.closePath ();
var gradient3=ctx。createRadialGradient(0,圆。圆半径,0,0,。半径,30);
gradient3。addColorStop (0, ' hsla(330年,50%,50%,.35点)');
gradient3。addColorStop (1, hsla(330年,50%、50%、0)');
ctx。fillStyle=gradient3;
ctx.fill ();
ctx.restore ();
}，
renderCircleFlare2=function () {
ctx.save ();
ctx.translate(圆。x, circle.y);
ctx.rotate(井底扭矩(circle.rotation + 165));
ctx.scale (1.5, 1);
ctx.beginPath ();
ctx。弧(0,圆。25岁的半径0,数学。π* 2,假);
ctx.closePath ();
var gradient4=ctx。createRadialGradient(0,圆。圆半径,0,0,。半径,25);
gradient4。addColorStop (0, ' hsla (30、100%、50%,。2) ');
gradient4。addColorStop (1, hsla (30、100%、50%、0) ');
ctx。fillStyle=gradient4;
ctx.fill ();
ctx.restore ();
}，
createParticles=function () {
如果粒子。长度
