Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
*, *:after, *:before { box-sizing: border-box; } body { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradientBG 15s ease infinite; } @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .iphone { box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #999, 0 0 30px 0px rgba(0, 0, 0, 0.7); border: 5px solid #d9dbdc; background: #f8f8f8; padding: 15px; border-radius: 50px; height: 877px; width: 423px; position: relative; margin: 30px auto; transform: scale(0.8); } .iphone-top { padding: 5px 110px 40px; position: relative; } .iphone-top .speaker { display: block; width: 70px; height: 6px; margin: 0 auto; border-radius: 6px; background: #292728; } .iphone-top .camera { display: block; margin: 0 auto; height: 10px; width: 10px; border-radius: 50%; margin-bottom: 13px; background: #333; } .iphone-top .sensor { display: block; width: 15px; height: 15px; float: left; background: #333; margin-top: -5px; border-radius: 50%; } .top-bar, .bottom-bar { display: block; width: 423px; height: 15px; border-left: 5px solid #BBB; border-right: 5px solid #BBB; position: absolute; left: -5px; } .top-bar { top: 65px; } .bottom-bar { bottom: 65px; } .iphone-screen { background: #eee; border: 1px solid #fff; height: 677px; width: 375px; margin: 0 auto; border: 2px solid rgba(0, 0, 0, 0.9); border-radius: 3px; overflow: hidden; background-image: url("https://images.unsplash.com/photo-1550025899-5f8a06b1b3a8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687"); background-size: cover; background-repeat: no-repeat; } .iphone-screen img { width: 100%; } .buttons .on-off, .buttons .up, .buttons .down, .buttons .sleep { display: block; background: #CCC; position: absolute; border-radius: 2px 0px 0px 2px; } .buttons .on-off { height: 40px; width: 3px; top: 100px; left: -8px; } .buttons .up, .buttons .down, .buttons .sleep { height: 60px; width: 5px; left: -10px; } .buttons .up { top: 170px; } .buttons .down { top: 250px; } .buttons .sleep { left: auto; right: -10px; top: 170px; border-radius: 0px 2px 2px 0px; } .iphone-bottom { padding: 10px 0 0; } .iphone-bottom span { display: block; margin: 0 auto; width: 68px; height: 68px; background: #ccc; border-radius: 50%; background: linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%); position: relative; } .iphone-bottom span:after { content: ""; display: block; width: 60px; height: 60px; background: #fff; border-radius: 50%; position: absolute; left: 4px; top: 4px; }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS绘制iPhone 6-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号