外观描述
首先一副眼镜至少需要有眼镜框(此处眼镜片省略),眼镜腿和鼻托
先看效果
设计
这里我想展示一个透视的效果:
- 首先画出两个眼镜框(span.circle)和一个鼻托(span.support)
- 然后画出左右两个眼镜腿,使用transform对眼镜腿进行3d空间旋转,使用伪元素画出眼镜腿的末端,并沿Z轴旋转和眼镜腿保持垂直效果,适当translate一下和眼镜腿对齐
- 最后实现透视效果,使用 transform-style: preserve-3d;指定子元素是在3D空间中呈现
- transform: perspective(200px) skew(5deg, 7deg);来设置焦距为200px,X轴和Y轴倾斜一点
- 注意:.row { transform-style: preserve-3d; } 这里对div.row又设置了一次,否则其子元素.left-leg, .right-leg中单独设置的空间变换(眼镜腿是垂直于眼镜框的)不会生效
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glasses Demo</title>
<style>
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100vw;
}
.container {
width: 500px;
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
transform: perspective(200px) skew(5deg, 7deg) translate(-50%, -50%);
}
.row {
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
}
.circle {
display: inline-block;
width: 100px;
height: 60px;
border: 1px solid #000;
border-radius: 20px;
}
.left-leg, .right-leg {
display: inline-block;
width: 150px;
height: 5px;;
background-color: #000;
border-radius: 2px;
}
.left-leg {
transform: rotateY(185deg) rotateZ(22deg);
transform-origin: 100% 50% 0;
}
.right-leg {
transform: rotateY(-5deg) rotateZ(-20deg);
transform-origin: 0 50% 0;
}
.left-leg::after, .right-leg::after {
display: inline-block;
width: 20px;
height: 5px;
background-color: #000;
content: "";
}
.left-leg::after {
transform: rotateZ(90deg) translate(-4px, 10px);
border-radius: 2px;
}
.right-leg::after {
transform: rotateZ(90deg) translate(-2px, -132px);
border-radius: 2px;
}
.support {
display: inline-block;
background-color: #000;
width: 20px;
height: 2px;
}
</style>;
</head>
<body>
<div class="container">
<div class="row">
<span class="left-leg"></span>
<span class="circle">
</span>
<span class="support"></span>
<span class="circle">
</span>
<span class="right-leg"></span>
</div>
</div>
</body>
</html>