【分享一个利用HTML5制作的海浪效果代码】的更多相关文章

分享一个利用HTML5制作的海浪效果代码

在前面简单讲述了一下HTML里的Canvas,这次根据Canvas完成了“海浪效果”(水波上升). (O(∩_∩)O哈哈哈~作者我能看这个动画看一下午) 上升水波.gif 动画分析构成:贝塞尔曲线画布:Canvas效果:波浪涨潮(上升.波动)触发条件:点击按钮 贝塞尔曲线.gif 算法实现分析:从sin()函数切入,sin()越大波度起伏越大,简单说就是通过不断改变sin()值来实现海浪效果动画 干货开始: 1.创建触发条件(按钮) 1 2 3 4 5 <button type="butt…

利用html5制作一个时钟动画

<canvas id="clock" width="500" height="500" style="background-color: yellow"></canvas> var clock=document.getElementById("clock"); var cxt=clock.getContext("2d"); function drawNow(){…

利用OpacityMask制作打洞效果

起因 项目上存在一个连线功能,在设计的原型中,在连线中间文字上下各有15像素的空白.接手的同事觉得没思路,问我能不能在不影响连线后面的背景情况下解决该问题.我就抽了点时间给他写了个Demo.回家后趁热打铁,重新写了个Demo,添加和完善了些功能.下面是效果图: 代码实现 OpacityMask 在最开始看到效果图的时候,我就想到利用OpacityMask来解决问题.可能这个属性平时很多朋友都没注意到,因为一般情况下用Opacity就足够了. OpacityMask定义在UIElement中,类型…

分享一个基于HTML5实现的视频播放器

什么是hivideo? 最近一段时间在使用PhoneGap开发一个App应用,App需要播放视频,本想直接使用html5的video,但使用它在全屏播放时不支持横屏播放,只能放弃.最终决定还是自己封装一个播放器算了,免得以后要扩展功能麻烦. 最近迷上hi这个单词,所以我给这个播放器取名叫做:hivideo. hivideo是一款基于html5的视频播放器,摒弃video原有的播放控制条样式,自己重写了一次.支持暂停.播放进度控制.声音控制.全屏播放.如果是要在手机端使用hivideo,全屏播放时…

分享一个基于HTML5实现的视频播放器【转】

什么是hivideo? 最近一段时间在使用PhoneGap开发一个App应用,App需要播放视频,本想直接使用html5的video,但使用它在全屏播放时不支持横屏播放,只能放弃.最终决定还是自己封装一个播放器算了,免得以后要扩展功能麻烦. 最近迷上hi这个单词,所以我给这个播放器取名叫做:hivideo. hivideo是一款基于html5的视频播放器,摒弃video原有的播放控制条样式,自己重写了一次.支持暂停.播放进度控制.声音控制.全屏播放.如果是要在手机端使用hivideo,全屏播放时…

利用css3制作毛玻璃的效果

忙里偷闲,最近又在看许多比较酷炫的效果.现在基于jquery的插件比较多,但是很多插件的兼容性不是太好,所以原生的才是王道.在日常当中,毛玻璃已经不常见了,那是一个很久远年代的东西了.诺,下面就是毛玻璃: 哈哈,不闲扯了,接下来不如正题吧,先看一下终极效果: 嗯,好了,,开始我们的步骤吧: 第一步:进行页面的基本搭建: 我在body上设置了一张大大的背景图,然后中间部分是一个div,html代码如下: <body> <div > iPhone 7 dramatically impr…

利用Clip制作打洞效果

起因 如上篇博文所说,连线原型需要在中间文字上下各留15像素的空白.设计师完成原型之后,问我有没有办法实现,我说,我能想到两种实现方式.其中一种就是上篇博文所说的OpacityMask.第二种就是使用Clip了.下面是效果图: 代码实现 Clip Clip定义在UIElement中,类型为Geometry .MSDN中的解释是获取或设置用于定义元素内容边框的几何图形.实际上不光可以在边框处留住空白,在UI元素里面留出空白也是可以的,只要定义好相关的形状. 矩形空洞 在一个大矩形中去除一个小矩形就…

分享一个纯css制作的动画化，在网页（手机）载入等的时候能够引用！

CSS代码例如以下: /* Custom Stylesheet */ body, html { margin: 0; -webkit-font-smoothing: antialiased; background: #68ABAD; text-align: center; } /* DEMO 1 */ .loader1 { margin: 0 auto; height: 20px; width: 20px; position:relative; -webkit-animation:spin 1.…

flash8中利用遮罩制作图片切换效果

http://www.56.com/w73/play_album-aid-8642763_vid-NDY5ODU2Mzg.html…

CorelDRAW快速制作闪耀钻石项链效果

今天小编为大家分享使用CorelDRAW快速制作闪耀钻石项链效果,过程并不是很复杂,主要用到刻刀工具.智能填充和渐变色的应用,待到一个角完成之后会走一点点捷径,利用旋转复制的方法做出完整的钻石效果,最后在用加上一个半透明的倒影投影效果,整个画面的感觉就有了,现在跟小编一起来学习吧. 1. 首先使用贝塞尔工具创建一个三角对象(保持左边底角为45°),然后用刻刀工具的2点线模式沿直线切割对象,直到大三角形被分成无数个小的图形,如下图所示. 2. 使用智能填充工具选择不同的填充色,分别填充闭合的小图形…