怎么用CSS的Grid布局实现小鸡邮票

这篇文章主要介绍了怎么用CSS的Grid布局实现小鸡邮票,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

为华龙等地区用户提供了全套网页设计制作服务,及华龙网站建设行业解决方案。主营业务为成都网站建设、做网站、华龙网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

代码解读

定义dom,容器表示邮票:

居中显示:

body{

margin:0;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

background-color:teal;

}

设置容器尺寸:

.stamp{

position:relative;

width:57em;

height:71em;

font-size:5px;

padding:5em;

background-color:white;

}

用重复背景绘制出邮票的齿孔:

.stamp{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

}

.stamp::after,

.stamp::before{

content:'';

width:100%;

height:100%;

position:absolute;

background:

radial-gradient(circle,teal50%,transparent50%),

radial-gradient(circle,teal50%,transparent50%);

background-size:3.5em3.5em;

}

.stamp::before{

top:1.5em;

background-repeat:repeat-y;

background-position:-3%0,103%0;

}

.stamp::after{

left:1.5em;

background-repeat:repeat-x;

background-position:0-2.5%,0102.5%;

}

在html文件中增加小鸡的dom元素,子元素分别表示头部、喙、身体、尾巴、腿、爪子、太阳、桔子:

设置grid布局的行列尺寸:

.rooster{

display:grid;

grid-template-columns:22.5em13em1.75em14.5em4.5em;

grid-template-rows:12.5em14.5em15em8em5.5em;

background-color:wheat;

padding:2em;

margin-top:-2em;

}

画出扇形的头部:

.head{

grid-column:4;

grid-row:2;

background-color:burlywood;

border-top-left-radius:100%;

}

画出小鸡的眼睛和脸上的红晕:

.head{

position:relative;

}

.head::after{

content:'';

position:absolute;

width:2.8em;

height:2.8em;

border-radius:50%;

background-color:black;

right:30%;

box-shadow:2em4em4emrgba(255,100,0,0.5);

}

画出扇形的喙:

.beak{

grid-column:5;

grid-row:2;

height:4.5em;

background-color:darkorange;

border-bottom-right-radius:100%;

}

画出半圆形的身体:

.body{

grid-column:2/5;

grid-row:3;

width:30em;

background-color:saddlebrown;

border-radius:0015em15em;

}

用伪元素,通过阴影画出翅膀:

.body{

position:relative;

overflow:hidden;

}

.body::after{

content:'';

position:absolute;

width:20em;

height:10em;

border-radius:inherit;

box-shadow:4em2em4emrgba(0,0,0,0.3);

left:calc((30em-20em)/2);

}

画出扇形的尾巴:

.tail{

grid-column:1;

grid-row:1/3;

height:22.5em;

background-color:burlywood;

align-self:end;

border-top-left-radius:100%;

}

画出扇形的腿:

.leg{

grid-column:4;

grid-row:4;

width:8em;

background-color:burlywood;

border-bottom-right-radius:100%;

}

画出扇形的小爪子:

.foot{

grid-column:4;

grid-row:5;

width:5.5em;

background-color:darkorange;

border-top-right-radius:100%;

}

画出半圆形的太阳:

.sun{

grid-column:3/5;

grid-row:1;

width:17em;

--h:calc(17em/2);

height:var(--h);

background-color:darkorange;

border-radius:00var(--h)var(--h);

}

画出圆形的桔子和半圆形的叶片,注意此处叶片的画法与前面画半圆形的画法不同:

.orange-stuff{

grid-column:1;

grid-row:3/6;

width:16em;

height:16em;

background-color:darkorange;

align-self:end;

justify-self:end;

border-radius:50%;

position:relative;

}

.orange-stuff::before{

content:'';

position:absolute;

width:8em;

height:8em;

background:linear-gradient(45deg,transparent50%,saddlebrown50%);

border-radius:50%;

top:-6.8em;

left:10%;

}

在dom中再增加一些文本,包括标题、作者和面值:

Rooster

comehope

120

设置标题的文字样式:

.text{

position:relative;

width:calc(100%+2em*2);

height:6em;

font-family:sans-serif;

}

.text.title{

position:absolute;

font-size:6em;

font-weight:bold;

color:brown;

}

设置作者的文字样式:

.text.author{

position:absolute;

font-size:3em;

bottom:-1.2em;

color:dimgray;

}

设置面值的文字样式:

.text.face-value{

position:absolute;

font-size:14em;

right:0;

line-height:0.9em;

color:darkcyan;

}

感谢你能够认真阅读完这篇文章,希望小编分享的“怎么用CSS的Grid布局实现小鸡邮票”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


文章标题:怎么用CSS的Grid布局实现小鸡邮票
URL标题:http://hbruida.cn/article/gjoese.html

其他资讯