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

这篇文章给大家分享的是有关怎么用纯CSS实现一张纪念卓别林的卡片的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

站在用户的角度思考问题,与客户深入沟通,找到陆河网站设计与陆河网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站建设、成都网站设计、企业官网、英文网站、手机端网站、网站推广、国际域名空间、网页空间、企业邮箱。业务覆盖陆河地区。

代码解读

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

居中显示:

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段:

adaywithout

laughter

isadaywasted

定位文字,并竖排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实现一张纪念卓别林的卡片”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


网页题目:怎么用纯CSS实现一张纪念卓别林的卡片
链接地址:http://scyanting.com/article/jpeico.html