canvas动画 - 背景线条

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>

附件

下载资源包.rar

以上就是关于“ canvas动画 - 背景线条 ” 的全部内容。

canvas动画 - 背景线条 - 应用篇相关推荐

构造函数 + 原型链继承 + 临摹面向对象模式的canvas动画框架
感谢谢帅shawn分享的canvas动画框架,我再来分一次 //动画框架 http://neekey.net/blog/2011/05/11/canvas-%E7%AE%80%E5%8D%95%E5% ...
canvas动画时钟动画太阳系动画动态蚂蚁线全景照片
canvas给我们提供了绘图API,这些API基于JavaScript实现,那么我们可以方便的实现一些动画,在这里我们将展示几个经典的动画绘制技巧,包括:时钟,太阳系,动态蚂蚁线,全景照片动画绘制的 ...
Canvas 动画的性能优化实践
作者:方勤原文:https://blog.csdn.net/weixin_39843414/article/details/103502053 前言去年圣诞节有一个下雪的背景动画的需求.在实现这个 ...
小程序直播-疯狂点赞Canvas动画实现原理解析
近期,电商直播业务热火朝天,直播间有一个很重要的互动:点赞. 为了烘托直播间的氛围,直播相对于普通视频或者文本内容,点赞通常有两个特殊需求: 点赞动作次数不限制,引导用户疯狂点赞直播间的所有疯狂点赞 ...
html5常用动画效果教程,HTML5教程 8个经典HTML5 Canvas动画学习
本篇教程探讨了HTML5教程 8个经典HTML5 Canvas动画学习,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < HTML5非常强大,尤其是Canvas ...
干货 | React 中的 Canvas 动画
作者简介掺水的酱油,携程软件技术专家,关注大前端及移动端相关技术. 移动端硬件性能越来越好的今天,页面的交互也越来越丰富,Web 体验在不断向原生应用靠拢,加入了越来越多的手势与动画.除了常见的 C ...
7、《每周一点canvas动画》——边界检测与摩擦力(1)
本章已经是<Canvas 动画系列>动画的第七篇了,我保证这一章不会再有难的数学公式和物理概念.鉴于有的同学并不是从第一章开始看这个系列,我将会把本文所用到的一些类文件和工具函数文 ...
iOS动画系列之五：基础动画之缩放篇旋转篇Swift+OC
这一篇主要介绍基础动画之缩放和旋转.这些基本操作分享完之后,我想想可以找个稍微复杂一点点的动画做做啦. 这篇继续基础篇,分享一下缩放和旋转.因为整体思路和平移基本上没有变化,加上源代码里面也有OC版本 ...
canvas动画3：交互
canvas动画3 时隔很久,本人终于又写博客了(重度拖延症),把之前留下的canvas交互动画讲一讲. 电脑上的交互,指的是鼠标和键盘,我们今天主要用的是鼠标. 既然是鼠标的话,就要获取鼠标的各种事 ...

canvas动画 - 背景线条 - 应用篇

Canvas纯色背景+线条波动

效果图如下：

代码如下：

附件

canvas动画 - 背景线条 - 应用篇相关推荐

最新文章

热门文章