《
利用css3绘制小图标的效果》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/030233ZH013.htm
信任大家都在网上看到用ＣＳＳ画什么机器猫啊，卡通花之类的，
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 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo: Pure CSS GUI icons (experimental) – Nicolas Gallagher</title> <meta name="description" content="Experimental use of CSS to create 84 common graphic user interface icons from semantic HTML."> <link rel="stylesheet" href=" </head> <body> <div class="container header"> <header> <hgroup> <h1>Pure CSS GUI icons</h1> <h2>By <a href=" Gallagher</a></h2> </hgroup> ,利用CSS3的checked伪类实现OL的隐藏显示; <p>Demo for <a href=" CSS GUI icons (experimental)</a>.</p> <p><em>Tested in</em>: Firefox 3.5+, Chrome 5, and Opera 10.6.</p> </header> </div> <!-- EXAMPLES --> <div id="icons" class="container"> <h2><strong>84 GUI icons</strong> created from semantic HTML.</h2> <div class="section"> <h3>User interaction</h3> <ul> <li class="search"><a href="#non">Search</a></li> <li class="comment"><a href="#non">Comment</a></li> <li class="like"><,初识高并发网站系统架构;a href="#non">Like</a></li> <li class="add"><a href="#non">Add</a></li> <li class="remove"><a href="#non">Remove</a></li> <li class="delete"><a href="#non">Delete</a></li> <li class="add-alt"><a href="#non">Add</a></li> <li class="remove-alt"><a href="#non">Remove</a></li> <li class="delete-alt"><a href="#non">Delete</a></li> <li class=",初识CSS（初学者必看）;report"><a href="#non">Report</a></li> <li class="trash"><a href="#non">Trash</a></li> <li class="lock"><a href="#non">Lock</a></li> <li class="unlock"><a href="#non">Unlock<,初学CSS要注意IE6注释bug;/a></li> <li class="update"><a href="#non">Update status</a></li> <li class="retweet"><a href="#non">Retweet</a></li> <li class="save"><a href="#non">Save</a></li> <li class="edit"><a href="#non">Edit</a>,创建CSS的对象 使CSS对象的粒度合适;</li> <li class="download"><a href="#non">Download</a></li> <li class="arrow forward"><a href="#non">Forward</a></li> <li class="arrow back"><a href="#non">Back</a></li> <li class="arrow up"><a href="#non">Up</a></li> <li class="arrow down"><a href="#non">Down</a></li> <li class="arrow-alt forward"><a href="#non">Forward</a></li> <li class="arrow-alt back"><a href="#non">Back</a></li> <li class="arrow-alt up"><a href="#non">Up</a></li> <li class="arrow-alt down"><a href="#non">Down</a></li> <li class="arrow-alt2 forward"><a href="#non",列表元素ul ol li dl dt dd释义;>Forward</a></li> <li class="arrow-alt2 back"><a href="#non">Back</a></li> <li class="arrow-alt2 up"><a href="#non">Up</a></li> <li class="arrow-alt2 down"><a href="#non">Down</a></li> </ul> </div> <div class="section"> <h3>Miscellaneous</h3> <ul> <li class="home"><a href="#non">Home</a></li> <li class="photo"><a href=",切身体会网站内链建设的几点弊端;#non">Photo</a></li> <li class="video"><a href="#non">Video</a></li> <li class="music"><a href="#non">Music</a></li> <li class="call"><a href="#non">Call</a></li> <li class="call call-on"><a href="#non">Call in progress</a></li> <li class="tags"><a href="#non">Tags</a></li> <li class="rss"><a href="#non">RSS</a></li> <li class="email"><a href="#non">Email</a></li> <li class="profile"><a href="#non">Profile</a></li> <li class="file"><a href="#non">File</a></li> <li class="folder"><a href="#non">Folder</a></li> <li class="list"><a href="#non">List view</a></li> <li class="permalink"><,分站复制引发的杂谈之网站镜像;a href="#non">Permalink</a></li> <li class="history"><a href="#non">History</a></li> <li class="tools"><a href="#non">Tools</a></li> <li class="player">MP3 Player</li> <li class="headphones">Headphones</li> <li class="ribbon">Ribbon</li> <li class="views">Views</li> <li class="location">Location</li> <li class="info">Info</li> <li class="help">Help</li> <li class="pie">Pie chart</li> <li class="success">Success</li> <li class="success-alt">Success (alt)</li> <li class="warning">Warning</li> <li class="denied">Denied</li> </ul> </div> <div class="section"> <h3>Media controls</h3> <ul> <li class="power"><a href="#non">Power</a></li> <li class="play"><a href="#non">Play</a></li> <li class="stop">,分析造成关键词排名下降的原因;<a href="#non">Stop</a></li> <li class="pause"><a href="#non">Pause</a></li> <li class="play-alt"><a href="#non">Play</a></li> <li class="stop-alt"><a href="#non">Stop</a></li> <li class="pause-alt"><a href="#non">Pause</a></li> <li class="volume"><a href="#non">Volume</a></li> <li class="volume volume-on"><a href="#non">Volume on</a></li> <li class="volume mute"><a href="#non">Mute</a></li> <li class="volume volume-up"><a href="#non">Volume up</a></li> <li class="volume volume-down"><a href="#non">Volume down</a></li> <li class="mic"><a href="#non">Mic</a></li> <li class="fforward"><a href="#non">Fast forward</a></li> <li class="frewind"><a href="#non">Fast rewind</a></li> <li class="next"><a href="#non">Next track</a></li> <li class="prev"><a href="#non">Previous track</a></li> <li class="repeat"><a href="#non">Repeat</a></li> <li class="expand"><a href="#non">Expand</a></li> <li class="shrink"><a href=",分析网站降权的常见原因及解决方法;#non">Shrink</a></li> <li class="toggle-size"><a href="#non">Toggle video size</a></li> <li class="pop"><a href="#non">Pop out</a></li> <li class="enlarge"><a href="#non">Enlarge</a></li> <li class="full"><a href="#non">Full-screen</a></li> <li class="exit"><a href="#non">Exit full-screen</a></li> <li class="eject"><a href="#non">Eject</a></li> </ul> </div> </div> <!-- end EXAMPLES --> <div class="container footer"> <p>Read the article: <a href=" CSS <abbr title="Graphical User Interface">GUI</abbr> icons (experimental)</a>.</p> <p class="follow"><a href=" can find me on <span>twitter</span></a>.</p> </div> </body> </html> Tag：后果 图标 应用
利用css3绘制小图标的效果
今天在网上看到一个用纯ＣＳＳ实现的图标，这个十分适用啊。珍藏一下
留神：此代码用html5+CSS3实现，ＩＥ全系列都不支撑，鄙视一下ＩＥ。
ＣＳＳ请自行下载 css下载
--> [
网站建设之]利用css3绘制小图标的效果
(责任编辑：网站建设)
利用css3绘制小图标的效果相关文章