文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么用CSS的Grid布局实现小松鼠邮票的效果

2024-04-02 19:55

关注

这篇文章主要介绍怎么用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:45em;

    height:63em;

    font-size:6px;

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

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

    <pclass="stamp">

    <pclass="puppy">

    <!--略-->

    </p>

    <pclass="text">

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

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

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

    </p>

    </p>

    设置的文字样式:

    .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;

    }

    设置作者的文字样式:

    .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布局实现小松鼠邮票的效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯