首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

css3icon导航

作者：走ln方 | 来源：互联网 | 2013-04-23 14:44
主要应用了border-radius，transition，font-face。先设置一个宽度并设置overflow为hidden，然后鼠标滑过用transition来改变其宽度，以显示文字信息部分。至于三个icon，前面两个为font-face做的，后面一个为图片...">

 

主要应用了border-radius，transition，font-face。先设置一个宽度并设置overflow为hidden，然后鼠标滑过用transition来改变其宽度，以显示文字信息部分。至于三个icon，前面两个为font-face做的，后面一个为图片。至于三个icon，前面两个为font-face做的，后面一个为图片（转载： http://www.w3cplus.com/demo/426.html  ）
 
 
01 .appstorebutton {
02     height: 80px;
03     width: 80px;
04     margin: 50px;
05     position: relative;
06     overflow: hidden;
07     float: left;
08  
09     -webkit-border-radius: 40px;
10        -moz-border-radius: 40px;
11             border-radius: 40px;
12  
13     -webkit-transition: width 1s ease;
14        -moz-transition: width 1s ease;
15          -o-transition: width 1s ease;
16         -ms-transition: width 1s ease;
17             transition: width 1s ease;
18 }
19  
20 .appstorebutton:hover {
21     width: 275px;
22 }
23  
24 .appstorebutton a {
25     color: white;
26     text-decoration: none;
27 }
28  
29 /*Paragraph*/
30 .appstorebutton p {
31     font: 30px/1 Helvetica, Arial, sans-serif;
32     text-align: center;
33     color: white;
34     margin: 4px 0 0 65px;
35     width: 180px;
36 }
37  
38 .appstorebutton p small {
39     font-size: 15px;
40 }
41  
42 .iphone small:before {
43     content: "O";
44     position: absolute;
45     font: 70px/1 &＃39;ModernPictogramsNormal&＃39;, Helvetica, sans-serif;
46     top: 10px;
47     left: 20px;
48 }
49  
50 .ipad small:before {
51     content: "Q";
52     position: absolute;
53     font: 70px/1 &＃39;ModernPictogramsNormal&＃39;, Helvetica, sans-serif;
54     top: 10px;
55     left: 13px;
56 }
57  
58 .mac small:before {
59     content: url(imac.png);
60     position: absolute;
61     top: 22px;
62     left: 18px;
63 }
64  
65  
66 /*Button Colors*/
67 .iphone {
68     background: #7b7a7f;
69 }
70  
71 .ipad {
72     background: #2ea9dc;
73 }
74  
75 .mac {
76     background: #dc2e2e;
77 }
78  
79 /*Font-Face*/
80 @font-face {
81     font-family: &＃39;ModernPictogramsNormal&＃39;;
82     src: url(&＃39;modernpics-webfont.eot&＃39;);
83     src: url(&＃39;modernpics-webfont.eot?#iefix&＃39;) format(&＃39;embedded-opentype&＃39;),
84          url(&＃39;modernpics-webfont.woff&＃39;) format(&＃39;woff&＃39;),
85          url(&＃39;modernpics-webfont.ttf&＃39;) format(&＃39;truetype&＃39;),
86          url(&＃39;modernpics-webfont.svg#ModernPictogramsNormal&＃39;) format(&＃39;svg&＃39;);
87     font-weight: normal;
88     font-style: normal;

推荐阅读
author-avatar
走ln方
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有