转载:http://www.html5cn.org/article-5363-1.html
问题:虽然已经开发前端n些日子了,可是对一些例子仍旧感觉不错。
解决方案:该教程,我们将讨论CSS3的一些新功能和新特性,并教你在不使用图片和JavaScript的情况下,如何制作酷炫的圆形导航菜单。该实例将用到CSS3的新特性: border-radius和animation。
第一步:编辑菜单的HTML代码
菜单包含三个列表项,分别取名为“Menu1”、“Menu2”、“Menu3”。
1
2
3
4
5
6
7
8
|
view plaincopy to clipboardprint? < div class=“css3Menus”> < ul > < li >Menu1</ li > < li >Menu2</ li > < li >Menu3</ li > </ ul > </ div > |
第二步:设置菜单的背景
在该步骤中,我们将把导航的背景设置为黑色。宽度、高度和内边距为可选项,可以不设置。
1
2
3
4
5
6
7
|
view plaincopy to clipboardprint? .css 3 Menus { background : #14080a ; width : 506px ; height : 260px ; padding : 20px ; } |
如下图:
第三步:利用border-radius,制作圆形导航。
该步中,我们会利用CSS3的一些酷的功能,尤其是border-radius ,将每个列表项的背景设置为黄色,形状为圆形。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
view plaincopy to clipboardprint? ul { list-style : none ; } li { float : left ; font : 14px / 10px Arial , Verdana , sans-serif ; color : #FFF ; background-color : #CCCC00 ; width : 80px ; height : 80px ; padding : 20px ; margin : 0 30px 0 0 ; -webkit-border-radius: 60px ; -moz-border-radius: 60px ; border-radius: 60px ; } |
菜单看起来呈下面样子:
第四步:设置菜单的对齐方式
本步骤中,我们将为每个列表项设置特定的背景颜色与位置:
1
2
3
4
5
6
7
8
9
10
11
12
|
view plaincopy to clipboardprint? li#menu 1 {
background-color : #00FFCC ;
} li#menu 2 {
background-color : #CC9900 ;
margin-top : 100px ;
} li#menu 3 {
background-color : #33FF66 ;
margin-top : 50px ;
} |
现在菜单看起来呈下面样子:
第五步:设置菜单中链接的对齐方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
view plaincopy to clipboardprint? li a { color : #FFF ;
text-decoration : none ;
display : block ;
width : 80px ;
height : 45px ; text-align : center ;
padding : 35px 0 0 0 ;
margin : 0 40px 0 0 ;
-webkit-border-radius: 40px ;
-moz-border-radius: 40px ;
border-radius: 40px ;
} li#menu 1 a {
background-color : #FF0000 ;
} li#menu 2 a {
background-color : #660033 ;
} li#menu 3 a {
background-color : #66CCCC ;
} |
菜单现阶段的样子:
第六步:定义另一种效果,当鼠标悬浮在链接上时进行展现
1
2
3
4
5
6
7
8
9
10
11
12
|
view plaincopy to clipboardprint? li a:hover, li a:focus, li a:active { width : 120px ;
height : 65px ;
padding : 55px 0 0 0 ;
margin : -20px 0 0 -20px ;
-webkit-border-radius: 60px ;
-moz-border-radius: 60px ;
border-radius: 60px ;
} |
菜单样式如图:
第七步:最后为导航增加动画效果
1
2
3
4
5
6
7
8
9
10
11
12
|
view plaincopy to clipboardprint? li a:hover, li a:focus, li a:active { -webkit-animation-name:bounce; -webkit-animation-duration: 1 s;
-webkit-animation-iteration-count: 4 ;
-webkit-animation- direction :alternate;
} @-webkit-keyframes bounce{from{ margin : 0 40px 0 0 ;}
to{ margin : 120px 40px 0 0 ;}
} |
菜单所产生的动画效果:
结论
通过上面教程,你已经学到如何制作酷的动画菜单。在制作过程中不需要使用JavaScript和图片,只需要使用CSS3的一些酷的特性即可。该菜单可以完美地运行于Chrome和 Safari浏览器。在 Firefox浏览器中,无法看到动画效果。
注:真的感谢这位Laeeq博主,我对前端的兴趣又倍增了!
相关推荐
帮助你在不使用图片和JavaScript的情况下,如何利用CSS3的新特性和新功能,创建绚丽的动画导航。 该教程,我们将讨论CSS3的一些新功能和新特性,并教你在不使用图片和JavaScript的情况下,如何制作酷炫的圆形导航...
Css3折叠菜单-可展开的树形导航菜单,其实就是折叠、展开式的菜单,应用了HTML5重绘而成,无使用jquery,完全CSS3技术实现,面向Android手机等移动终端设备浏览,请注意不要使用IE等浏览器查看效果。
HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 ...
CSS3 accordion-menu 竖向垂直展开的菜单,这种形式的菜单使用传统的CSS技术也是很容易就实现的,不过为了迎合当前的新技术CSS3,而且CSS3在移动设备端有很好的扩展性,因此用CSS3代码重新写了一个简洁的css3 ...
CSS在JS预编译器将静态CSS-in-JS对象预编译为CSS字符串目前正在进行的工作问题您喜欢CSS-in-JS的优点,但是不喜欢在不使用实际CSS文件方面必须进行的一些性能特征和权衡。这个解决方案该模块接收您的源代码,并为您...
HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度登录界面练习 HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度登录界面练习 HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度...
CSS-Circle-Menu, 用CSS生成的飞出圆菜单 CSS圆飞行导航我的循环飞出CSS导航菜单组件,用CSS3构建。 在这里查看演示。 用法要使用,在应用程序中包含CSS和 JavaScript 。 按如下方式标记你的菜单:<nav class="c-...
css+js 漂亮二级横向导航菜单-大全 样式多,供你选择
学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记...
名称:ABC JS-CSS Injector -------------------- 版本:2.1 作者:abcelearning 分类:其他 -------------------- 概述:脚本和样式注入的最佳且更快的解决方案。 描述: 脚本和样式注入的最佳且更快的解决方案。 ...
前端开发手册大全11个(CSS-javascript-jquery-w3c-XHTML-XML).zip CSS参考手册-Web前端开发参考手册系列 Web前端开发规范手册必备 CSS参考手册 javascript参考手册 CSS参考手册 jquery参考手册 XML参考手册 XHTML...
css css样式--百度端午龙舟 百度logo,动态显示,人船同步显示。
CSS3制作的非常漂亮的3D菜单按钮效果!
rollup-plugin-postcss的 inject 模式下,把导出后组件引用的xxx.scss.js转换为xxx.css进行引入 本插件依赖 ,主要是针对组件按需加载的场景下进行的优化适配 Install npm: npm install -D rollup-plugin-postcss-...
d3-threejs:使用D3和THREE.js实现的CSS 3D变换
为css-modules-loaders键入Webpack加载器,可从css-loader动态生成CSS模块的TypeScript类型免责声明该存储库是未维护的存储库的分支。安装通过npm npm install --save-dev @teamsupercell/typings-for-css-modules-...
球形多图3d旋转,纯css3代码
热门标签 css3导航菜单 css3图片 css3 transform css3 transition css3价格表 css3进度条 css3提示框 css3时钟 css3三角形 css3按钮 css3圆角 css3渐变 css...
CSS2.0-CSS3.0-HTML5-JavaScript-JDK1.8-正则表达式,全中文帮助文档,全都是CHM版 里面包含15个CHM文件,其中有六大类,有的有多个版本全是中文版 CSS2.0就标准的一个版本,够用了 CSS3.0有P零雾雨版,ISD版还有,...