zoukankan      html  css  js  c++  java
  • 8款功能强大的最新HTML5特效实例

    HTML5非常强大,今天我们再一次向大家分享8款功能强大的最新HTML5特效实例,包含菜单、图片、Canvas动画等,一起来欣赏吧。

    1、HTML5 Canvas画板画图工具 可定义笔刷和画布

    HTML5 Canvas还有一个比较实用的应用,那就是网络画板,这样我们就可以在网页上直接进行画图操作。今天要分享的这款HTML5 Canvas画图工具就可以简单实现网络画图的功能,我们可以自定义笔刷的类型、粗细、颜色,也可以定义画布的大小和背景颜色等。我们也可以对这款HTML5画图工具进行扩展,让它的画图功能更加完善。

    html5-canvas-draw

    在线演示        源码下载

    2、HTML5梦幻特效 可给任意元素添加魔幻效果

    我们之前介绍HTML5动画特效比较多的是HTML5 3D特效,今天我们来换一种风格,来分享一款看起来比较魔幻的HTML5特效。它可以给网页上任意元素(图片、文字等)添加这么一种效果,即鼠标滑过时,元素上就会出现非常魔幻的动画特效,什么特效呢?你可以点开demo链接查看。

    html5-magic-effect

    在线演示        源码下载

    3、CSS3波浪形菜单 结合背景超级绚丽

    我们分享过许多各种各样的CSS3菜单,应该说效果都比传统的CSS菜单强悍。这次要分享的这款CSS3菜单有点特别,菜单的整体形状类似波浪形,鼠标滑过菜单项时也会改变背景色表示该菜单项被激活。另外该CSS3菜单结合不错的背景图片效果更加震撼。

    css3-wave-menu

    在线演示        源码下载

    4、HTML5播放器API集合 轻松学会HTML5播放器开发

    之前我们分享了两款不错的HTML5播放器,分别是HTML5视频播放器Video.JsHTML5播放器神话 卡带式古典播放器,效果都非常酷。今天我再分享一款最基本的HTML5视频播放器,这个播放器演示罗列了所有操作HTML5播放器的API,初学者可以更好的学习和使用HTML5播放器。

    html5-video-api

    在线演示        源码下载

    5、CSS3带图标提示插件 多主题颜色

    在网页中,我们操作完耗时的操作,最好给用户一个提示,这个CSS3插件就实现这个提示功能。该CSS3提示功能有几种不同的颜色,并且每一个提示框都有一个指定的小图表。用户可以点击关闭按钮来关闭提示框,提示框出现淡出的CSS3效果。

    css3-notification

    在线演示        源码下载

    6、HTML5 Canvas模拟翻滚动画 3D视觉效果

    HTML5作为最先进的浏览器技术,可以创造出很多不同凡响的特效应用,尤其是3D动画更是轻而易举,大家可以在之前我们分享的HTML5动画栏目下欣赏到很多超酷的HTML5动画,也可以在HTML5 Canvas栏目下学习HTML5 Canvas应用的方法。今天要分享的这款HTML5 Canvas模拟翻滚动画特效给你呈现了不一样的3D视觉特效,一起来欣赏吧。

    html5-canvas-roll

    在线演示        源码下载

    7、CSS3 Lava Lamp动画下拉菜单 菜单很简洁

    之前我们分享过一些漂亮的CSS3菜单,来回顾一下:CSS3灰色按钮菜单CSS3 飘带菜单等,大家可以前往CSS3菜单类目下查看演示和下载源码。今天我们分享的这款CSS3菜单也是下拉菜单,鼠标滑动到相应菜单项时,菜单项下方会滑过一条漂亮的线条。

    css3-lava-lamp-menu

    在线演示        源码下载

    8、HTML5/CSS3悬浮菜单 可自定义小图标

    前些天我们分享过一款非常有特色的CSS3菜单HTML5/CSS3鬼脸表情下拉菜单,非常可爱。今天要分享的这款CSS3菜单是悬浮菜单,当鼠标滑过菜单项时,整一个菜单项即会悬浮上来。另外,菜单还允许你自定义漂亮的小图标,小图标也会悬浮上来,非常不错。

    html5-css3-float-menu

    在线演示        源码下载

    以上就是8款功能强大的最新HTML5特效实例,欢迎收藏和分享。(www.html5tricks.com

    本文由html5tricks收集整理,转载请务必保留原文链接
    http://www.html5tricks.com/8-functional-html5-effect.html

  • 相关阅读:
    将光标定位于输入框最右侧的实现方式
    Canvas学习笔记
    CSS3 颜色模式
    CSS ^ $选择器
    jQuery.Validator Sample
    让网页的title动起来
    转:线程间操作无效: 从不是创建控件“”的线程访问它~~~的解决方法~
    winform 表单正则表达式验证 示例(ValidationRule)
    详解用Navicat工具将Excel中的数据导入Mysql中
    PHP面试题之实现输出100以内的质数
  • 原文地址:https://www.cnblogs.com/boonya/p/3612982.html
Copyright © 2011-2022 走看看