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

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

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

代码解读

定义dom，容器表示邮票：

<divclass="stamp">

</div>

居中显示：

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元素，子元素分别表示头部、喙、身体、尾巴、腿、爪子、太阳、桔子：

<divclass="stamp">

<divclass="rooster">

<spanclass="head"></span>

<spanclass="beak"></span>

<spanclass="body"></span>

<spanclass="tail"></span>

<spanclass="leg"></span>

<spanclass="foot"></span>

<spanclass="sun"></span>

<spanclass="orange-stuff"></span>

</div>

</div>

设置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中再增加一些文本，包括标题、作者和面值：

<divclass="stamp">

<divclass="puppy">

<!--略-->

</div>

<pclass="text">

<spanclass="title">Rooster</span>

<spanclass="author">comehope</span>

<spanclass="face-value">120</span>

</p>

</div>

设置标题的文字样式：

.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布局实现小鸡邮票
标题网址：https://www.cdcxhl.com/article34/gjoese.html

成都网站建设公司_创新互联，为您提供企业建站、定制网站、域名注册、网站策划、小程序开发、电子商务

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联