css布局绘制iphone13 pro后背效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局绘制iphone13 pro后背效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #F5F5F5;
}
#iphone {
width: 662px;
height: 500px;
margin: auto;
position: relative;
border-top-left-radius: 106px;
border-top-right-radius: 106px;
border: 1px solid #22324b;
border-bottom: 0;
background-image: linear-gradient(45deg, #b3d1eb, #a6c2d8);
box-shadow:
inset 0px 0px 0px 1px #f7ffff,
inset 0px 0px 0px 2px #c8e2fd,
inset 0px 0px 0px 1px #f7ffff,
inset 0px 0px 0px 6px #0d0c08,
inset 0px 0px 0px 8px #d0e3f2;
}
#iphone::before,
#iphone::after {
content: '';
display: block;
width: 10px;
height: 6px;
position: absolute;
left: 132px;
backdrop-filter: blur(12px);
}
#iphone::after {
left: 0;
top: 135px;
width: 6px;
height: 10px;
}
.camera {
background-image: linear-gradient(45deg, #b6cbde, #afc5da, #b6cbde);
width: 330px;
height: 330px;
position: absolute;
top: 38px;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0