39,084
社区成员
发帖
与我相关
我的任务
分享CSS3生成22款 iOS 7扁平化风格图标- www.codesc.net 特效分享
HTML5 CSS3生成22个苹果 iOS 7扁平化风格图标，CSS3 生成苹果手机图标，不使用任何的图片来修饰，纯CSS3代码生成的，很逼真，不占用系统资源，显示速度非常快，这些图标真的很漂亮呢，而且把本页拷贝到智能手机上运行，一下子就变成图标了，哈哈了。
引用页：http://www.codesc.net/jscss/3999.shtml
<!DOCTYPE html>
<html>
<head>
<title>CSS3生成22款 iOS 7扁平化图标</title>
<link rel="stylesheet" href="http://www.codesc.net/jscode/demoimg/201801/ios.css" media="screen" type="text/css" />
</head>
<body>
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<title>html5 CSS3生成的iOS 7图标集</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>
</body>
</html>引用页：http://www.codesc.net/jscss/3999.shtml
...全文
请发表友善的回复…
发表回复
shanshuiboy 2018-06-05
- 打赏
- 举报
晕，自己顶！
