WEB前端纯 CSS 画 iphone,网友:我卖一个肾来买你这台iPhone

wil 阅读:5 2019-05-22 10:51:05 评论:0

画iPhone小意思的啦!

WEB前端纯 CSS 画 iphone,网友:我卖一个肾来买你这台iPhone


纯CSS画iPhone,话不多说上效果图!

WEB前端纯 CSS 画 iphone,网友:我卖一个肾来买你这台iPhone


代码如下:

html:

<div class="container">
 <div class="round"></div>
 <div class="longround"></div>
 <div class="screen">iphone 7plus</div>
 <div class="home"></div>
</div>

大师兄送你套WEB前端入门心法,关注小编私信【前端】,免费领取WEB前端学习资料从最基础的HTML+CSS+JavaScript [炫酷特效,游戏,插件封装,设计模式]到移动端的项目实战的学习资料都有整理,送给每一位前端小伙伴。

css:

<style type="text/css">
 .container {
 width: 300px;
 height: 600px;
 background-color: rgba(0, 0, 0, .6);
 margin: 50px auto;
 border-radius: 30px;
 box-shadow: 0 0 20px rgba(0, 0, 0, .5);
 position: relative;
 z-index: 999;
 }
 .container::before {
 content: "";
 width: 3px;
 height: 50px;
 background: rgba(0, 0, 0, .5);
 position: absolute;
 top: 170px;
 left: 300px;
 border-radius: 0 4px 4px 0;
 }
 .container::after {
 content: "";
 width: 3px;
 height: 100px;
 background: rgba(0, 0, 0, .5);
 position: absolute;
 top: 50px;
 left: 300px;
 border-radius: 0 4px 4px 0;
 }
 .container .round {
 width: 12px;
 height: 12px;
 border: 3px solid #4a4a4a;
 background-color: rgba(0, 0, 0, .6);
 border-radius: 50%;
 position: absolute;
 left: 50%;
 top: 10px;
 margin-left: -7.5px;
 }
 .container .longround {
 position: absolute;
 width: 100px;
 height: 8px;
 border: 3px solid #4a4a4a;
 background-color: rgba(0, 0, 0, .6);
 border-radius: 30px;
 position: absolute;
 left: 50%;
 margin-left: -50px;
 top: 35px;
 }
 .container .screen {
 width: 280px;
 height: 470px;
 background: linear-gradient(to bottom, rgba(255, 255, 255, .2), rgba(255, 255, 255, .8));
 position: absolute;
 top: 60px;
 left: 50%;
 margin-left: -140px;
 color: #fff;
 text-align: center;
 font-weight: bold;
 font-size: 20px;
 line-height: 450px;
 box-shadow: 0 0 10px rgba(0, 0, 0, .6) inset;
 }
 .container .screen::before {
 content: "";
 width: 50px;
 height: 4px;
 background: rgba(0, 0, 0, .5);
 border-radius: 3px 3px 0 0;
 position: absolute;
 top: -63px;
 left: 180px;
 }
 .container .screen::after {
 content: "";
 width: 7px;
 height: 10px;
 background: rgba(0, 0, 0, .5);
 border-radius: 5px 0 0 5px;
 position: absolute;
 top: -10px;
 left: -17px;
 }
 .container .home {
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background-color: rgba(0, 0, 0, .6);
 border: 2px solid #4a4a4a;
 position: absolute;
 bottom: 10px;
 left: 50%;
 margin-left: -25px;
 box-shadow: 0 0 2px black inset;
 }
 .container .home::before {
 content: "";
 width: 25px;
 height: 25px;
 background-color: transparent;
 border: 2px solid rgba(255, 255, 255, .5);
 position: absolute;
 left: 10px; 
 top: 10px;
 }
</style>


本文 微商货源 原创,转载保留链接!网址:http://www.cesars-forest.com/post/17329.html

可以去百度分享获取分享代码输入这里。
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论