HTML5动态线条背景特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5动态线条背景特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html class="no-js" lang="zh-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.5">
<title>HTML5动态线条背景特效代码 </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="headline-bg index-headline-bg wavesWapper">
    <canvas id="waves" class="waves"></canvas>
</div>
<section class="features-video section section-on-bg feature-index">
    <div class="container"> 
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-12">

            </div>
        </div>         
    </div>
</section>

<script src="js/49f8daee.vendors.js"></script>
<script src="js/26f2fc0d.index.js"></script>
</body>
</html>

JS代码(26f2fc0d.index.js):

$(document).ready(function(){
	function a(){
	var a=$(window).width(),b=(768-a)/768+1,c=1;
	fmhPara=$(".feature-mi").height()<641||$(".feature-ai").height()<641||$(".feature-bi").height()<641?0:1,768>a?($(".mi-headline-bg").css("height",$(".feature-mi").height()+28*b*c+"px"),$(".ai-headline-bg").css("height",$(".feature-ai").height()+28*b*c+"px"),$(".bi-headline-bg").css("height",$(".feature-bi").height()+28*b*c+"px"),$(".ee-headline-bg").css("height",$(".feature-ee").height()+parseInt($(".feature-ee").css("padding-top"))+20*b+"px")):($(".mi-headline-bg").removeAttr("style"),$(".ai-headline-bg").removeAttr("style"),$(".bi-headline-bg").removeAttr("style"),$(".ee-headline-bg").removeAttr("style"))}
setTimeout(function(){
	a()}
,100),$(window).resize(function(){
	a()}
)}
),function(a,b){
	"use strict";
	"function"==typeof define&&"object"==typeof define.amd?define([],function(){
	return b(a)}
):a.SineWaves=b(a)}
(this,function(){
	"use strict";
	function a(a){
	if(this.options=i.defaults(this.options,a),this.el=this.options.el,delete this.options.el,!this.el)throw"No Canvas Selected";
	if(this.ctx=this.el.getContext("2d"),this.waves=this.options.waves,delete this.options.waves,!this.waves||!this.waves.length)throw"No waves specified";
	this.dpr=window.devicePixelRatio||1,this.updateDimensions(),window.addEventListener("resize",this.updateDimensions.bind(this)),this.setupUserFunctions(),this.easeFn=i.getFn(n,this.options.ease,"linear"),this.rotation=i.degreesToRadians(this.options.rotate),i.isType(this.options.running,"boolean")&&(this.running=this.options.running),this.setupWaveFns(),this.loop()}
function b(a,b){
	return i.isType(a,"number")?a:(a=a.toString(),a.indexOf("%")>-1?(a=parseFloat(a),a>1&&(a/=100),b*a):a.indexOf("px")>-1?parseInt(a,10):void 0)}
Function.prototype.bind||(Function.prototype.bind=function(a){
	if("function"!=typeof this)throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
	var b=Array.prototype.slice.call(arguments,1),c=this,d=function(){
}
,e=function(){
	return c.apply(this instanceof d&&a?this:a,b.concat(Array.prototype.slice.call(arguments)))}
;
	return d.prototype=this.prototype,e.prototype=new d,e}
);
	for(var c=["ms","moz","webkit","o"],d=0;
	d<c.length&&!window.requestAnimationFrame;
	++d)window.requestAnimationFrame=window[c[d]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[c[d]+"CancelAnimationFrame"]||window[c[d]+"CancelRequestAnimationFrame"];
	if(!window.requestAnimationFrame){
	var e=0;
	window.requestAnimationFrame=function(a){
	var b=(new Date).getTime(),c=Math.max(0,16-(b-e)),d=window.setTimeout(function(){
	a(b+c)}
,c);
	return e=b+c,d}
}
window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){
	clearTimeout(a)}
);
	var f=Math.PI/180,g=2*Math.PI,h=Math.PI/2,i={
}
,j=i.isType=function(a,b){
	var c={
}
.toString.call(a).toLowerCase();
	return c==="[object "+b.toLowerCase()+"]"}
,k=i.isFunction=function(a){
	return j(a,"function")}
,l=i.isString=function(a){
	return j(a,"string")}
,m=(i.isNumber=function(a){
	return j(a,"number")}
,i.shallowClone=function(a){
	var b={
}
;
	for(var c in a)a.hasOwnProperty(c)&&(b[c]=a[c]);
	return b}
),n=(i.defaults=function(a,b){
	j(b,"object")||(b={
}
);
	var c=m(a);
	for(var d in b)b.hasOwnProperty(d)&&(c[d]=b[d]);
	return c}
,i.degreesToRadians=function(a){
	if(!j(a,"number"))throw new TypeError("Degrees is not a number");
	return a*f}
,i.getFn=function(a,b,c){
	return k(b)?b:l(b)&&k(a[b.toLowerCase()])?a[b.toLowerCase()]:a[c]}
,{
}
);
	n.linear=function(a,b){
	return b}
,n.sinein=function(a,b){
	return b*(Math.sin(a*Math.PI-h)+1)*.5}
,n.sineout=function(a,b){
	return b*(Math.sin(a*Math.PI+h)+1)*.5}
,n.sineinout=function(a,b){
	return b*(Math.sin(a*g-h)+1)*.5}
;
	var o={
}
;
	o.sine=function(a){
	return Math.sin(a)}
,o.sin=o.sine,o.sign=function(a){
	return a=+a,0===a||isNaN(a)?a:a>0?1:-1}
,o.square=function(a){
	return o.sign(Math.sin(a*g))}
,o.sawtooth=function(a){
	return 2*(a-Math.floor(a+.5))}
,o.triangle=function(a){
	return Math.abs(o.sawtooth(a))}
,a.prototype.options={
	speed:10,rotate:0,ease:"Linear",wavesWidth:"95%"}
,a.prototype.setupWaveFns=function(){
	for(var a=-1,b=this.waves.length;
	++a<b;
	)this.waves[a].waveFn=i.getFn(o,this.waves[a].type,"sine")}
,a.prototype.setupUserFunctions=function(){
	i.isFunction(this.options.resizeEvent)&&(this.options.resizeEvent.call(this),window.addEventListener("resize",this.options.resizeEvent.bind(this))),i.isFunction(this.options.initialize)&&this.options.initialize.call(this)}
;
	var p={
	timeModifier:1,amplitude:50,wavelength:50,segmentLength:10,lineWidth:1,strokeStyle:"rgba(255,255,255,0.2)",type:"Sine"}
;
	return a.prototype.getDimension=function(a){
	return i.isNumber(this.options[a])?this.options[a]:i.isFunction(this.options[a])?this.options[a].call(this,this.el):"width"===a?this.el.clientWidth:"height"===a?this.el.clientHeight:void 0}
,a.prototype.updateDimensions=function(){
	var a=this.getDimension("width"),c=this.getDimension("height");
	this.width=this.el.width=a*this.dpr,this.height=this.el.height=c*this.dpr,this.el.style.width=a+"px",this.el.style.height=c+"px",this.waveWidth=b(this.options.wavesWidth,this.width),this.waveLeft=(this.width-this.waveWidth)/2,this.yAxis=this.height/2}
,a.prototype.clear=function(){
	this.ctx.clearRect(0,0,this.width,this.height)}
,a.prototype.time=0,a.prototype.update=function(a){
	this.time=this.time-.007,"undefined"==typeof a&&(a=this.time);
	var b=-1,c=this.waves.length;
	for(this.clear(),this.ctx.save(),this.rotation>0&&(this.ctx.translate(this.width/2,this.height/2),this.ctx.rotate(this.rotation),this.ctx.translate(-this.width/2,-this.height/2));
	++b<c;
	){
	var d=this.waves[b].timeModifier||1;
	this.drawWave(a*d,this.waves[b])}
this.ctx.restore(),b=void 0,c=void 0}
,a.prototype.getPoint=function(a,b,c){
	var d=a*this.options.speed+(-this.yAxis+b)/c.wavelength,e=c.waveFn.call(this,d,o),f=this.easeFn.call(this,b/this.waveWidth,c.amplitude);
	return d=b+this.waveLeft,e=f*e+this.yAxis,{
	x:d,y:e}
}
,a.prototype.drawWave=function(a,b){
	b=i.defaults(p,b),this.ctx.lineWidth=b.lineWidth*this.dpr,this.ctx.strokeStyle=b.strokeStyle,this.ctx.lineCap="butt",this.ctx.lineJoin="round",this.ctx.beginPath(),this.ctx.moveTo(0,this.yAxis),this.ctx.lineTo(this.waveLeft,this.yAxis);
	var c,d;
	for(c=0;
	c<this.waveWidth;
	c+=b.segmentLength)d=this.getPoint(a,c,b),this.ctx.lineTo(d.x,d.y),d=void 0;
	c=void 0,b=void 0,this.ctx.lineTo(this.width,this.yAxis),this.ctx.stroke()}
,a.prototype.running=!0,a.prototype.loop=function(){
	this.running===!0&&this.update(),window.requestAnimationFrame(this.loop.bind(this))}
,a.prototype.Waves=o,a.prototype.Ease=n,a}
),$(function(){
	var a=new SineWaves({
	el:document.getElementById("waves"),speed:8,width:function(){
	var a=$(document).width();
	return 768>a?3*$("#waves").parent().width():1.4*$("#waves").parent().width()}
,height:function(){
	return $("#waves").parent().height()}
,wavesWidth:"100%",ease:"SineInOut",waves:[{
	timeModifier:.5,lineWidth:2,amplitude:150,wavelength:200,segmentLength:1}
,{
	timeModifier:.5,lineWidth:2,amplitude:100,wavelength:150,segmentLength:1}
,{
	timeModifier:.5,lineWidth:2,amplitude:50,wavelength:80,segmentLength:1}
],initialize:function(){
}
,resizeEvent:function(){
	var a=this.ctx.createLinearGradient(0,0,this.width,0);
	a.addColorStop(0,"rgba(255,255,255,0)"),a.addColorStop(.5,"rgba(255,255,255,0.2)"),a.addColorStop(1,"rgba(255,255,255,0)");
	for(var b=-1,c=this.waves.length;
	++b<c;
	)this.waves[b].strokeStyle=a;
	b=void 0,c=void 0,a=void 0}
}
),b=$("#waves"),c=$(document).scrollTop(),d=$(document).scrollTop()+$(window).height(),e=b.offset().top+b.height(),f=b.offset().top;
	(c>e||f>d)&&(a.running=!1,a.update()),$(window).bind("scroll",function(){
	c=$(document).scrollTop(),d=$(document).scrollTop()+$(window).height(),e=b.offset().top+b.height(),f=b.offset().top,c>e||f>d?(a.running=!1,a.update()):(a.running=!0,a.update())}
)}
),$(function(){
	var a=new SineWaves({
	el:document.getElementById("waves21"),speed:8,width:function(){
	var a=$(document).width();
	return 768>a?3*$("#waves").parent().width():1.4*$("#waves").parent().width()}
,height:function(){
	return $("#waves").parent().height()}
,wavesWidth:"100%",ease:"SineInOut",waves:[{
	timeModifier:.5,lineWidth:2,amplitude:160,wavelength:150,segmentLength:1}
,{
	timeModifier:.6,lineWidth:2,amplitude:100,wavelength:100,segmentLength:1}
],initialize:function(){
}
,resizeEvent:function(){
	var a=this.ctx.createLinearGradient(0,0,this.width,0);
	a.addColorStop(0,"rgba(255,255,255,0)"),a.addColorStop(.5,"rgba(255,255,255,0.2)"),a.addColorStop(1,"rgba(255,255,255,0)");
	for(var b=-1,c=this.waves.length;
	++b<c;
	)this.waves[b].strokeStyle=a;
	b=void 0,c=void 0,a=void 0}
}
),b=$("#waves21"),c=$(document).scrollTop(),d=$(document).scrollTop()+$(window).height(),e=b.offset().top+b.height(),f=b.offset().top;
	(c>e||f>d)&&(a.running=!1,a.update()),$(window).bind("scroll",function(){
	c=$(document).scrollTop(),d=$(document).scrollTop()+$(window).height(),e=b.offset().top+b.height(),f=b.offset().top,c>e||f>d?(a.running=!1,a.update()):(a.running=!0,a.update())}
)}
),$(function(){
	var a=new SineWaves({
	el:document.getElementById("waves2"),speed:8,width:function(){
	var a=$(document).width();
	return 768>a?3*$("#waves2").parent().width():1.4*$("#waves2").parent().width()}
,height:function(){
	return $("#waves2").parent().height()}
,wavesWidth:"100%",ease:"SineInOut",waves:[{
	timeModifier:.5,lineWidth:2,amplitude:100,wavelength:150,segmentLength:1}
,{
	timeModifier:.5,lineWidth:2,amplitude:50,wavelength:80,segmentLength:1}
],initialize:function(){
}
,resizeEvent:function(){
	var a=this.ctx.createLinearGradient(0,0,this.width,0);
	a.addColorStop(0,"rgba(255,255,255,0)"),a.addColorStop(.5,"rgba(255,255,255,0.2)"),a.addColorStop(1,"rgba(255,255,255,0)");
	for(var b=-1,c=this.waves.length;
	++b<c;
	)this.waves[b].strokeStyle=a;
	b=void 0,c=void 0,a=void 0}
}
),b=$("#waves2"),c=$(document).scrollTop(),d=$(document).scrollTop()+$(window).height(),e=b.offset().top+b.height(),f=b.offset().top;
	(c>e||f>d)&&(a.running=!1,a.update()),$(window).bind("scroll",function(){
	c=$(document).scrollTop(),d=$(document).scrollTop()+$(window).height(),e=b.offset().top+b.height(),f=b.offset().top,c>e||f>d?(a.running=!1,a.update()):(a.running=!0,a.update())}
)}
);

CSS代码(style.css):

body{margin:0}
.headline-bg.index-headline-bg{height:680px;overflow:hidden;background:-webkit-linear-gradient(top,#0076d1,#5db8ff);background:-moz-linear-gradient(top,#0076d1,#5db8ff);background:-o-linear-gradient(top,#0076d1,#5db8ff);background:-ms-linear-gradient(top,#0076d1,#5db8ff)}
.index-headline-img{width:610px;display:block;margin:auto}
.feature-index{width:100%;margin-top:0;padding-top:100px;padding-bottom:0;overflow:hidden;}
.feature-index h2.title{font-size:42px;color:#fff;font-weight:400;text-align:left;line-height:1.3}
.feature-index h2.title span{display:block;font-size:26px;margin-bottom:10px}
.feature-index .p-btn .btn-sign{background-color:#fff;color:#006ec3}
.feature-index .p-btn .btn-sign:hover{opacity:.8}
.feature-index .p-btn .btn-large{font-size:14px;padding:6px 16px;font-weight:400;border:1px solid #fff}
.feature-index .p-btn a:first-child{margin-right:20px}
.feature-index p.more{text-align:left;font-size:14px;padding-top:5px;padding-left:30px}
.feature-index p.more a{color:rgba(0,0,0,.3);font-weight:700;text-transform:uppercase;font-size:14px;text-decoration:none;cursor:pointer;margin-right:15px}
.feature-index p.more a:hover{color:#fff}
.steps{padding-top:150px;padding-bottom:150px}
.steps .title{font-size:48px;margin:0 0 20px}
.steps .text{width:80%;max-width:300px;margin-left:auto;margin-right:auto;font-size:24px;margin-top:p:0}
.steps .intro{font-size:20px}
.steps .intro-text{width:80%;max-width:300px;margin-bottom:40px}
.steps .fea-img{display:block;width:80%;margin:0 auto 20px;max-width:300px}
.steps .single-img{width:100%;max-width:500px;margin:0 auto}
.steps .intro-more{font-size:16px;color:#7a7a7a;margin-top:70px}
.background{background:#fafafa}
.lang{padding:140px 0}
.lang .title{font-size:40px}
.lang p.intro-more{margin-top:30px}
.lang .icon{max-width:120px;width:100%;margin:0 auto}
.lang .icon img{max-width:100%}
.lang .icon .text{font-size:14px;color:rgba(43,43,43,.5);margin-top:-5px;visibility:hidden;text-align:center}
.lang .icon:hover{cursor:pointer}
.lang .icon:hover .text{visibility:visible}
.lang .icon a:hover{text-decoration:none}
.products{padding:120px 0 150px}
.products .pro{width:100%;margin-bottom:3px}
.products .pro img{float:left;width:33.33%}
.products .pro a:nth-child(1) img{border-right:2px solid #fff}
.products .pro a:nth-child(2) img{border-left:1px solid #fff;border-right:1px solid #fff}
.products .pro a:nth-child(3) img{float:right;border-left:2px solid #fff}
.ui{background:#829ec7;background:-webkit-linear-gradient(top,#829ec7,#d5c9ce);background:-moz-linear-gradient(top,#829ec7,#d5c9ce);background:-o-linear-gradient(top,#829ec7,#d5c9ce);background:-ms-linear-gradient(top,#829ec7,#d5c9ce);padding:140px 0 0}
.ui .title{margin:0 auto 30px;color:#fff}
.ui p.intro{color:rgba(29,29,29,.5);margin-bottom:30px}
.ui p.try{margin-bottom:120px;position:relative}
.ui>img{width:80%;max-width:100%;margin-bottom:-10%;position:relative}
.users{background:#fff;padding:150px 0 120px}
.users .num{max-width:400px;width:80%;padding-bottom:10px}
.users img{width:100%;padding:30px 0}
.users .title{font-size:30px;margin-bottom:30px}
.cta-section.pricing-cta-section{background:#0076d1;background:-webkit-linear-gradient(top,#0076d1,#5db8ff);background:-moz-linear-gradient(top,#0076d1,#5db8ff);background:-o-linear-gradient(top,#0076d1,#5db8ff);background:-ms-linear-gradient(top,#0076d1,#5db8ff)}
.cta-section.pricing-cta-section .btn-sign-ye{color:#0076d1}
@media (min-width:768px){.index-headline-img{position:absolute;left:46%;top:0;width:968px}
.feature-index{padding-top:100px}
.feature-index h2.title{padding-left:30px;margin-top:50px;margin-bottom:60px}
.feature-index .p-btn{padding-left:30px}
.lang .title:first-child{margin-top:15%}
}
@media (max-width:991px){.headline-bg.index-headline-bg{height:575px}
.index-headline-img{width:813px}
.feature-index{height:600px}
.feature-index h2.title{margin-top:20px;margin-bottom:40px;padding-left:20px;font-size:30px}
.feature-index h2.title span{font-size:24px;margin-bottom:10px}
.feature-index .p-btn,.feature-index p.more{padding-left:20px}
.steps{padding-top:100px;padding-bottom:100px}
.lang .title{font-size:34px;margin:0}
.lang .intro-more{margin-top:30px}
.products{padding-top:50px}
}
@media (max-width:767px){.headline-bg.index-headline-bg{height:800px}
.feature-index{height:auto;text-align:center;overflow:visible;padding-top:40px!important}
.feature-index .index-headline-img{max-width:85%;margin-bottom:-6%}
.feature-index h2.title{padding-left:0;margin-bottom:20px;text-align:center;font-size:36px!important}
.feature-index h2.title span{font-size:24px;margin-bottom:5px}
.feature-index p.more{text-align:center;margin-bottom:40px}
.steps{padding-top:150px;padding-bottom:100px}
.steps .fea-img{margin:auto}
.steps .icon{max-width:110px;width:100%}
.steps .text{margin:auto;font-size:20px;text-align:center}
.steps .intro-text{margin-left:0;width:100%;max-width:100%;text-align:center;margin-bottom:50px}
.steps .single-img{margin-top:30px}
.lang{padding:80px 0;text-align:center}
.products{padding-top:60px}
.users{padding:80px 0 0}
.users img{padding:20px 0}
.users .title{font-size:24px!important}
.users .num{max-width:300px}
}
@media (max-width:480px){.headline-bg.index-headline-bg{height:610px}
.feature-index .index-headline-img{max-width:95%}
.feature-index{padding-top:30px!important}
.feature-index h2.title{font-size:26px!important}
.feature-index h2.title span{font-size:18px}
.steps{padding-top:110px;padding-bottom:50px}
.steps .title{margin-bottom:10px}
.steps .intro-more{margin-top:30px}
.steps .intro{font-size:16px}
.steps .intro-text{margin-bottom:40px}
.products .pro{margin:0}
.products .pro a:nth-child(1) img,.products .pro a:nth-child(2) img,.products .pro a:nth-child(3) img{display:block;float:none;border:0;width:100%;margin:0 auto 2px}
.ui{padding-top:60px}
.ui>img{width:90%}
.ui p.intro{margin-bottom:15px}
.ui p.try{margin-bottom:70px}
.users .num{font-size:48px}
.hidden-xxs{display:none}
}
@media (max-width:375px){.steps{padding-top:90px}
.steps h3.title{font-size:26px!important}
}

附件:下载该文件资源,减少时间成本(增值服务)