果图

各位朋友，大家好！

今天给大家带来的是，Canvas 发光loading动画特效源码

有想要文件版源码的，可以私聊小编，小编挨个发送！

废话不多说，上源码！

JS：

/* super inefficient right now, could be improved */

var c = document.getElementById('c'),

ctx = c.getContext('2d'),

cw = c.width = 1000,

ch = c.height = 600,

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);

CSS：

body {

background: #000;

}

果图

各位媛猿大家好

今天给大家带来的是 CSS3 3D图片相册特效

大家可以按照自己的意愿 修改成喜欢的样子！

想要文件版源码的，请加穷581549454

废话不多说，上源码！

CSS源码：

@charset "utf-8";

/*科e互联特效基本框架CSS*/

body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}

h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}

body>div{margin:0 auto}

div {text-align:left}

a img {border:0}

body { color: #333; text-align: center; font: 12px "微软雅黑"; }

ul, ol, li {list-style-type:none;vertical-align:0}

a {outline-style:none;color:#535353;text-decoration:none}

a:hover { color: #D40000; text-decoration: none}

.clear{height:0; overflow:hidden; clear:both}

.button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);

}

.red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top, #ed1c24, #A51715);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');

}

.red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top, #c9151b, #a11115); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;}

.red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top, #aa1317, #ed1c24);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}

.cor_bs,.cor_bs:hover{color:#ffffff;}

.keBody{background:url(../images/bodyBg.jpg) repeat #333;}

.keTitle{height:100px; line-height:100px; font-size:30px; font-family:'微软雅黑'; color:#FFF; text-align:center; background:url(../images/bodyBg3.jpg) repeat-x bottom left; font-weight:normal}

.kePublic{background:#FFF; padding:50px;}

.keBottom{color:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微软雅黑'; background:url(../images/bodyBg2.jpg) repeat-x top left; padding-bottom:25px}

.keTxtP{font-size:16px; color:#ffffff;}

.keUrl{color:#FFF; font-size:30px;}

.keUrl:hover{ text-decoration: underline; color: #FFF; }

.mKeBanner,.mKeBanner div{text-align:center;}

/*科e互联特效基本框架CSS结束，应用特效时，以上样式可删除*/

.warper{ width: 860px; height: 300px; border: 2px solid #efefef; margin: 0 auto; padding: 3px 3px 0px 0px; }

#wowslider-container1 { zoom: 1; position: relative; max-width: 716px; float:right; z-index: 90 }

* html #wowslider-container1 { width: 716px }

#wowslider-container1 .ws_images ul { position: relative; width: 10000%; height: auto; left: 0; list-style: none; margin: 0; padding: 0; border-spacing: 0; overflow: visible }

#wowslider-container1 .ws_images ul li { width: 1%; line-height: 0; float: left; font-size: 0; padding: 0!important; margin: 0!important }

#wowslider-container1 .ws_images { position: relative; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden }

#wowslider-container1 .ws_images a { width: 100%; display: block; color: transparent }

#wowslider-container1 img { max-width: none!important }

#wowslider-container1 .ws_images img { width: 100%; border: none 0; max-width: none; padding: 0; margin: 0 }

#wowslider-container1 a { text-decoration: none; outline: 0; border: 0 }

#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev { position: absolute; display: none; top: 50%; margin-top: -3.5em; z-index: 60; height: 7.1em; width: 7.1em; background-image: url(../images/arrows.png); background-size: 200% }

#wowslider-container1 a.ws_next { background-position: 100% 0; right: 1em }

#wowslider-container1 a.ws_prev { left: 1em; background-position: 0 0 }

#wowslider-container1 a.ws_next:hover { background-position: 100% 100% }

#wowslider-container1 a.ws_prev:hover { background-position: 0 100% }

* html #wowslider-container1 a.ws_next, * html #wowslider-container1 a.ws_prev { display: block }

#wowslider-container1:hover a.ws_next, #wowslider-container1:hover a.ws_prev { display: block }

#wowslider-container1 .ws_playpause { display: none; width: 7.1em; height: 7.1em; position: absolute; top: 50%; left: 50%; margin-left: -3.5em; margin-top: -3.5em; z-index: 59; background-size: 100% }

#wowslider-container1:hover .ws_playpause { display: block }

#wowslider-container1 .ws_pause { background-image: url(../images/pause.png) }

#wowslider-container1 .ws_play { background-image: url(../images/play.png) }

#wowslider-container1 .ws_pause:hover, #wowslider-container1 .ws_play:hover { background-position: 100% 100%!important }

#wowslider-container1 .ws-title { position: absolute; display: block; bottom: 3.5em; left: 1em; margin-right: 1em; padding: 1em .9em .9em .9em; background-color: rgba(0,0,0,0.4); color: #fff; z-index: 50; font-weight: bold; text-transform: uppercase; border-radius: .2em; -moz-border-radius: .2em; -webkit-border-radius: .2em }

#wowslider-container1 .ws-title div { margin-top: .3em; font-size: 1.6em; line-height: 1.15em; font-weight: normal; text-transform: none; color: #fff }

#wowslider-container1 .ws-title span { font-size: 2.4em }

#wowslider-container1 .ws_thumbs { font-size: 0; position: absolute; overflow: auto; z-index: 70; left: -19.51%; top: 0; width: 18.72%; height: 100% }

#wowslider-container1 .ws_thumbs img { text-decoration: none; border: 0; width: 100% }

#wowslider-container1 .ws_thumbs a { position: relative; text-indent: -4000px; color: transparent; opacity: .85; text-decoration: none; display: inline-block; border: 0; margin-bottom: 4%; text-indent: 0; padding: 2.99%; width: 89.54%; background-color: #fff }

#wowslider-container1 .ws_thumbs a:hover { opacity: 1 }

#wowslider-container1 .ws_thumbs a:hover img { visibility: visible }

#wowslider-container1 .ws_thumbs div { position: relative; width: 100% }

#wowslider-container1 .ws_thumbs a.ws_selthumb { background-color: #bce0dd }

#wowslider-container1 .ws_images ul { animation: wsBasic 16s infinite; -moz-animation: wsBasic 16s infinite; -webkit-animation: wsBasic 16s infinite }

@keyframes wsBasic { 0% {

left:-0%

}

12.5% {

left:-0%

}

25% {

left:-100%

}

37.5% {

left:-100%

}

50% {

left:-200%

}

62.5% {

left:-200%

}

75% {

left:-300%

}

87.5% {

left:-300%

}

}

@-moz-keyframes wsBasic { 0% {

left:-0%

}

12.5% {

left:-0%

}

25% {

left:-100%

}

37.5% {

left:-100%

}

50% {

left:-200%

}

62.5% {

left:-200%

}

75% {

left:-300%

}

87.5% {

left:-300%

}

}

@-webkit-keyframes wsBasic { 0% {

left:-0%

}

12.5% {

left:-0%

}

25% {

left:-100%

}

37.5% {

left:-100%

}

50% {

left:-200%

}

62.5% {

left:-200%

}

75% {

left:-300%

}

87.5% {

left:-300%

}

}

index：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>CSS3 3D图片相册特效 - 网页特效库 - jquery特效</title>

<link rel='stylesheet' href='css/style.css' type='text/css' />

<script type='text/javascript' src='js/jquery.min.js'></script>

</head>

<body class="keBody">

<h1 class="keTitle">CSS3 3D图片相册特效</h1>

<div class="kePublic">

<!--效果html开始-->

<div class="warper">

<div id="wowslider-container1">

<div class="ws_images">

<ul>

<li><a target="_blank" href="#"><img title="高级职位都在这里" src="images/bimg1.jpg" /></a></li>

<li><a target="_blank" href="#"><img title="互联网设计布道者冯铁看诊把脉" src="images/bimg2.jpg" /></a></li>

<li><a target="_blank" href="#"><img title="颜值不高别装“表”" src="images/bimg3.jpg" /></a></li>

<li><a target="_blank" href="#"><img title="高级职位都在这里" src="images/bimg1.jpg" /></a></li>

<li><a target="_blank" href="#"><img title="互联网设计布道者冯铁看诊把脉" src="images/bimg2.jpg" /></a></li>

<li><a target="_blank" href="#"><img title="颜值不高别装“表”" src="images/bimg3.jpg" /></a></li>

</ul>

</div>

<div class="ws_thumbs">

<div>

<a target="_blank" href="#"><img src="images/simg1.jpg" /></a>

<a target="_blank" href="#"><img src="images/simg2.jpg" /></a>

<a target="_blank" href="#"><img src="images/simg3.jpg" /></a>

<a target="_blank" href="#"><img src="images/simg1.jpg" /></a>

<a target="_blank" href="#"><img src="images/simg2.jpg" /></a>

<a target="_blank" href="#"><img src="images/simg3.jpg" /></a>

</div>

</div>

<div class="ws_shadow"></div>

</div>

<script type="text/javascript" src="js/slider.js"></script>

</div>

<!--效果html结束-->

<div class="clear"></div>

</div>

<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei'; color: #fff;">

<p>T</p>

</div>

</body>

</html>