纯CSS3实现iOS7扁平化图标.zip资源-CSDN文库

共3个文件

jpg：1个

html：1个

css：1个

版权申诉

html5

jQuery

javascript

23 浏览量 2022-11-25 10:22:10 上传评论收藏 73KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

纯CSS3实现iOS7扁平化图标.zip （3个子文件）

纯CSS3实现iOS7扁平化图标

jiaoben2505

css

style.css 80KB

index.html 5KB

纯CSS3实现iOS7扁平化图标.jpg 75KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>纯CSS3实现iOS7扁平化图标 - 网页模板</title> <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" /> </head> <body> <!DOCTYPE html> <html dir="ltr" lang="en"> <head> <title>iOS 7 icons</title> </head> <body> <div class="wrapper"> <div class="icon phone"> <span class="receiver"> <span class="inner-part part-1"></span> <span class="inner-part part-2"></span> </span> </div> <div class="icon reminders"> <span class="list-item i1"></span> <span class="list-item i2"></span> <span class="list-item i3"></span> <span class="list-item i4"></span> </div> <div class="icon passbook"> <span class="plane"> <span class="picto"></span> <span class="knob"></span> </span> <span class="movie"> <span class="picto"></span> </span> <span class="coffee"> <span class="picto"></span> </span> </div> <div class="icon mail"> <span class="picto"> <span class="inner i1"></span> <span class="inner i2"></span> </span> </div> <div class="icon photos"> <span class="fan f1"></span> <span class="fan f2"></span> <span class="fan f3"></span> <span class="fan f4"></span> <span class="fan f5"></span> <span class="fan f6"></span> <span class="fan f7"></span> <span class="fan f8"></span> </div> <div class="icon facetime"> <span class="picto"></span> <span class="lens"></span> </div> <div class="icon safari"> <span class="compass"> <span class="scale"> <span class="line l1"></span> <span class="line l2"></span> <span class="line l3"></span> <span class="line l4"></span> <span class="line l5"></span> <span class="line l6"></span> <span class="line l7"></span> <span class="line l8"></span> <span class="line l9"></span> <span class="line l10 s"></span> <span class="line l11 s"></span> <span class="line l12 s"></span> <span class="line l13 s"></span> <span class="line l14 s"></span> <span class="line l15 s"></span> <span class="line l16 s"></span> <span class="line l17 s"></span> <span class="line l18 s"></span> </span> </span> </div> <div class="icon maps"> <span class="block b1"></span> <span class="block b2"></span> <span class="block b3"> <span class="sign"></span> <span class="mask m1"> <span class="road r1"></span> </span> <span class="mask m2"> <span class="road r2"></span> </span> </span> <span class="block b4"></span> <span class="block b5"></span> <span class="block b6"></span> <span class="dot"></span> </div> <div class="icon notes"></div> <div class="icon stocks"> <span class="dot"></span> <span class="line l1"></span> <span class="line l2"></span> <span class="line l3"></span> <span class="line l4"></span> <span class="line l5"></span> <span class="line l6"></span> <span class="line l7"></span> <span class="line l8"></span> <span class="line l9"></span> <span class="line l10"></span> <span class="line l11"></span> <span class="line l12"></span> <span class="line l13"></span> </div> <div class="icon appstore"> <span class="picto"> <span class="pencil"></span> <span class="crayon"></span> </span> </div> <div class="icon weather"> <span class="cloud"></span> </div> <div class="icon clock"> <div class="numbers"> <ol> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> </div> </div> <div class="icon newsstand"> <div class="news"> <span>News</span> </div> <div class="art"> <span>Art</span> </div> <div class="travel"> <span class="label">Travel</span> <span class="picto"></span> </div> <div class="sports"> <span class="label">Sports</span> </div> </div> <div class="icon music"></div> <div class="icon videos"></div> <div class="icon messages"></div> <div class="icon gamecenter"> <div class="bubble blue"></div> <div class="bubble yellow"></div> <div class="bubble purple"></div> <div class="bubble pink"></div> </div> <div class="icon itunes"></div> <div class="icon calendar"> <span class="one"></span> </div> <div class="icon calculator"> <span class="sign plus"></span> <span class="sign minus"></span> <span class="sign mul"></span> <span class="sign eq"></span> </div> <div class="icon camera"> <span class="upper"></span> <span class="case"></span> <span class="knob"></span> </div> </div> </body> </html> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉