您好,登錄后才能下訂單哦!
這篇文章主要介紹怎么用CSS的Grid布局實(shí)現(xiàn)小松鼠郵票的效果,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
代碼解讀
定義dom,容器表示郵票:
<divclass="stamp">
</div>
居中顯示:
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:teal;
}
設(shè)置容器尺寸:
.stamp{
position:relative;
width:45em;
height:63em;
font-size:6px;
padding:5em;
background-color:white;
}
用重復(fù)背景繪制出郵票的齒孔:
.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:-4%0,104%0;
}
.stamp::after{
left:1.5em;
background-repeat:repeat-x;
background-position:0-3%,0103%;
}
在html文件中增加小雞的dom元素,子元素分別表示耳朵、頭部、身體、尾巴下部、尾巴上部、腿、爪子:
<pclass="stamp">
<pclass="squirrel">
<pclass="ear"></p>
<pclass="head"></p>
<pclass="body"></p>
<pclass="tail-start"></p>
<pclass="tail-end"></p>
<pclass="leg"></p>
<pclass="foot"></p>
</p>
</p>
設(shè)置grid布局的行列尺寸:
.squirrel{
display:grid;
grid-template-columns:11.5em7em15.5em10.5em;
grid-template-rows:13em5em11.5em22.5em;
background-color:silver;
padding:2em;
margin-top:-2em;
}
畫出扇形的頭部:
.head{
grid-column:1;
grid-row:3;
background-color:chocolate;
border-bottom-left-radius:100%;
}
用徑向漸變畫出眼睛:
.head{
background-image:radial-gradient(
circleat58%22%,
black1.4em,
transparent1.4em
);
}
畫出扇形的耳朵:
.ear{
grid-column:2;
grid-row:2;
width:5em;
background-color:bisque;
border-bottom-right-radius:100%;
}
畫出扇形的身體:
.body{
grid-column:2/4;
grid-row:4;
background-color:chocolate;
border-top-right-radius:100%;
position:relative;
overflow:hidden;
}
用偽元素,通過陰影畫出蜷曲的腿:
.body::before{
content:'';
position:absolute;
width:100%;
height:50%;
box-shadow:2em-2em4emrgba(0,0,0,0.3);
bottom:0;
--w:calc((7em+15.5em)/2);
border-top-left-radius:var(--w);
border-top-right-radius:var(--w);
}
畫出半圓形的小爪子:
.foot{
grid-column:1;
grid-row:4;
height:4em;
width:8em;
background-color:saddlebrown;
justify-self:end;
align-self:end;
border-radius:4em4em00;
filter:brightness(0.8);
}
畫出半圓形的尾巴下部:
.tail-start{
grid-column:4;
grid-row:4;
--h:calc(22.5em-1.5em);
height:var(--h);
background-color:bisque;
align-self:end;
border-radius:0var(--h)var(--h)0;
}
畫出半圓形的尾巴上部:
.tail-end{
grid-column:3;
grid-row:1/5;
--h:calc(13em+5em+11.5em+1.5em);
height:var(--h);
background-color:chocolate;
border-radius:var(--h)00var(--h);
}
在dom中再增加一些文本,包括標(biāo)題、作者和面值:
<pclass="stamp">
<pclass="puppy">
<!--略-->
</p>
<pclass="text">
<spanclass="title">Squirrel</span>
<spanclass="author">comehope</span>
<spanclass="face-value">200</span>
</p>
</p>
設(shè)置標(biāo)題的文字樣式:
.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:darkslategray;
}
設(shè)置作者的文字樣式:
.text.author{
position:absolute;
font-size:3em;
bottom:-1.2em;
color:dimgray;
}
設(shè)置面值的文字樣式:
.text.face-value{
position:absolute;
font-size:14em;
right:0;
line-height:0.9em;
color:darkcyan;
}
大功告成!
以上是“怎么用CSS的Grid布局實(shí)現(xiàn)小松鼠郵票的效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。