前端每日挑战の纯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>
