纯CSS模拟实现魅族 M8手机界面效果

发布时间：2018-08-19 04:49:33 所属栏目：专访来源：站长网

导读：纯CSS模拟实现魅族 M8手机界面效果，之前看见有人用css写了个机器猫我也来练练手写了个M8 ，请使用 Firefox 3.x Chrome 2.x-5.x浏览使用IE的飘过~ 示例： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD

　　纯CSS模拟实现魅族 M8手机界面效果，之前看见有人用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 xiong_li_bing@qq.com</title> <style> body { background-color:#fff; font-family:'<b>微软雅黑</b>'; } .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><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：武汉站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!