时间:2021-05-08
好几天没有更新了,直接上效果吧,哈哈!(我想这个应该大部分都会!哈哈哈!)
代码如下:
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,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
iPhone7发布已经近一个月了,相信对于亮黑色版本的iPhone7或者7plus大家不会陌生了,但是对于蓝色版本的iPhone7,大家真的见过吗?iPhone
还有一个月左右的时间,iPhone7就要来了,网上关于它的传闻从来都没有缺少过,如今网曝了iPhone7,虽然只是样品,但是如果iPhone7外观设计真的是
iPhone7或将配备侧面显示屏是真的吗?近日,AppleWatch和12英寸MacBook正式推出,iPhone7的各种传闻也持续升温,更多资讯与你分享。
iphone6和iphone6plus还在热卖中,iphone7的屏幕就曝光啦~有消息称iphone7将采用裸眼3d屏幕,这是不是真的呢?下面就和小编一起去
iphone7概念机图片大家想看吗?小编带来了苹果iphone7概念机图赏,大家希望iPhone7长什么样子呢?让我们通过下文了解关于iPhone7的最新消