小編給大家分享一下如何利用CSS+JS實(shí)現(xiàn)唯美星空軌跡運(yùn)動(dòng)效果,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
成都創(chuàng)新互聯(lián)公司2013年至今,是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目網(wǎng)站建設(shè)、成都網(wǎng)站制作網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命,1280元王益做網(wǎng)站,已為上家服務(wù),為王益各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話(huà):18980820575
css是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言,主要是用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式,使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言,并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中,而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定,從而實(shí)現(xiàn)級(jí)聯(lián)效果,發(fā)展至今,css不僅能裝飾網(wǎng)頁(yè),也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。
先給大家分享效果圖:
給大家分享一個(gè)使用CSS+JS實(shí)現(xiàn)的唯美星空軌跡運(yùn)動(dòng)效果, 這樣的效果不輸給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="/upload/otherpic62/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實(shí)現(xiàn)唯美星空軌跡運(yùn)動(dòng)效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
本文標(biāo)題:如何利用CSS+JS實(shí)現(xiàn)唯美星空軌跡運(yùn)動(dòng)效果
瀏覽路徑:http://aaarwkj.com/article4/jeggoe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站導(dǎo)航、網(wǎng)站制作、自適應(yīng)網(wǎng)站、建站公司、網(wǎng)站營(yíng)銷(xiāo)、小程序開(kāi)發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)