溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下如何利用CSS+JS實現(xiàn)唯美星空軌跡運動效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
css是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言，主要是用來設(shè)計網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結(jié)構(gòu)決定，從而實現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進行格式化。
先給大家分享效果圖：
給大家分享一個使用CSS+JS實現(xià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>
<div id="container"></div>
<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>
-以上是“如何利用CSS+JS實現(xiàn)唯美星空軌跡運動效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼