HTML5/CSS3超酷环形动画菜单

非常酷的CSS3垂直下拉动画菜单

昨天我向大家介绍了一款兼容性不错的jQuery淡入淡出下拉菜单,今天要分享一款相对绚丽的CSS3垂直下拉动画菜单,不过需要支持CSS3的浏览器才能有效果.下面是效果图,一起看看. 我们也可以在这里查看菜单DEMO演示. 下面来分析一下源代码,首先是HTML代码: <nav> <ul class="mcd-menu"> <li> <a href=""> <i class="fa fa-home"…

之前为大家介绍了好几款导航菜单,今天要给大家带来一款纯css3实现的环形导航菜单.该导航比较新鲜,列表图标位于中间,单击列表图标的时候,各项分布于列表图表的四周.形成一个环形.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="container"> <h1> Cool Open/Close menu in full CSS</h1> <input type="checkbox" id…

css3制作左右拉伸动画菜单

微博上看到这样一篇文章(http://js.itivy.com/?p=495),用jquery和css3制作左右拉伸动画菜单,看了下实现效果(http://js.itivy.com/jiaoben963/index.html),感觉用css3就够了,不需要jquery.于是尝试了下,只用css3基本上也实现了原文的效果,如下: 点击顶栏的result可以看到效果,未作浏览器兼容性优化.…

HTML5超酷秒表动画可暂停和重置秒表

关于HTML5和CSS3的时钟应用在之前我们已经分享过不少了,还有一些HTML5的日期选择应用.今天我们要分享一款基于HTML5和CSS3的圆盘秒表动画,秒表可以精确到0.001秒,并且可以在计时过程中暂停计时,同时秒表可以随时重置. 在线演示下面来分析一下实现的源代码,主要由HTML和CSS代码组成,CSS相对比较复杂,因为涉及到动画. HTML代码: <input id="help" name="controls" type="checkbox…

jquery+html5制作超酷的圆盘时钟表

自己封装的一个用HTML5+jQuery写的时钟表代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76…

css3 炫酷下拉菜单

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>炫酷下拉菜单</title> <style> .ulBox { width: 500px; margin: 0 auto; } .ulBox li { float: left; list-style: none; background-color: green; padding: 0…

28种CSS3炫酷载入动画特效

这是一组效果很炫酷的纯CSS3 Loading载入动画特效.这组loading动画共同拥有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完毕的,每个载入动画都构思新颖.效果很的酷. 效果演示:http://www.htmleaf.com/Demo/201503301597.html 下载地址:http://www.htmleaf.com/css3/css3donghua/201503301596.html…

CSS3超酷移动手机滑动隐藏側边栏菜单特效

这是一组共4种效果很炫酷的CSS3移动手机滑动隐藏側边栏菜单特效. 这四种效果各自是:默认的点击滑动側边栏菜单效果.带3D transforms的滑动側边栏效果.文字缩放和淡入淡出效果的滑动側边栏以及使用translate来实现滑动側边栏的效果. 每个滑动側边栏效果都带有从右到左淡入淡出的滑动过渡效果. 菜单条中的菜单项以一个接一个的方式显示,这样的效果是通过为它们分别加入 transition-delay 来实现的.以下来看看默认的滑动側边栏效果的制作方法. 插件中使用了font-awesom…

纯CSS3超酷3D旋转立方体动画特效

简要教程这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使用CSS来制作立方体动画,代码简洁易懂,效果更是令人惊叹!下面来看看制作方法. HTML结构立方体结构中,使用一个wrapper div来包裹立方体.在里面使用6个div来制作立方体的6个面. <div class="wrap"> <div class="cu…

【HTML5/CSS3超酷环形动画菜单】的更多相关文章