怎么用纯CSS实现一张纪念卓别林的卡片
怎么用纯CSS实现一张纪念卓别林的卡片
这篇文章给大家分享的是有关怎么用纯CSS实现一张纪念卓别林的卡片的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
代码解读
定义dom，容器中包含的3个元素分别代表帽子、胡须和手杖：
<figureclass="chaplin">
<spanclass="hat"></span>
<spanclass="beard"></span>
<spanclass="stick"></span>
</figure>
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}
定义容器尺寸，并设置子元素水平居中：
.chaplin{
width:40em;
height:30em;
font-size:10px;
background-color:#eee;
box-shadow:003emrgba(0,0,0,0.2);
display:flex;
flex-direction:column;
align-items:center;
}
定义默认颜色，后面用currentColor引用此颜色：
.chaplin{
color:#555;
}
画出帽子的轮廓：
.chaplin{
position:relative;
}
.hat{
position:absolute;
width:6.4em;
height:4.6em;
background-color:currentColor;
border-radius:2.3em2.3em00;
top:1.4em;
}
用伪元素画出帽沿：
.hat::before{
content:'';
position:absolute;
width:10em;
height:0.8em;
background-color:currentColor;
border-radius:0.4em;
top:calc(100%+0.4em);
left:calc((100%-10em)/2);
}
画出胡子：
.beard{
position:absolute;
width:1.5em;
height:0;
top:11.6em;
border:solidtransparent;
border-width:00.4em1em0.4em;
border-bottom-color:currentColor;
}
画出手杖的杖杆：
.stick{
position:absolute;
width:0.8em;
height:10.5em;
background-color:currentColor;
bottom:0;
}
用::before伪元素画出手杖的握柄：
.stick::before{
content:'';
position:absolute;
box-sizing:border-box;
width:5.6em;
height:3em;
border:0.8emsolid;
border-radius:5.6em5.6em00;
border-bottom:none;
top:-3em;
}
用::after伪元素修饰握柄的端点，使其圆润自然：
.stick::after{
content:'';
position:absolute;
width:0.8em;
height:0.8em;
background-color:currentColor;
border-radius:50%;
left:calc(5.6em-0.8em);
top:-0.4em;
}
使手杖水平居中：
.stick{
left:calc((100%-(5.6em-0.8em))/2);
}
至此，抽象的卓别林形象完成，接下来排版一句他的名言。
在dom中增加一个.quote元素，并把一句话分为3段：
<figureclass="chaplin">
<spanclass="hat"></span>
<spanclass="beard"></span>
<spanclass="stick"></span>
<pclass="quote">
<span>adaywithout</span>
<span>laughter</span>
<span>isadaywasted</span>
</p>
</figure>
定位文字，并竖排3段文字：
.quote{
position:absolute;
left:50%;
bottom:2.5em;
font-family:sans-serif;
text-transform:uppercase;
font-weight:bold;
display:flex;
flex-direction:column;
}
调整字号和字间距，使3段文字对齐：
.quotespan:nth-child(1){
letter-spacing:0.05em;
}
.quotespan:nth-child(2){
font-size:1.6em;
}
感谢各位的阅读！关于“怎么用纯CSS实现一张纪念卓别林的卡片”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。
[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[