登录 
欢迎来到陈冬冬(雪地里走)的学习天地 | 经验分享整理平台 | 陈冬冬
 服务器本次启动于:11天前 

使用CSS3山寨一款iPhone效果

2016-12-11 22:01:29 阅读:()

一款渣防iPhone效果的实现,看了一下实现这种效果的视频教程,学着去做了一款,示例中的效果为黑色的iPhone,这里给换成白色的,审美和专业方面经不起推敲,大致看上去像那么回事儿就可以了,使用CSS3实现的。


运行地址为:http://www.chendd.cn/demo/html/iPhone/index.html


参考代码如下:

<!DOCTYPE html>

<html>

<head>

<title>山寨iPhone</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<style type="text/css">

body{

   margin: 0;

   padding: 0;

   background-color: #1a1a1a;

}

#phone{

   width:230px;

   height:450px;

   background-color: rgba(240,240,240 , 0.9);

   margin: 50px auto;

   border-radius: 15px;

   box-shadow: 2px 2px 5px rgba(10,10,10,0.4) inset,2px 2px 5px rgba(10,10,10,0.4) inset,

      -2px -2px 5px rgba(10,10,10,0.4) inset , -2px -2px 5px rgba(10,10,10,0.4) inset;

}

 

#border{

   width:210px;

   height:430px;

   border-radius: 15px;

   background-color: rgba(245,245,245 , 0.7);

   left: 10px;

   top: 10px;

   position: relative;

}

 

#lock{

   width: 35px;

   height: 7px;

   background: rgba(226,226,226,0.9);

   position: absolute;

   left: 155px;

   top: -16px;

   border-top-left-radius: 5px;

   border-top-right-radius: 5px;

   box-shadow: 2px 2px 5px rgba(10,10,10,0.4) inset;

}

 

#receiver{

   width: 6px;

   height: 6px;

   border-radius: 5px;

   background: rgba(30,30,30 , 0.5);

   box-shadow: 2px 2px 2px rgba(0,0,0,0.8) inset;

   position: absolute;

   top: 10px;

   left: 48%;

}

 

#microphone{

   width: 50px;

   height: 6px;

   border-radius: 5px;

   background: rgba(30,30,30 , 0.6);

   box-shadow: 2px 2px 2px rgba(0,0,0,0.8) inset;

   position: absolute;

   top: 25px;

   left: 38%;

   margin: 0px auto;

}

 

#microphone:AFTER {

   content: '';

   display: block;

   width: 10px;height: 10px;

   border-radius: 5px;

   position: absolute;

   top: -2px;left: -30px;

   background: rgba(0,0,0 , 0.8);

   box-shadow: 2px 2px 2px rgba(0,0,0,0.5) inset;

}

 

#voice{

   width: 6px;

   height: 60px;

   background-color: rgba(226,226,226,0.9);

   position: absolute;

   left: -14px;

   top: 60px;

   border-top-left-radius: 5px;

   border-bottom-left-radius: 5px;

}

 

#screen{

   width:210px;

   height:320px;

   background-color: rgba(50,50,50 , 0.8);

   position: absolute;

   top: 55px;

   left: 0px;

}

 

#home{

   width: 35px;height: 35px;

   border-radius: 50%;

   background: rgb(250,250,250);

   border: 2px solid #c0c0c0;

   box-shadow: 2px 2px 2px rgba(25,25,25,0.5) inset , 2px -2px 2px rgba(25,25,25,0.5) inset ,

      -2px -2px 2px rgba(25,25,25,0.5) inset , -2px 2px 2px rgba(25,25,25,0.5) inset;

   position: absolute;

   bottom: 4px;

   left: 42%;

}

</style>

</head>

<body>

  

   <div id="phone">

      <div id="border">

         <!-- 锁定键 -->

         <div id="lock"></div>

         <!-- 听筒 -->

         <div id="receiver"></div>

         <!-- 话筒 -->

         <div id="microphone"></div>

         <!-- 声音 -->

         <div id="voice"></div>

         <!-- 屏幕 -->

         <div id="screen"></div>

         <!-- home -->

         <div id="home"></div>

      </div>

   </div>

 

</body>

</html>

 


你可能感兴趣的:
      关键字:rgba(20)div(16)border(13)inset(12)left(11)
      互动()
      评论()
      比起点赞,站长更喜欢登录后的评论
      • 0
      • 0
      • 0
      • 0
      • 0