CSS和JS實(shí)現(xiàn)唯美星空軌跡運(yùn)動效果

來源：懂視網(wǎng) 責(zé)編：小OO 時間：2020-11-27 18:49:21

CSS和JS實(shí)現(xiàn)唯美星空軌跡運(yùn)動效果

先給大家分享效果圖。給大家分享一個使用CSS+JS實(shí)現(xiàn)的唯美星空軌跡運(yùn)動效果，這樣的效果不輸給Flash。相關(guān)代碼如下：<。<。doctype html>；<；html lang="；en"；>；<；head>；<；meta charset="；UTF-8"；>；<；title>；cloth<；/title>；<；style>；body { background： #000；}img { display： block；float： left；margin： 0 1px 0 0；display： block；float： left；left： 0；top： 0；)。

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀先給大家分享效果圖。給大家分享一個使用CSS+JS實(shí)現(xiàn)的唯美星空軌跡運(yùn)動效果，這樣的效果不輸給Flash。相關(guān)代碼如下：<。<。doctype html>；<；html lang="；en"；>；<；head>；<；meta charset="；UTF-8"；>；<；title>；cloth<；/title>；<；style>；body { background： #000；}img { display： block；float： left；margin： 0 1px 0 0；display： block；float： left；left： 0；top： 0；)。

本文主要和大家分享一個使用CSS+JS實(shí)現(xiàn)的唯美星空軌跡運(yùn)動效果，效果非常逼真，下面小編給大家?guī)砹藢?shí)例代碼，需要的朋友參考下，希望能幫助到大家。

先給大家分享效果圖：

給大家分享一個使用CSS+JS實(shí)現(xiàn)的唯美星空軌跡運(yùn)動效果，這樣的效果不輸給Flash 。相關(guān)代碼如下：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>cloth</title>
 <style>
 body {
 background: #000; 
}
img {
 display: block;
 float: left; 
 margin: 0 1px 0 0;
}
canvas {
 background: #131c35 linear-gradient(#192853, #131c35);
 display: block;
 float: left;
 /* uncomment to test overlay */
 /*
 position: absolute;
 left: 0;
 opacity: .5;
 top: 0;
 */ 
}
 </style>
</head>
<body>
 <p id="container"></p>
 <script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
 <canvas id="c"></canvas>
 <img src="http://dribbble.s3.amazonaws.com/users/36991/screenshots/674715/game.png" />
 <script>
 var c = document.getElementById('c'),
 ctx = c.getContext('2d'),
 cw = c.width = 400,
 ch = c.height = 300,
 rand = function(a,b){return ~~((Math.random()*(b-a+1))+a);},
 dToR = function(degrees){
 return degrees * (Math.PI / 180);
 },
 circle = {
 x: (cw / 2) + 5,
 y: (ch / 2) + 22,
 radius: 90,
 speed: 2,
 rotation: 0,
 angleStart: 270,
 angleEnd: 90,
 hue: 220,
 thickness: 18,
 blur: 25
 },
 particles = [],
 particleMax = 100,
 updateCircle = function(){
 if(circle.rotation < 360){
 circle.rotation += circle.speed;
 } else {
 circle.rotation = 0; 
 }
 },
 renderCircle = function(){
 ctx.save();
 ctx.translate(circle.x, circle.y);
 ctx.rotate(dToR(circle.rotation));
 ctx.beginPath();
 ctx.arc(0, 0, circle.radius, dToR(circle.angleStart), dToR(circle.angleEnd), true);
 ctx.lineWidth = circle.thickness; 
 ctx.strokeStyle = gradient1;
 ctx.stroke();
 ctx.restore();
 },
 renderCircleBorder = function(){
 ctx.save();
 ctx.translate(circle.x, circle.y);
 ctx.rotate(dToR(circle.rotation));
 ctx.beginPath();
 ctx.arc(0, 0, circle.radius + (circle.thickness/2), dToR(circle.angleStart), dToR(circle.angleEnd), true);
 ctx.lineWidth = 2; 
 ctx.strokeStyle = gradient2;
 ctx.stroke();
 ctx.restore();
 },
 renderCircleFlare = function(){
 ctx.save();
 ctx.translate(circle.x, circle.y);
 ctx.rotate(dToR(circle.rotation+185));
 ctx.scale(1,1);
 ctx.beginPath();
 ctx.arc(0, circle.radius, 30, 0, Math.PI *2, false);
 ctx.closePath();
 var gradient3 = ctx.createRadialGradient(0, circle.radius, 0, 0, circle.radius, 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(circle.x, circle.y);
 ctx.rotate(dToR(circle.rotation+165));
 ctx.scale(1.5,1);
 ctx.beginPath();
 ctx.arc(0, circle.radius, 25, 0, Math.PI *2, false);
 ctx.closePath();
 var gradient4 = ctx.createRadialGradient(0, circle.radius, 0, 0, circle.radius, 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(){
 if(particles.length < particleMax){
 particles.push({
 x: (circle.x + circle.radius * Math.cos(dToR(circle.rotation-85))) + (rand(0, circle.thickness*2) - circle.thickness),
 y: (circle.y + circle.radius * Math.sin(dToR(circle.rotation-85))) + (rand(0, circle.thickness*2) - circle.thickness),
 vx: (rand(0, 100)-50)/1000,
 vy: (rand(0, 100)-50)/1000,
 radius: rand(1, 6)/2,
 alpha: rand(10, 20)/100
 });
 }
 },
 updateParticles = function(){
 var i = particles.length;
 while(i--){
 var p = particles[i];
 p.vx += (rand(0, 100)-50)/750;
 p.vy += (rand(0, 100)-50)/750;
 p.x += p.vx;
 p.y += p.vy;
 p.alpha -= .01;
 if(p.alpha < .02){
 particles.splice(i, 1)
 }
 }
 },
 renderParticles = function(){
 var i = particles.length;
 while(i--){
 var p = particles[i];
 ctx.beginPath();
 ctx.fillRect(p.x, p.y, p.radius, p.radius);
 ctx.closePath();
 ctx.fillStyle = 'hsla(0, 0%, 100%, '+p.alpha+')';
 }
 },
 clear = function(){
 ctx.globalCompositeOperation = 'destination-out';
 ctx.fillStyle = 'rgba(0, 0, 0, .1)';
 ctx.fillRect(0, 0, cw, ch);
 ctx.globalCompositeOperation = 'lighter'; 
 }
 loop = function(){
 clear();
 updateCircle();
 renderCircle();
 renderCircleBorder();
 renderCircleFlare();
 renderCircleFlare2();
 createParticles();
 updateParticles();
 renderParticles();
 }
/* Append Canvas */
//document.body.appendChild(c);
/* Set Constant Properties */
ctx.shadowBlur = circle.blur;
ctx.shadowColor = 'hsla('+circle.hue+', 80%, 60%, 1)';
ctx.lineCap = 'round'
var gradient1 = ctx.createLinearGradient(0, -circle.radius, 0, circle.radius);
gradient1.addColorStop(0, 'hsla('+circle.hue+', 60%, 50%, .25)');
gradient1.addColorStop(1, 'hsla('+circle.hue+', 60%, 50%, 0)');
var gradient2 = ctx.createLinearGradient(0, -circle.radius, 0, circle.radius);
gradient2.addColorStop(0, 'hsla('+circle.hue+', 100%, 50%, 0)');
gradient2.addColorStop(.1, 'hsla('+circle.hue+', 100%, 100%, .7)');
gradient2.addColorStop(1, 'hsla('+circle.hue+', 100%, 50%, 0)');
/* Loop It, Loop It Good */
setInterval(loop, 16);
 </script>
</body>
</html>
 -

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

CSS和JS實(shí)現(xiàn)唯美星空軌跡運(yùn)動效果

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：運(yùn)動 js 效果

熱門焦點(diǎn)

CSS和JS實(shí)現(xiàn)唯美星空軌跡運(yùn)動效果

CSS和JS實(shí)現(xiàn)唯美星空軌跡運(yùn)動效果

CSS和JS實(shí)現(xiàn)唯美星空軌跡運(yùn)動效果

最新推薦

猜你喜歡

熱門推薦