首先来看一下运行效果图：
具体实现代码如下：
<!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>仿安卓手机拨号界面按键特效</title> <script type="text/javascript" src="https://www.jb51.net/jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { /* Current Tab */ $('.phone-tabs li a').click(function() { $('.phone-tabs li').removeClass('current'); $(this).parent().addClass('current'); }); /* Simple Tab */ var tabContents = $('.phone-tab-contents'); $('.phone-tabs .getphone').click(function() { tabContents.removeClass('getpeoples'); tabContents.removeClass('getclock'); }); $('.phone-tabs .getclock').click(function() { tabContents.removeClass('getpeoples'); tabContents.addClass('getclock'); }); $('.phone-tabs .getpeoples').click(function() { tabContents.removeClass('getclock'); tabContents.addClass('getpeoples'); }); /* Delete */ $('.delete-btn').click(function() { var numbers = $('.number-area .numbers').text(); var numbers2 = $('.number-area .numbers').text().length; $('.number-area .numbers').text(numbers.substr(0, numbers2 - 1)); }); /* Pusher */ var pusher = { number: function(num) { $('.numbers-container .pushed' + num + '').click(function() { $('.number-area .numbers').append('' + num + ''); }); } } pusher.number(1); pusher.number(2); pusher.number(3); pusher.number(4); pusher.number(5); pusher.number(6); pusher.number(7); pusher.number(8); pusher.number(9); pusher.number(0); $('.numbers-container .pushedasterisk').click(function() { $('.number-area .numbers').append('*'); }); $('.numbers-container .pushednumber').click(function() { $('.number-area .numbers').append('#'); }); }); </script> <style> *{ margin:0; padding:0; } ::selection{ background:transparent; } body{ color:#4196b7; font:normal 12px arial,sans-serif; } .nexus{ position:relative; margin:10px auto; width:314px; height:600px; border-radius:80px / 40px; border-top:3px solid #222; background:#6d6d6b; background:-moz-linear-gradient(left, #6d6d6b 0%, #3b3b3c 1%, #979797 3%, #686868 4%, #2e2e2e 100%); background:-webkit-gradient(linear, left top, right top, color-stop(0%,#6d6d6b), color-stop(1%,#3b3b3c), color-stop (3%,#979797), color-stop(4%,#686868), color-stop(100%,#2e2e2e)); background:-webkit-linear-gradient(left, #6d6d6b 0%,#3b3b3c 1%,#979797 3%,#686868 4%,#2e2e2e 100%); background:-o-linear-gradient(left, #6d6d6b 0%,#3b3b3c 1%,#979797 3%,#686868 4%,#2e2e2e 100%); background:-ms-linear-gradient(left, #6d6d6b 0%,#3b3b3c 1%,#979797 3%,#686868 4%,#2e2e2e 100%); background:linear-gradient(to right, #6d6d6b 0%,#3b3b3c 1%,#979797 3%,#686868 4%,#2e2e2e 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d6d6b', endColorstr='#2e2e2e',GradientType=1 ); } .nexus:before{ position:absolute; content:''; z-index:-1; top:-6px; left:0px; background:#babbbb; width:314px; height:78px; border-radius:25% / 45%; border-top:1px solid #444; } .nexus:after{ position:absolute; content:''; z-index:-1; bottom:-5px; left:0px; background:#babbbb; width:314px; height:78px; border-radius:25% / 45%; border-bottom:2px solid #555; } .speaker{ position:absolute; left:0px; top:0px; width:65px; height:5px; background:#333; left:50%; margin-left:-33px; border-radius:0 0 6px 6px; border:1px solid #474747; border-top:0; box-shadow:inset 0 0 1px black; } .screen{ position:absolute; left:17px; top:64px; width:282px; height:467px; background:white; } .phone-infos{ width:100%; height:17px; background:#303030; } .phone-infos span{ float:right; font-size:11px; margin:2px 3px; } .phone-infos .battery{ width:8px; height:10px; background:#4196b7; margin-top:2px; position:relative; margin-top:4px; } .phone-infos .battery:before{ width:4px; height:2px; position:absolute; left:2px; top:-2px; background:#4196b7; content:''; } .phone-infos .gsm{ position:relative; height:12px; margin-right:10px; } .phone-infos .gsm b{ float:left; position:absolute; bottom:0; } .phone-infos .gsm b:before{ position:absolute; content:''; top:-3px; width:0; height:0; border-bottom:3px solid #4196b7; border-left:3px solid transparent; } .phone-infos .gsm .signal1{ width:3px; height:0px; background:#4196b7; left:-8px; } .phone-infos .gsm .signal2{ width:3px; height:3px; background:#4196b7; left:-4px; } .phone-infos .gsm .signal3{ width:3px; height:7px; background:#4196b7; } .phone-infos .gsm .signal4{ width:3px; height:11px; background:#808184; left:4px; } .phone-infos .gsm .signal4:before{ border-bottom:3px solid #808184; border-left:3px solid transparent; } .phone-tabs{ border-bottom:1px solid #858383; background:#303030; height:50px; } .phone-tabs li{ float:left; list-style:none; -webkit-transition:all .05s ease-in; -moz-transition:all .05s ease-in; -o-transition:all .05s ease-in; transition:all .05s ease-in; } .phone-tabs li a{ -webkit-transition:all .05s ease-in; -moz-transition:all .05s ease-in; -o-transition:all .05s ease-in; transition:all .05s ease-in; text-decoration:none; background:#303030; cursor:pointer; height:40px; width:94px; display:block; text-align:center; position:relative; padding-top:10px; } .phone-tabs li a:active{ background:rgba(104,208,249,.4); } .phone-tabs li a:before{ height:20px; width:1px; background:#858383; position:absolute; content:''; left:0; top:16px; } .phone-tabs li:first-child a:before{ display:none; } .phone-tabs li.current a:after{ position:absolute; content:''; left:0px; bottom:0px; width:100%; height:5px; background:#4196b7; } .phone-tab-contents{ width:100%; height:365px; position:relative; overflow:hidden; } .phone-tab-contents .tab{ width:100%; height:365px; position:absolute; background:#3f3f3f; position:absolute; -webkit-transition:all .25s ease-in; -moz-transition:all .25s ease-in; -o-transition:all .25s ease-in; transition:all .25s ease-in; } .phone-tab-contents .tab.phone{ left:0; background:#3f3f3f url(data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKElEQVQIW2NkQAOO07anMSKLgQT2Z3nOggvCBECKwILIAmBBdAGQIABJuxH63EphJgAAAAB JRU5ErkJggg==) repeat; } .phone-tab-contents .tab.clock{ left:282px; } .phone-tab-contents .tab.peoples{ left:564px; } .phone-tab-contents.getclock .tab.phone{ left:-282px; } .phone-tab-contents.getclock .tab.clock{ left:0px; } .phone-tab-contents.getclock .tab.peoples{ left:282px; } .phone-tab-contents.getpeoples .tab.phone{ left:-564px; } .phone-tab-contents.getpeoples .tab.clock{ left:-282px; } .phone-tab-contents.getpeoples .tab.peoples{ left:0px; } .phone-tab-contents .tab.clock p:first-child, .phone-tab-contents .tab.peoples p:first-child{ margin-top:50px; } .phone-tab-contents .tab.peoples p, .phone-tab-contents .tab.clock p{ width:90%; padding:10px 5% 0; text-align:center; color:#bbb; } .phone-tab-contents .tab.peoples p a, .phone-tab-contents .tab.clock p a{ color:#fff; } .main-btns{ width:100%; height:34px; background:#303030; } .main-btns li{ list-style:none; float:left; } .main-btns li a{ width:30px; display:block; width:94px; height:34px; text-align:center; } .number-area{ color:#fff; font-size:20px; text-align:center; padding:20px 0 20px; width:100%; overflow:hidden; border-bottom:1px solid #333; margin-bottom:10px; } .number-area .numbers{ width:230px; float:left; padding:0 10px; height:14px; } .number-area .delete-btn{ float:right; margin-right:10px; cursor:pointer; } .numbers-container{ overflow:hidden; } .numbers-container span{ width:94px; height:30px; float:left; font-size:30px; text-indent:22px; position:relative; padding:15px 0; cursor:pointer; } .numbers-container span:active{ background:rgba(104,208,249,.4); } .numbers-container span em{ font-size:12px; color:#fff; font-style:normal; position:absolute; left:22px; bottom:15px; padding-bottom:5px; } .numbers-container span em.brd:before{ position:absolute; width:14px; height:2px; background:#fff; content:''; top:9px; left:24px; } .numbers-container span em:after{ width:35px; height:2px; background:#4196b7; content:''; position:absolute; top:16px; left:22px; } .numbers-container span.fff{ color:#fff; text-align:center; } .call-btn{ width:100%; text-align:center; border-top:1px solid #333; padding-top:10px; } /* Icon Group */ .icon{ display:inline-block; font-style:normal; position:relative; } .icon.phone{ background:#fff; width:5px; height:26px; -webkit-transform:rotate(145deg); -moz-transform:rotate(145deg); -o-transform:rotate(145deg); transform:rotate(145deg); border-radius:0 6px 6px 0; margin-top:5px; } .icon.phone:before{ position:absolute; content:''; width:8px; height:9px; background:#fff; left:-6px; bottom:-1px; border-radius:3px 6px 7px 3px; } .icon.phone:after{ position:absolute; content:''; width:8px; height:9px; background:#fff; left:-6px; top:-1px; border-radius:3px 6px 7px 3px; } .icon.clock{ background:#303030; width:22px; height:22px; border:2px solid #fff; border-radius:22px; margin-top:4px; } .icon.clock:before{ position:absolute; content:''; height:9px; width:2px; background:#fff; top:2px; left:10px; } .icon.clock:after{ position:absolute; content:''; height:9px; width:2px; background:#fff; top:9px; -webkit-transform:rotate(120deg); -o-transform:rotate(120deg); -moz-transform:rotate(120deg); transform:rotate(120deg); left:14px; } .icon.peoples{ background:#fff; height:10px; width:22px; border-radius:12px 12px 0 0; margin-top:20px; } .icon.peoples:after{ position:absolute; content:''; background:#fff; width:14px; height:14px; border:2px solid #303030; border-radius:18px; top:-14px; left:2px; z-index:10; } .icon.peoples:before{ position:absolute; content:''; background:#303030; width:10px; height:5px; left:6px; top:-5px; z-index:20; border-radius:0 0 15px 15px; } .icon.close{ font-size:12px; color:#303030; background:#fff; width:14px; height:12px; line-height:12px; margin-top:5px; } .icon.close:before{ position:absolute; content:''; left:-8px; width:0px; height:0px; border-style:solid; border-width:6.5px 8px 6.5px 0; border-color:transparent #ffffff transparent transparent; } .icon.home{ width:25px; height:8px; border:2px solid #bbbbbb; border-top:0; margin-top:15px; } .icon.home:after{ width:2px; height:17px; background:#bbbbbb; position:absolute; top:-12px; left:5px; content:''; -webkit-transform:rotate(70deg); -moz-transform:rotate(70deg); -o-transform:rotate(70deg); transform:rotate(70deg); } .icon.home:before{ width:2px; height:17px; background:#bbbbbb; position:absolute; top:-12px; right:5px; content:''; -webkit-transform:rotate(110deg); -moz-transform:rotate(110deg); -o-transform:rotate(110deg); transform:rotate(110deg); } .icon.windows{ width:20px; height:8px; border:2px solid #bbbbbb; margin-top:13px; } .icon.windows:after{ width:2px; height:14px; background:#bbbbbb; position:absolute; content:''; right:-6px; top:-6px; } .icon.windows:before{ width:22px; height:2px; background:#bbbbbb; position:absolute; content:''; right:-4px; top:-6px; } .icon.back{ width:20px; height:2px; background:#bbb; color:#bbb; font-size:18px; line-height:0px; text-indent:-16px; font-family:sans-serif; margin-top:12px; } .icon.back:before{ width:7px; height:11px; background:#303030; position:absolute; content:''; left:8px; z-index:10; top:2px; } .icon.back:after{ width:20px; height:7px; border:2px solid #bbb; position:absolute; content:''; border-radius:10px; } </style> </head> <body> <div> <div></div> <div> <div> <span>03.15</span> <span></span> <span> <b></b> <b></b> <b></b> <b></b> </span> </div> <ul> <li><a><i></i></a></li> <li><a><i></i></a></li> <li><a><i></i></a></li> </ul> <div> <div> <div> <span></span> <a><i>x</i></a> </div> <div> <span>1<em>o o</em></span> <span>2<em>ABC</em></span> <span>3<em>DEF</em></span> <span>4<em>GHI</em></span> <span>5<em>JKL</em></span> <span>6<em>MNO</em></span> <span>7<em>PQRS</em></span> <span>8<em>TUV</em></span> <span>9<em>WXYZ</em></span> <span>*</span> <span>0<em>+</em></span> <span>#</span> </div> <div> <i></i> </div> </div> <div> <p>Not Ready</p> <p>Visit Nexus 4 Official Page</p> <p><a href="https://www.jb51.net/">/</a></p> <p>Visit My Site</p> <p><a href="https://www.jb51.net/">/</a></p> </div> <div> <p>Not Ready</p> <p>Visit Nexus 4 Official Page</p> <p><a href="https://www.jb51.net/">/</a></p> <p>Visit My Site</p> <p><a href="https://www.jb51.net/">/</a></p> </div> </div> <ul> <li><a><i><</i></a></li> <li><a><i></i></a></li> <li><a><i></i></a></li> </ul> </div> </div> <div> </div> </body> </html>