版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35393869/article/details/82799870
Canvas纯色背景+线条波动
效果图如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas背景 线条动画</title>
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration: none;}
.bg-blue-grad {
overflow: hidden;
background-image: linear-gradient(to top, #4272ef, #2577fe);
}
.main {
margin: 0 auto;
/* width: 100%; */
max-width: 1200px;
width: 1200px;
overflow: hidden;
height: auto;
clear: both;
}
.regisnow-wrap {
padding: 40px 0;
position: relative;
overflow: hidden;
}
.registnow {
max-width: 1200px;
margin: 0 auto;
}
.registnow span {
display: inline-block;
text-align: center;
font-size: 28px;
line-height: 45px;
color: #ffffff;
width: 60%;
vertical-align: middle;
}
.registnow .btn-wrap {
display: inline-block;
width: 35%;
vertical-align: super;
text-align: center;
vertical-align: middle;
height: 90px;
position: relative;
}
.regist-btn {
display: inline-block;
border-radius: 4px;
color: #2676fe;
border: 1px solid #4074e1;
font-size: 20px;
width: 175px;
text-align: center;
height: 39px;
line-height: 39px;
background-color: #ffffff;
font-weight: bold;
-webkit-transition: background-color 0.1s ease-in-out;
-moz-transition: background-color 0.1s ease-in-out;
-o-transition: background-color 0.1s ease-in-out;
transition: background-color 0.1s ease-in-out;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -88px;
}
.registnow .btn-wrap .in-text {
font-size: 14px;
color: #ffffff;
padding-top: 60px;
}
</style>
</head>
<body>
<div id="curve-regisnow" class="bg-blue-grad regisnow-wrap">
<div class="main registnow" style="position: relative; z-index: 5;">
<span> 快来开启您的云计算之旅 </span>
<div class="btn-wrap">
<a class="regist-btn" href="">立即注册</a>
<div class="in-text">
注册即享云主机免费试用套餐
</div>
</div>
</div>
<canvas style="position: absolute; top: -200px; left: 0px;" width="1349" height="500"></canvas>
<canvas style="position: absolute; top: -200px; left: 0px;" width="1349" height="500"></canvas>
<canvas width="1432" height="500" style="position: absolute; top: -200px; left: 0px;"></canvas>
<canvas width="1432" height="500" style="position: absolute; top: -200px; left: 0px;"></canvas>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/drawBezierCurve.js"></script>
<script>
$(document).ready(function(){
//绘制曲线（底部注册）
$('#curve-regisnow').drawBezierCurve({
//自定义canvas尺寸
'customHeight': 500,
'posTop': -200,
//横向距离范围
'minXwidth': 850,
'maxXwidth': 1000,
//偏移量
'startPoint': 0.5,
//速度
'minMoveSpeed': 90,
'maxMoveSpeed': 40,
//曲线条数
'curveNum': 1,
//宽度范围
'minCurveWidth': 1,
'maxCurveWidth': 2,
//透明度范围
'minTransparent': 0.2,
'maxTransparent': 0.6
})
.drawBezierCurve({
//自定义canvas尺寸
'customHeight': 500,
'posTop': -200,
//横向距离范围
'minXwidth': 850,
'maxXwidth': 1000,
//偏移量
'startPoint': 0.5,
//速度
'minMoveSpeed': 80,
'maxMoveSpeed': 30,
//曲线条数
'curveNum': 1,
//宽度范围
'minCurveWidth': 1,
'maxCurveWidth': 2,
//透明度范围
'minTransparent': 0.2,
'maxTransparent': 0.6
});
});
</script>
</body>
</html>
附件
以上就是关于“ canvas动画 - 背景线条 ” 的全部内容。