当前位置:Gxlcms > css > 如何使用纯CSS实现一张纪念卓别林的卡片(附源码)

如何使用纯CSS实现一张纪念卓别林的卡片(附源码)

时间:2021-07-01 10:21:17 帮助过:50人阅读

本篇文章给大家带来的内容是关于如何使用纯CSS实现一张纪念卓别林的卡片(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

效果预览

1931873053-5bd03eb3324ec_articlex.png


源代码下载

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,容器中包含的 3 个元素分别代表帽子、胡须和手杖:

  1. <figure class="chaplin">
  2. <span class="hat"></span>
  3. <span class="beard"></span>
  4. <span class="stick"></span>
  5. </figure>

居中显示:

  1. body {
  2. margin: 0;
  3. height: 100vh;
  4. display: flex;
  5. align-items: center;
  6. justify-content: center;
  7. }

定义容器尺寸,并设置子元素水平居中:

  1. .chaplin {
  2. width: 40em;
  3. height: 30em;
  4. font-size: 10px;
  5. background-color: #eee;
  6. box-shadow: 0 0 3em rgba(0, 0, 0, 0.2);
  7. display: flex;
  8. flex-direction: column;
  9. align-items: center;
  10. }

定义默认颜色,后面用 currentColor 引用此颜色:

  1. .chaplin {
  2. color: #555;
  3. }

画出帽子的轮廓:

  1. .chaplin {
  2. position: relative;
  3. }
  4. .hat {
  5. position: absolute;
  6. width: 6.4em;
  7. height: 4.6em;
  8. background-color: currentColor;
  9. border-radius: 2.3em 2.3em 0 0;
  10. top: 1.4em;
  11. }

用伪元素画出帽沿:

  1. .hat::before {
  2. content: '';
  3. position: absolute;
  4. width: 10em;
  5. height: 0.8em;
  6. background-color: currentColor;
  7. border-radius: 0.4em;
  8. top: calc(100% + 0.4em);
  9. left: calc((100% - 10em) / 2);
  10. }

画出胡子:

  1. .beard {
  2. position: absolute;
  3. width: 1.5em;
  4. height: 0;
  5. top: 11.6em;
  6. border: solid transparent;
  7. border-width: 0 0.4em 1em 0.4em;
  8. border-bottom-color: currentColor;
  9. }

画出手杖的杖杆:

  1. .stick {
  2. position: absolute;
  3. width: 0.8em;
  4. height: 10.5em;
  5. background-color: currentColor;
  6. bottom: 0;
  7. }

::before 伪元素画出手杖的握柄:

  1. .stick::before {
  2. content: '';
  3. position: absolute;
  4. box-sizing: border-box;
  5. width: 5.6em;
  6. height: 3em;
  7. border: 0.8em solid;
  8. border-radius: 5.6em 5.6em 0 0;
  9. border-bottom: none;
  10. top: -3em;
  11. }

::after 伪元素修饰握柄的端点,使其圆润自然:

  1. .stick::after {
  2. content: '';
  3. position: absolute;
  4. width: 0.8em;
  5. height: 0.8em;
  6. background-color: currentColor;
  7. border-radius: 50%;
  8. left: calc(5.6em - 0.8em);
  9. top: -0.4em;
  10. }

使手杖水平居中:

  1. .stick {
  2. left: calc((100% - (5.6em - 0.8em)) / 2);
  3. }

至此,抽象的卓别林形象完成,接下来排版一句他的名言。
在 dom 中增加一个 .quote 元素,并把一句话分为 3 段:

  1. <figure class="chaplin">
  2. <span class="hat"></span>
  3. <span class="beard"></span>
  4. <span class="stick"></span>
  5. <p class="quote">
  6. <span>a day without</span>
  7. <span>laughter</span>
  8. <span>is a day wasted</span>
  9. </p>
  10. </figure>

定位文字,并竖排 3 段文字:

  1. .quote {
  2. position: absolute;
  3. left: 50%;
  4. bottom: 2.5em;
  5. font-family: sans-serif;
  6. text-transform: uppercase;
  7. font-weight: bold;
  8. display: flex;
  9. flex-direction: column;
  10. }

调整字号和字间距,使 3 段文字对齐:

  1. .quote span:nth-child(1) {
  2. letter-spacing: 0.05em;
  3. }
  4. .quote span:nth-child(2) {
  5. font-size: 1.6em;
  6. }

大功告成!

以上就是如何使用纯CSS实现一张纪念卓别林的卡片(附源码)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行