使用CSS3山寨一款iPhone效果


placeholder image
admin 发布于:2016-12-11 22:01:29
阅读:loading

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


运行效果

image.png

参考代码

<!DOCTYPE html>

<html>

<head>

<title>山寨iPhone</title>

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

<style type="text/css">

body{

   margin0;

   padding0;

   background-color#1a1a1a;

}

#phone{

   width:230px;

   height:450px;

   background-colorrgba(240,240,240 , 0.9);

   margin50px auto;

   border-radius15px;

   box-shadow2px 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-radius15px;

   background-colorrgba(245,245,245 , 0.7);

   left10px;

   top10px;

   positionrelative;

}

 

#lock{

   width35px;

   height7px;

   backgroundrgba(226,226,226,0.9);

   positionabsolute;

   left155px;

   top-16px;

   border-top-left-radius5px;

   border-top-right-radius5px;

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

}

 

#receiver{

   width6px;

   height6px;

   border-radius5px;

   backgroundrgba(30,30,30 , 0.5);

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

   positionabsolute;

   top10px;

   left48%;

}

 

#microphone{

   width50px;

   height6px;

   border-radius5px;

   backgroundrgba(30,30,30 , 0.6);

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

   positionabsolute;

   top25px;

   left38%;

   margin0px auto;

}

 

#microphone:AFTER {

   content'';

   displayblock;

   width10px;height10px;

   border-radius5px;

   positionabsolute;

   top-2px;left-30px;

   backgroundrgba(0,0,0 , 0.8);

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

}

 

#voice{

   width6px;

   height60px;

   background-colorrgba(226,226,226,0.9);

   positionabsolute;

   left-14px;

   top60px;

   border-top-left-radius5px;

   border-bottom-left-radius5px;

}

 

#screen{

   width:210px;

   height:320px;

   background-colorrgba(50,50,50 , 0.8);

   positionabsolute;

   top55px;

   left0px;

}

 

#home{

   width35px;height35px;

   border-radius50%;

   backgroundrgb(250,250,250);

   border2px solid #c0c0c0;

   box-shadow2px 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;

   positionabsolute;

   bottom4px;

   left42%;

}

</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>


 点赞


 发表评论

当前回复:作者

 评论列表


留言区