当前位置：首页 → 问答吧 → 纯CSS写了个魅族 M8 ~~~

纯CSS写了个魅族 M8 ~~~

时间：2010-06-06

来源：互联网

之前看见有人用css写了个机器猫我也来练练手写了个M8
请使用Firefox3.x Chrome2.x-5.x浏览使用IE的飘过~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS MEIZU M8 by [email protected]</title> <style> body { background-color:#fff; font-family:'微软雅黑'; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } div#m8 { width:266px; height:482px; margin:auto; border:1px solid #fff; -moz-border-radius:38px; -khtml-border-radius:38px; -webkit-border-radius:38px; border-radius:38px; background-color:#2E2F31; } div.sideline { width:246px; height:466px; margin:6px auto; border:2px solid #4F525B; -moz-border-radius:30px; -khtml-border-radius:30px; -webkit-border-radius:30px; border-radius:30px; background-color:#131418; } span.ring { width:8px; height:8px; display:block; overflow:hidden; float:left; margin:auto 4px; border:1px solid #060709; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background-color:#838584; } span.ring em { width:6px; height:6px; display:block; margin-top:2px; border:1px solid #060709; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background-color:#0F1012; } div#receiver { padding:30px 0 20px 97px; } div#screen { width:88%; height:336px; overflow:hidden; margin:auto; border:3px solid #1B1C20; background-color:#fff; text-align:center; position:relative; background:url(http://www.itxueren.com/desktopbg.jpg) no-repeat; } div#mike { padding-top:12px; } div.m { width:66px; height:35px; display:block; margin:auto; border:1px solid #040509; -moz-border-radius:30px; -khtml-border-radius:30px; -webkit-border-radius:30px; border-radius:30px; cursor:pointer; } div.m span { width:26px; height:13px; display:block; margin:10px auto; border:1px solid #565656; border-top:none; border-right:none; background-color:#4F5150; position:relative; } div.m span b,div.m span em{ width:2px; height:12px; display:block; background-color:#020403; position:absolute; bottom:-1px; } div.m span b{ margin-left:9px; } div.m span em{ margin-left:18px; } div#screen .top { color:#fff; background-color:#000; opacity:.4; font-size:10px; position:relative; } div#screen .bottom { width:100%; height:40px; line-height:40px; border-top:1px solid #ccc; background-color:#000; background:-moz-linear-gradient(center top , #ccc, #000) repeat scroll 0 0 transparent; background:-webkit-gradient(linear,0% 0%, 0% 100%, from(#ccc), to(#000)); -webkit-box-shadow:0 -2px 4px #000; -moz-box-shadow:0 -2px 4px #000; opacity:.5; position:absolute; bottom:0; color:#000; font-size:20px; text-shadow:2px 2px #32312B; text-transform:uppercase; } div#time { width:87%; height:45px; margin:auto 12px; border:1px solid #000; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background-color:#000; opacity:.8; position:absolute; bottom:55px; color:#fff; } div#time .t { width:120px; display:block; float:left; font-size:33px; font-family:Verdana, Geneva, sans-serif; text-align:center; padding-top:1px; } div#time .d,div#time .q { width:60px; display:block; font-size:10px; float:left; text-align:left; padding-left:2px; } div#time .d{ padding-top:5px; } </style> </head> <body> <div id="m8"> <div class="sideline"> <div id="receiver" class="clearfix"> <span class="ring"><em></em></span> <span class="ring"><em></em></span> <span class="ring"><em></em></span> </div> <div id="screen"> <div class="top">中国移动</div> <div id="time"> <span class="t">01:25</span> <span class="d">06月06日</span> <span class="q">星期日</span> </div> <div class="bottom">css魅族M8 by 若寒</div> </div> <div id="mike" class="clearfix"> <div class="m"> <span><b></b><em></em></span> </div> </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 kriy 于 2010-6-6 13:03 编辑 ]

作者: kriy 发布时间: 2010-06-06

错位了，跟图片不符，不过很厉害了

作者: cssbbs 发布时间: 2010-06-06

你用的什么浏览器 firefox3.x Chrome 测试都ok，ie不行

作者: kriy 发布时间: 2010-06-06

IE7错位。

作者: 死猪发布时间: 2010-06-06

稍微改了下,圆角不会,透明不会,只解决了错位

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS MEIZU M8 by [email protected]</title> <style> body { background-color:#fff; font-family:'微软雅黑'; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } div#m8 { width:266px; height:482px; margin:auto; border:1px solid #fff; -moz-border-radius:38px; -khtml-border-radius:38px; -webkit-border-radius:38px; border-radius:38px; background-color:#2E2F31; } div.sideline { width:246px; height:466px; margin:6px auto; border:2px solid #4F525B; -moz-border-radius:30px; -khtml-border-radius:30px; -webkit-border-radius:30px; border-radius:30px; background-color:#131418; } span.ring { width:8px; height:8px; display:block; overflow:hidden; float:left; margin:auto 4px; border:1px solid #060709; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background-color:#838584; } span.ring em { width:6px; height:6px; display:block; margin-top:2px; border:1px solid #060709; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background-color:#0F1012; } div#receiver { padding:30px 0 20px 97px; } div#screen { width:88%; height:336px; overflow:hidden; margin:auto; border:3px solid #1B1C20; background-color:#fff; text-align:center; position:relative; background:url(http://www.itxueren.com/desktopbg.jpg) no-repeat; } div#mike { padding-top:12px; } div.m { width:66px; height:35px; display:block; margin:auto; border:1px solid #040509; -moz-border-radius:30px; -khtml-border-radius:30px; -webkit-border-radius:30px; border-radius:30px; cursor:pointer; } div.m span { width:26px; height:13px; display:block; margin:10px auto; border:1px solid #565656; border-top:none; border-right:none; background-color:#4F5150; position:relative; } div.m span b,div.m span em{ width:2px; height:12px; display:block; background-color:#020403; position:absolute; bottom:-1px; } div.m span b{ margin-left:9px; } div.m span em{ margin-left:18px; } div#screen .top { color:#fff; background-color:#000; opacity:.4; font-size:10px; position:relative; } div#screen .bottom { width:100%; height:40px; line-height:40px; border-top:1px solid #ccc; background-color:#000; background:-moz-linear-gradient(center top , #ccc, #000) repeat scroll 0 0 transparent; background:-webkit-gradient(linear,0% 0%, 0% 100%, from(#ccc), to(#000)); -webkit-box-shadow:0 -2px 4px #000; -moz-box-shadow:0 -2px 4px #000; opacity:.5; position:absolute; bottom:0; left:0; color:#FFF; font-size:20px; text-shadow:2px 2px #32312B; text-transform:uppercase; } div#time { width:87%; height:45px; margin:auto 12px; border:1px solid #000; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background-color:#000; opacity:.8; position:absolute; left:0px; bottom:55px; color:#fff; } div#time .t { width:120px; display:block; float:left; font-size:33px; font-family:Verdana, Geneva, sans-serif; text-align:center; padding-top:1px; } div#time .d,div#time .q { width:60px; display:block; font-size:10px; float:left; text-align:left; padding-left:2px; } div#time .d{ padding-top:5px; } </style> </head> <body> <div id="m8"> <div class="sideline"> <div id="receiver" class="clearfix"> <span class="ring"><em></em></span> <span class="ring"><em></em></span> <span class="ring"><em></em></span> </div> <div id="screen"> <div class="top">中国移动</div> <div id="time"> <span class="t">01:25</span> <span class="d">06月06日</span> <span class="q">星期日</span> </div> <div class="bottom">css魅族M8 by 若寒</div> </div> <div id="mike" class="clearfix"> <div class="m"> <span><b></b><em></em></span> </div> </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: robinown 发布时间: 2010-06-06

支持, 感谢分享.

作者: xeonwell 发布时间: 2010-06-06

强贴，支持

作者: cloud007 发布时间: 2010-06-06

LZ太强
蛋表示很疼

作者: Crossnite 发布时间: 2010-06-06

楼主加油，有些细节可以做的更完美，比如时钟区域背景的渐变！

作者: yoom 发布时间: 2010-06-06

是传说中使用谷歌浏览器查看了不错，就是CSS圆角不圆滑

作者: 84uu 发布时间: 2010-06-06

很好很强大。支持。。。

作者: krayli 发布时间: 2010-06-07

呵呵, 我给楼主的M8加上个高光哈

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS MEIZU M8 by [email protected]</title> <style> body { background-color:#fff; font-family:'微软雅黑'; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } div#m8 { width:266px; height:482px; margin:auto; border:1px solid #fff; -moz-border-radius:38px; -khtml-border-radius:38px; -webkit-border-radius:38px; border-radius:38px; background-color:#2E2F31; } div.sideline { width:246px; height:466px; margin:6px auto; border:2px solid #4F525B; -moz-border-radius:30px; -khtml-border-radius:30px; -webkit-border-radius:30px; border-radius:30px; background-color:#131418; } span.ring { width:8px; height:8px; display:block; overflow:hidden; float:left; margin:auto 4px; border:1px solid #060709; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background-color:#838584; } span.ring em { width:6px; height:6px; display:block; margin-top:2px; border:1px solid #060709; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background-color:#0F1012; } div#receiver { padding:30px 0 20px 97px; } div#screen { width:88%; height:336px; overflow:hidden; margin:auto; border:3px solid #1B1C20; background-color:#fff; text-align:center; position:relative; background:url(http://www.itxueren.com/desktopbg.jpg) no-repeat; } div#mike { padding-top:12px; } div.m { width:66px; height:35px; display:block; margin:auto; border:1px solid #040509; -moz-border-radius:30px; -khtml-border-radius:30px; -webkit-border-radius:30px; border-radius:30px; cursor:pointer; } div.m span { width:26px; height:13px; display:block; margin:10px auto; border:1px solid #565656; border-top:none; border-right:none; background-color:#4F5150; position:relative; } div.m span b,div.m span em{ width:2px; height:12px; display:block; background-color:#020403; position:absolute; bottom:-1px; } div.m span b{ margin-left:9px; } div.m span em{ margin-left:18px; } div#screen .top { color:#fff; background-color:#000; opacity:.4; font-size:10px; position:relative; } div#screen .bottom { width:100%; height:40px; line-height:40px; border-top:1px solid #ccc; background-color:#000; background:-moz-linear-gradient(center top , #ccc, #000) repeat scroll 0 0 transparent; background:-webkit-gradient(linear,0% 0%, 0% 100%, from(#ccc), to(#000)); -webkit-box-shadow:0 -2px 4px #000; -moz-box-shadow:0 -2px 4px #000; opacity:.5; position:absolute; bottom:0; left:0; color:#FFF; font-size:20px; text-shadow:2px 2px #32312B; text-transform:uppercase; } div#time { width:87%; height:45px; margin:auto 12px; border:1px solid #000; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background-color:#000; opacity:.8; position:absolute; left:0px; bottom:55px; color:#fff; } div#time .t { width:120px; display:block; float:left; font-size:33px; font-family:Verdana, Geneva, sans-serif; text-align:center; padding-top:1px; } div#time .d,div#time .q { width:60px; display:block; font-size:10px; float:left; text-align:left; padding-left:2px; } div#time .d{ padding-top:5px; } #screen .white{border:200px solid #fff;-moz-border-radius:80px 250px;-khtml-border-radius:80px 250px;-webkit-border-radius:80px 250px;border-radius:50px;background-color:#000;opacity:.3;position:absolute;left:-50px;top:-250px;width:100%;} </style> </head> <body> <div id="m8"> <div class="sideline"> <div id="receiver" class="clearfix"> <span class="ring"><em></em></span> <span class="ring"><em></em></span> <span class="ring"><em></em></span> </div> <div id="screen"> <div class="white"></div> <div class="top">中国移动</div> <div id="time"> <span class="t">01:25</span> <span class="d">06月06日</span> <span class="q">星期日</span> </div> <div class="bottom">css魅族M8 by 若寒</div> </div> <div id="mike" class="clearfix"> <div class="m"> <span><b></b><em></em></span> </div> </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 stu66 于 2010-6-7 09:05 编辑 ]

作者: stu66 发布时间: 2010-06-07

很好，很强大

作者: ismog 发布时间: 2010-06-07

和机器猫差远了。。。。。去掉背景图片，你这个等于就是画几个框。。。。。机器猫那个可不是哦。

作者: YESILY 发布时间: 2010-06-07