纯 CSS 制作逼真的 iphone7

前端  /  管理员 发布于 7年前   292

好几天没有更新了，直接上效果吧，哈哈！（我想这个应该大部分都会！哈哈哈！）

 

代码如下:

html:

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

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>

总结

以上所述是小编给大家介绍的纯 CSS 制作逼真的 iphone7，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！