前端每日挑战の纯CSS画卓别林
内容摘要内容学习代码
内容摘要
伤心啊，写了好几天博客没人看~不过没关系，写博客的主要目的还是为了技术积累。在segmentFault上看到有前端每日专栏，觉得不错，正好css基础还不够巩固决定跟着该专栏每天跟着学习一些有趣的纯html+css制作的效果，动画出处：https://segmentfault.com/a/1190000016791409
最终效果预览：https://codepen.io/comehope/pen/WaaBNV
内容学习
这次的内容就很简单了，就是用css画画。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>卓别林</title>
<style>
body{
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.chaplin{
width: 40em;
height: 30em;
font-size: 10px;
background-color: #eeeeee;
display: flex;
flex-direction: column;
align-items: center;
/*定义默认颜色，以后的颜色用currentColor可代替*/
color: #555555;
position: relative;
}
.hat{
position:absolute;
width: 6.4em;
height: 4.6em;
background-color: currentColor;
border-radius: 2.3em 2.3em 0 0;
top: 1.4em;
}
.hat::before{
content: '';
position: absolute;
width: 10em;
height: 0.8em;
background-color: currentColor;
-webkit-border-radius: 0.4em;
-moz-border-radius: 0.4em;
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法画梯形*/
border: solid transparent;
border-width: 0 0.4em 1em 0.4em;
border-bottom-color: currentColor;
}
.stick{
position: absolute;
width: 0.8em;
height: 10.5em;
background-color: currentColor;
bottom: 0;
left: calc((100% - (5.6em - 0.8em)) / 2);
}
.stick::before{
content: "";
position: absolute;
box-sizing: border-box;
width: 5.6em;
height: 3em;
border: 0.8em solid;
border-radius: 5.6em 5.6em 0 0;
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;
}
.quote{
position: absolute;
left: 50%;
bottom: 2.5em;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
display: flex;
flex-direction: column;
}
.quote span:nth-child(1){
/*调整字母间距*/
letter-spacing: 0.05em;
}
.quote span:nth-child(2){
font-size: 1.6em;
}
</style>
</head>
<body>
<figure class="chaplin">
<span class="hat"></span>
<span class="beard"></span>
<span class="stick"></span>
<p class="quote">
<span>a day without</span>
<span>laughter</span>
<span>is a day wasted</span>
</p>
</figure>
</body>
</html>
