阅读更多

7顶
1踩

Web前端

原创新闻 9 款超绚丽的 HTML5/CSS3 动画特效

2014-06-05 11:16 by 见习编辑 html5_dev 评论(6) 有14693人浏览
HTML5现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验。今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单、按钮、图片、Loading加载动画等,一定会有你需要的。

1、CSS3飘带状3D菜单,菜单带小图标

这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形成非常酷的3D视觉效果。这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航。



在线演示  /  源码下载

2、HTML5/CSS3 3D纸片折叠动画

这是一款纸片折叠动画特效,利用HTML5和CSS3的相关特性,我们可以将一张张纸片折叠起来,形成很酷的3D动画效果。



在线演示  /  源码下载

3、CSS3精美小图标菜单导航

这是一款更加精美清新的CSS3小图标菜单导航,鼠标滑过这款菜单时还可以在图标和文字之间形成切换的动画效果。



在线演示  /  源码下载

4、HTML5 webkit 3D立方体图片旋转滑块应用

这是一个3D效果模型,你可以用图片替换演示中的立方体4个面,这样就可以将这款HTML5立方体旋转动画改造成HTML5 3D焦点图了,由于是基于webkit的,所以有浏览器限制,Google Chrome最佳。



在线演示  /  源码下载

5、CSS3发光Loading加载动画

这是一款与众不同的CSS3 Loading动画效果,它是由几个不同的动画效果组合而成的,像文字打印效果、发光效果、飞入飞出效果,这几种效果都非常酷。



在线演示  /  源码下载

6、基于SVG的HTML5圆盘时钟动画

这是一款基于SVG的HTML5圆盘时钟动画,和上一款类似,这款HTML5时钟也能准确获取本地的时间,并且秒针、分针、时针可以走动,效果还不错。



在线演示  /  源码下载

7、CSS3响应式侧边菜单,菜单带小图标

这是一款基于CSS3的响应式侧边菜单,这款菜单可以在PC浏览器网页上和移动设备的网页上有着同样不错的效果,它会根据屏幕大小自动实现菜单位置的变化,可以让用户在不同分辨率的屏幕上获得最佳的体验。



在线演示  /  源码下载

8、纯CSS3背景图标渐变按钮

这是一组非常可爱的CSS3按钮组合,这款按钮的效果是当你把鼠标滑过它们时,按钮上的背景小图标就会发生渐变效果,类似淡入淡出的特效。



在线演示  /  源码下载

9、HTML5颜色渐变3D文字特效

这是一款HTML5 3D文字特效,文字的颜色是渐变的,同时有文字阴影,更加凸显了3D立体的效果。



在线演示  /  源码下载

以上就是9款超绚丽的HTML5/CSS3应用和动画特效,欢迎收藏分享。

原文链接:http://www.html5tricks.com/9-cool-html5-css3-app-effect.html
  • 大小: 27 KB
  • 大小: 41.6 KB
  • 大小: 10 KB
  • 大小: 22.8 KB
  • 大小: 3.9 KB
  • 大小: 21.6 KB
  • 大小: 16.9 KB
  • 大小: 51.3 KB
  • 大小: 10 KB
7
1
评论 共 6 条 请登录后发表评论
6 楼 yujiain2008 2014-06-19 13:19
break
5 楼 lz958942 2014-06-12 10:16
恩恩,我也标记下以后用
4 楼 laodongbao 2014-06-11 17:20
标记下以后用
3 楼 hahasimie 2014-06-06 11:20
1 5 8 9
2 楼 fxfyj1227 2014-06-05 14:04
HTML5、CSS3强大,还没学呢,落伍了。
1 楼 18215361994 2014-06-05 12:05
HTML5、CSS3好强大,很炫,很喜欢!

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 应聘上了天津天地伟业公司,大家帮看看待遇怎么样,值不值得,谢谢了

    公司:天津天地伟业公司,做安防监控行业的 待遇:基本工资3200,有绩效奖金(不知道多少),有五险一金,年终一个月奖金,解决天津户口,公司有宿舍(200一个月...有了解的帮看一下,待遇怎么样,公司怎么样,谢谢了

  • 教给大家怎么跟好友一起看视频?亲测可用

    教给大家怎么跟好友一起看视频?亲测可用。 薯片APP 哈喽,大家好。最近很多朋友在后台留言咨询薯片小姐姐怎么跟好友一起看视频,相信大家在日常生活中都会遇到这样的问题,想找可用邀请好友一起同步观看视频的APP...

  • 大学四年,看过的优质书籍推荐

    今天我就给大家介绍一些我这几年看过的一些自认为优秀的书籍,由于我看的大部分书籍可以说都是通用的,所以如果你有时间的话,还是挺建议看看的,特别是学生。 而且,我还给大家准备好了电子书,文末即可获取,感觉...

  • 计算机 在哪看是什么32位,怎么看电脑是32位还是64位?

    原创怎么看电脑是32位还是64位?编辑:小葫芦来源:PC下载网资讯 原创时间:2018-03-05 09:53:40有很多软件是需要区分操作系统安装的,那么电脑如何区分32位和64位呢?方法步骤:1.相信大家平时在电脑上安装一些软件的...

  • 怎么通过网络看不见我的计算机,网上邻居看不到自己和别人电脑怎么办

    小编在这里教大家如何解决这个问题,希望能帮到大家。网上邻居看不到自己和别人电脑的故障现象一连接到局域网之后,在“网上邻居”中只能看到自己的电脑,看不到工作组的其它电脑。网上邻居看不到自己和别人电脑的...

  • 【视频】今天帮公司面试了个要25K的Java程序员,看看我都问他些什么问题

    今天帮公司面试了个要25K的Java程序员,看看我都问他些什么问题 相关资料 Tip:本来这一栏有很多我准备的资料的,但是都是外链,或者不合适的分享方式,博客的运营小姐姐提醒了我,所以大家去公众号回复【 ...

  • 入门级都能看懂的softmax详解

    1.softmax初探 在机器学习尤其是深度学习中,...首先我们简单来看看softmax是什么意思。顾名思义,softmax由两个单词组成,其中一个是max。对于max我们都很熟悉,比如有两个变量a,b。如果a>b,则max为...

  • JAVA程序员必看的15本书-JAVA自学书籍推荐

    我想就我自己读过的技术书籍中挑选出来一些,按照学习的先后顺序,推荐给大家,特别是那些想不断提高自己技术水平的Java程序员们。此外,大家可以加入457036818交流群,互相分享一下关于JAVA方面的知识。 一、Java...

  • 华为OD面经8月整理,来看看3位上岸考友都经历了什么~

    大概就这些情况,希望能帮到大家。讲真这是我碰过流程最长的公司了,没有之一。不过每面都不难。 以上内容来自互联网考友分享,OD联盟收集整理,如有侵权,直接私信橡皮擦进行删除~ 4. OD机考题库推荐 特别提醒,...

  • 【软件推荐】还用着Windows自带的看图软件吗?

    今天就给大家推荐一款干净、快速、全能的开源图像查看器。 PicView 这是一款完全免费开源的图像查看器,软件安装需要占用40M左右空间,同时也有无需安装的便携版本供我们选择。 在看图软件中不算小,但也有一些特别...

  • Nodepad++安装和使用教程【看码写码神器】

    Nodepad++使用和安装教程【看码写码神器】 第一章 安装教程 【1】软件获取【software get】 【2】安装成功【installation succeeded】 第二章 使用教程 【1】文件功能【file function】 【2】编辑功能【edit ...

  • 工作十年,分享看过的优质 Java 书籍

    不知不觉,我已经接触 Java 11 年了——从 2008 年北京...这里就分享一些我精挑细选后的优质书籍,希望能帮大家少走点弯路。 在读这些书的过程中,我还写下了不少博文,这些文章也帮助过不少年轻人,他们经常发私...

  • gpuz怎么看显存颗粒

    不过有些网友是刚开始使用,还不知道gpuz怎么看显存颗粒。下面小编就教下大家gpuz查看显存颗粒的方法。 首先,显存颗粒是显存的物理存储组成单元。显存颗粒的类型(DDR3或DDR4),单颗容量(MB),单颗位宽(bit),理论显存...

  • Caused by: java.lang.NullPointerException大家帮我看下,这是怎么回事?

    ============问题描述============ 第1次调试安卓程序,大家帮我看看根据Logcat的提示,问题是不是131行,大家帮我分析下。在线等。。。。。 ============解决方...

  • 你想被开除吗?来看看程序员【离职小技巧】吧

    『纵横职场秘籍』 Leader 说 “辛苦了”,你就回“你也别闲着,帮我倒杯水”,表示对领导关怀的认可。 Leader 微信找你,你就回 “?” 或 “有事?”,简单而高效。 Leader 问你进度怎么这么慢,你就回“有本事你...

  • 入门黑客必看书籍

    昨天推送的是视频,今天给大家推荐基本入门渗透测试的好书,以结合昨天文章一起学习,忘记了的可以回复“学习之路”会自动跳出文章的,好的话不多说,直接上主菜了! 第一本当然是我们网络基础的书,这里推荐...

  • 自学 6 个月 Java 找到了一份 15K 的工作,师弟的方式值得推荐给大家

    我有一个大学校友,他是去年 8 月份才开始正式学习 Java 的,之前在一家私企工作了 5 年,工资一个月只有不到 6000 块,日子过得很苦逼,毕竟郑州的房贷压力也不小,公司就那么大,除非领导离职,否则根本看不到晋升...

  • 是男人就下100层【第二层】——帮美女更衣(1)

    去年有一段时间有一个应用下载量很高,都是男同志的功劳,现在又出了第二版,第二层我们就来实现一下《帮美女更衣》这个应用,很多男生应该熟悉这个应用了吧,这里我就不解释里面的内容了,...先看看我们要实现的效果

  • 初学者都能看懂的95%置信区间

    首先我们看看点估计的含义: 是用样本统计量来估计总体参数,因为样本统计量为数轴上某一点值,估计的结果也以一个点的数值表示,所以称为点估计。点估计虽然给出了未知参数的估计值,但是未给出估计值的可靠程度,...

  • 看完让你彻底搞懂Websocket原理

    偶然在知乎上看到一篇回帖,瞬间觉得之前看的那么多资料都不及这一篇回帖让我对websocket的认识深刻有木有。所以转到我博客里,分享一下。比较喜欢看这种博客,读起来很轻松,不枯燥,没有布道师的阵仗,纯粹为分享...

Global site tag (gtag.js) - Google Analytics