码迷，mamicode.com
首页 > 其他好文 > 详细

前端画图之iphoneSE主屏

时间：2018-06-30 10:51:33      阅读：249      评论：0      收藏：0      [点我收藏+]

标签：com   bluetooth   nes   ref   100%   mat   博客   repeat   web   

今天逛园子，无意间看到一个用div+css画的Macbook Air的博客，瞬间想到很久之前我也做过类似的事，

而且，当时写完之后，真的是成就感爆棚啊！我去开源中国上翻到了我当时贴的源码，当时是在手机上

用JSAnywhere这款软件一字一字敲出来的，你可以想象一下用SE敲代码的那个画面。

现在回过头来看自己当初的代码，发现我的手机壁纸居然一直都没换过，233333~~

这里贴上全部的代码，有兴趣的同学可以复制一下，拿到本地跑跑看，上两张效果图先：

技术分享图片技术分享图片

技术分享图片 
<!DOCTYPE html >
<html>
<head>
    <title>iPhone主界面</title>
    <!--引入jQuery库-->
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <!--Bootstrap插件库-->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--引入Bootstrap
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">-->
    <!--引入字体图标库-->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" >
    <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
    <style>
        *{margin:0;padding:0;}
        .mask{width:640px;height:1136px;position:absolute;top:0;}
        .iphone-home{width:640px;height:1136px;position:relative;background:url(https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b2de9c82d158ccbf46b1f8891ed8bc3eb1354177.jpg) repeat;background-size:110% 100%;}
        .iphone-header{text-align:center;padding-top:3px;font-size:24px;color:white;height:4%;width:100%;}
        .left{float:left;width:35%;text-align:left;}
        .right{float:right;width:35%;text-align:right;}
        .center,.text{font-weight:bold;}
        .row{width:100%;height:14%;padding:0 auto;}
        .row-col{display:inline-block;height:84%;width:21%;border-radius:18%;margin:2%;}
        .text-row{width:100%;}
        .text{display:inline-block;width:25%;text-align:center;font-size:24px;color:white;}
        .footerbox{margin-top:48%;}
        .footer{width:100%;height:19%;margin-top:48%;}
        .thefour{font-size:100px;margin-top:12%;}
        .sev{font-size:20px;margin-top:12%;}
        .footerfour,.inner{text-align:center;}
        .footermusic{margin-left:-17%;}
        .thephone{background-color:#00cc66;color:white;}
        .thewechat{background-color:#62b900;color:white;}
        .thehtml5{background-color:#cc0033;color:white;}
        .themusic{background-color:#FFFFF0;color:#33ccff;}
        .inner{height:23.3%;width:23.3%;border-radius:18%;margin:5%;float:left;}
        .wrap{height:90%;width:90%;margin:5%;}
        .jsaw{background-color:#6699ff;color:white;}
        .address-book,.commenting{background-color:#62b900;color:white;}
        .compass{background:white;color:#3399ff;}
        .bg{background-color:#EAEAEA;opacity:.6;}
        .popup{height:1136px;width:640px;position:absolute;top:0;z-index:2;display:none;}
        .theone{height:53.5%;width:95%;background-color:#EAEAEA;opacity:0;border-radius:18%;margin-top:40%;margin-left:2.5%;}
        .theonecontent{height:53.5%;width:95%;border-radius:18%;margin-top:40%;margin-left:2.5%;opacity:0;}
        .theonecontent{position:absolute;top:0;z-index:3;}
        .popup .theonecontent .wrap .inner span{font-size:90px;margin-top:9%;}
    </style>
    <meta charset="UTF-8">
</head>

<body>
    <div class="father">
        <div class="iphone-home">
            <div class="iphone-header">
                <p class="left">&nbsp;</p>
                <p class="right">&nbsp;</p>
                <p>&nbsp;</p>
            </div>
            <div class="row">
        <div class="row-col bg"></div><!--
   --><div class="row-col bg"></div><!--
   --><div class="row-col bg"></div><!--
--><div class="row-col bg"></div>
</div>
<div class="text-row">
               <span class="text">&nbsp;</span><!--
          --><span class="text">&nbsp;</span><!--
          --><span class="text">&nbsp;</span><!--
      --><span class="text">&nbsp;</span>
  </div>
  <div class="row">
        <div class="row-col bg"></div><!--
   --><div class="row-col bg"></div><!--
   --><div class="row-col bg"></div><!--
--><div class="row-col bg"></div>
</div>
<div class="text-row">
               <span class="text">&nbsp;</span><!--
          --><span class="text">&nbsp;</span><!--
          --><span class="text">&nbsp;</span><!--
      --><span class="text">&nbsp;</span>
  </div>
  <div class="row">
        <div class="row-col bg"></div><!--
   --><div class="row-col bg"></div><!--
   --><div class="row-col bg"></div><!--
--><div class="row-col bg"></div>
</div>
<div class="text-row">
               <span class="text">&nbsp;</span><!--
          --><span class="text">&nbsp;</span><!--
          --><span class="text">&nbsp;</span><!--
      --><span class="text">&nbsp;</span>
  </div>

  <div class="footer bg">
  </div>
</div><!--iphonehome-->



<!--遮罩层-->
<div class="mask">
    <div class="iphone-header">
        <p class="left">&nbsp;-<span class="signal">78</span> 中国移动 &nbsp;<span class="fa fa-wifi "></span></p>
        <p class="right"><span class="fa fa-bluetooth"></span> <span class="fa fa-clock-o"></span> 100% <span class="fa fa-battery-full"></span>&nbsp;&nbsp;</p>
        <p class="center">time</p>
    </div>

    <div class="row">
        <div class="row-col"><div class="wrap">
             <div class="inner thewechat"><span class="fa fa-wechat sev"></span></div><!--
        --><div class="inner jsaw"><span class="sev">.js</span></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>

         </div><!--
     --><div class="row-col"><div class="wrap">
             <div class="inner address-book"><span class="sev fa fa-address-book-o"></span></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>
</div><!--
--><div class="row-col"><div class="wrap">
             <div class="inner commenting"><span class="sev fa fa-commenting"></span></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>
</div><!--
--><div class="row-col"><div class="wrap">
             <div class="inner compass"><span class="sev fa fa-compass"></span></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>
</div>
</div>
<div class="text-row">
               <span class="text">找</span><!--
          --><span class="text">不</span><!--
          --><span class="text">到</span><!--
      --><span class="text">那</span>
  </div>
  <div class="row">
      <div class="row-col"><div class="wrap">
             <div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>

         </div><!--
     --><div class="row-col"><div class="wrap">
             <div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>
</div><!--
--><div class="row-col"><div class="wrap">
             <div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>
</div><!--
--><div class="row-col"><div class="wrap">
             <div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>
</div>
</div>
<div class="text-row">
               <span class="text">么</span><!--
          --><span class="text">多</span><!--
          --><span class="text">好</span><!--
      --><span class="text">看</span>
  </div>

  <div class="row">
      <div class="row-col"><div class="wrap">
             <div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>

         </div><!--
     --><div class="row-col"><div class="wrap">
             <div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>
</div><!--
--><div class="row-col"><div class="wrap">
             <div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>
</div><!--
--><div class="row-col"><div class="wrap">
             <div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>
</div>
</div>
<div class="text-row">
               <span class="text">的</span><!--
          --><span class="text">图</span><!--
          --><span class="text">标</span><!--
      --><span class="text">啊</span>
  </div>
  <div class="row footerbox">
        <div class="row-col footerfour thephone"><span class="fa fa-phone thefour"></span> </div><!--
        --><div class="row-col footerfour themusic"><span class="fa fa-music thefour footermusic"></span> </div><!--
        --><div class="row-col footerfour thehtml5"><span class="fa fa-html5 thefour"></span> </div><!--
    --><div class="row-col footerfour thewechat"><span class="fa fa-wechat thefour "></span> </div>
</div>
<div class="text-row footertext">
               <span class="text">电话</span><!--
          --><span class="text">音乐</span><!--
          --><span class="text">html5</span><!--
      --><span class="text">微信</span>
  </div>
</div><!--mask-->
</div>

<div class="popup">
    <div class="theone">
    </div>

    <div class="theonecontent">
        <!--动态添加-->
        <div class="wrap popup-wrap">
             <div class="inner thewechat"><span class="fa fa-wechat sev"></span></div><!--
        --><div class="inner jsaw"><span class="sev">.js</span></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div><!--wrap-->
</div><!--theonecontent-->
</div><!--popup-->

<script type="text/javascript">
    <!--中间的时间显示-->
    function clock(){
        var mydate =new Date();
        var myhours=mydate.getHours();
        var myminutes=mydate.getMinutes();
        if(myhours<10)myhours="0"+myhours;
        if(myminutes<10)myminutes="0"+myminutes;
        $(".center").text(myhours+":"+myminutes);
    }
    var ck=setInterval(clock, 100);

    <!--信号显示，采用80-120的随机数-->
    function signal(){
        var rdm=parseInt(Math.random()*40+80);
        $(".signal").text(rdm);
    }
    var sl=setInterval(signal,5000);

    <!--单击小方块弹出应用框-->
    var wraps=$(".wrap");
    for(var i=0;i<12;i++){
        $(wraps[i]).on("click",function(){
            <!--动态获取应用框内容-->
            var a=$(this).html();
            $(".popup-wrap").html(a);
            $(".father").css(‘-webkit-filter‘,‘blur(15px)‘);
            $(".popup").css(‘display‘,‘block‘);

            <!--应用框的淡入效果-->
            var b=0;
            var c=0;
            function theoneon(){
                b=b+0.2;
                $(".theone").css(‘opacity‘,b);
                if(b>0.6){clearInterval(bb);
                    b=0;};}
                    function theonecontenton(){
                        c=c+0.2;
                        $(".theonecontent").css(‘opacity‘,c);
                        if(c>1){clearInterval(cc);
                            c=0;};}
                            var bb=setInterval(theoneon,50);
                            var cc=setInterval(theonecontenton,50);
                        });};

        <!--应用框淡出效果-->
        $(".popup").on("click",function(){

            var b=0.6;
            var c=1;var d=15;
            function theoneoff(){
                b=b-0.2;
                $(".theone").css(‘opacity‘,b);
                if(b<=0)clearInterval(bb);}
                function theonecontentoff(){
                    c=c-0.2;
                    $(".theonecontent").css(‘opacity‘,c);
                    if(c<=0){clearInterval(cc);
                        $(".popup").css(‘display‘,‘none‘);
                        $(".father").css(‘-webkit-filter‘,‘none‘);
                        $(".theonecontent").css(‘opacity‘,0);
                        $(".theone").css(‘opacity‘,0);};}
                        var bb=setInterval(theoneoff,50);
                        var cc=setInterval(theonecontentoff,50);
                    });
                </script>
            </body>
            </html>
View Code

 

前端画图之iphoneSE主屏

标签：com   bluetooth   nes   ref   100%   mat   博客   repeat   web   

原文地址：https://www.cnblogs.com/eco-just/p/9245898.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！