高防服务器

怎么用纯CSS实现一张纪念卓别林的卡片


怎么用纯CSS实现一张纪念卓别林的卡片

发布时间:2022-02-28 15:38:11 来源:高防服务器网 阅读:88 作者:小新 栏目:web开发

这篇文章给大家分享的是有关怎么用纯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 成本,提升运维效率,使您更专注于核心业务创新。

[图文来源于网络,不代表本站立场,如有侵权,请联系高防服务器网删除]
[