700行无用 纯 css 祝考生 金榜高粽!《1-星辰平台

1_bit 发表于 2022/06/04 21:42:19 2022/06/04
【摘要】 纯css 海报

今天才想起来这回事,没办法就急急忙忙的赶工一下,接下来我就画一下这个海报试试手了:

1.1 准备工作

先给整个网页制作一个布局吧,直接 flex 搞定,并且使其居中 justify-content、align-items 都要赋值为 center:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

接下来直接创建一个 div ,给予一个 demo 样式:


    

那么此刻咱们需要做的准备工作就搞定了,那么接下来咱们就在这个框内画东西:

1.2 背景云朵

首先咱们就先画一个云朵吧,云朵就在粽子的脚底下,制作起来很简单;哦,提一下,为了简单(主要是懒),就直接在 style 标签中添加样式吧。

我们先看一下一个云朵的样子:

这个云呢一看就知道就是一个 div 给予一个圆角,随后再来一个 before 和 after 不就搞定了?

所以现在咱们创建一个 cloud 样式,并且设置 before 和 after 的样式:

.cloud:after,
.cloud:before {
    content: "";
    position: absolute;
    background-color: white;
    border-radius: 50%;
}
.cloud:after {
    width: 50px;
    height: 50px;
    top: -54%;
    left: 14%;
}
.cloud:before {
    width: 100px;
    height: 100px;
    top: -90%;
    right: 10%;
}

after 和 before 大小不一样,所以我设置的宽高也是不一的,但总有一个大或者一个小;不过一定要记住设置圆角否则你的云就是这样:

突然感觉这个云很像一个坦克,看来坦克我也会画了。

绘制好云后你可以再设置两个样式,当然你也可以用子元素选择器为多个云设置不一样的大小、位置信息,在这里图方便,我就直接给予了两个样式:

.cloud1 {
    transform: scale(1);
    opacity: 0.8;
    left: 100px;
    top: 410px;
    z-index: 1;
}
.cloud2 {
    left: 260px;
    top: 360px;
    transform: scale(1.1);
    opacity: 0.9;
    z-index: 1;
}

这两个样式给予的透明度 opacity 是为了使云彩更加的“缥缈”,当然你也可以再加一些阴影,这样看起来更加真实,并且其中的 scale 可以帮助你调整云朵大小,再或者你可以使用 rotate 等其他方法转动一下角度都行。

最后我添加两个 div,包裹在一个 div 中方便分类(可能我的风格不是前端风格,不要在意):

1.3 背景圈圈圈

云朵增加完了咱们就开水增加这些背景上的“圈圈圈”吧:

这些圈圈圈你可以用背景渐变来做,在这里我就直接画了,也就是一个 div 设置好圆角然后 left、top、bottom 调一下位置,说起来是真的简单,就不再赘述这里了,直接写上样式:

.circle {
    position: absolute;
    height: 400px;
    width: 1200px;
}
.circle1,
.circle2,
.circle3,
.circle4,
.circle5,
.circle6,
.circle7,
.circle8 {
    position: absolute;
    border-radius: 100%;
    background-color: #0f893c;
}
.circle1 {
    height: 300px;
    width: 300px;
    bottom: -130px;
}
.circle2 {
    height: 150px;
    width: 150px;
    bottom: -30px;
    left: 270px
}
.circle3 {
    height: 30px;
    width: 30px;
    bottom: 10px;
    left: 430px
}
.circle4 {
    height: 60px;
    width: 60px;
    bottom: 10px;
    left: 530px
}
.circle5 {
    height: 160px;
    width: 260px;
    bottom: -130px;
    left: 530px
}
.circle6 {
    height: 60px;
    width: 160px;
    bottom: -30px;
    left: 730px
}
.circle7 {
    height: 60px;
    width: 160px;
    bottom: -30px;
    left: 780px
}
.circle8 {
    height: 160px;
    width: 160px;
    bottom: -80px;
    left: 880px
}
/*黄色圈*/
.y-circle1,
.y-circle2,
.y-circle3,
.y-circle4 {
    position: absolute;
    border-radius: 100%;
    background-color: #cdd622;
}
.y-circle1 {
    height: 60px;
    width: 60px;
    bottom: 180px;
    left: 880px
}
.y-circle2 {
    height: 30px;
    width: 30px;
    bottom: 280px;
    left: 780px
}
.y-circle3 {
    height: 10px;
    width: 10px;
    bottom: 380px;
    left: 720px
}
.y-circle4 {
    height: 20px;
    width: 20px;
    bottom: 290px;
    left: 680px
}

因为每一个圆圈圈都有不同的大小,所以就写了多个样式用于调整他们的大小、位置等,突然发现还不如用渐变方便,但是写都写了,那就贴上吧;接着咱们在 html 中添加元素:

此时整个背景效果如下:

是不是感觉好像有点意思了?那我们接着往下。

2.1 添加小太阳

首先咱们可以分析一下这个小太阳:

我们可以明显的知道小太阳这个角色和本身太阳的区别,那就是有了表情;没有表情的太阳和有表情的太阳完全不是同一个“东西”,这差距就像 “喜欢吃辣的人看到了豆腐无感,看到了麻婆豆腐就控制不了自己” ,所以关键点就是表情的制作。

虽然有表情和没表情的观感不一样,但是本质一个圆还是要画的,那么这个太阳还有周围的红色小点阳光,肯定是在一个父容器之下,那么此时咱们先给他们的父容器设置一个样式吧:

/*太阳*/  
.sun {
    position: absolute;
    height: 150px;
    width: 150px;
}

在这里我定义了这个父容器的布局以及宽高,那么接下来咱们就开始定义这个太阳的主体,直接设置一个元素圆角值给满随后稍微定一下位置即可:

.sun-body {
    position: absolute;
    height: 95px;
    width: 95px;
    background-color: #ff5f47;
    border-radius: 100%;
    border: 4px black solid;
    left: 30px;
    top: 30px;
}

那么主体有了,就到眼睛了,很明显眼睛就是豆豆眼,直接一个元素圆角,设置背景色为黑解决:

.sun-eye {
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: black;
    border-radius: 100%;
}

那么此时太阳的眼睛有一个左有一个右,所以需要设置两个样式用于控制眼睛的位置,此时我们还需要注意到,接下来要绘制的粽子的眼睛也是有左右的,所以在这里需要设置样式限制在 sun-body 之下,那么这两个样式如下:

.sun-body>.eye-left {
    top: 60px;
    left: 70px;
}
.sun-body>.eye-right {
    top: 50px;
    left: 40px;
}

此时页面效果如下:

此时的太阳面无表情,不懂的还以为是少了一个洞的保龄球,所以表情还是很重要的,接着添加一个 smile 样式让太阳笑看人生,那这个样式怎么做呢?毕竟这个嘴巴是就等于一个雪糕棒的样子:

那我们就先开始画一个雪糕吧,就直接写一个 smile 样式,等下再改就好了;雪糕也是一个矩形,那么直接先给予一个矩形吧

.sun-body>.smile {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #fdc2a6 50%;
    top: 70px;
    left: 245px;
    border: 4px black solid;
}

效果如下:

那剩下的不就是给下面两个圆角变圆不就好了?真是恍然大悟,直接给予样式:

border-top-left-radius: 8%;
border-top-right-radius: 16%;
border-bottom-left-radius: 80%;
border-bottom-right-radius: 90%;

那么再给这个嘴巴转一下:

transform: rotate(20deg);

如果你想做一些效果还可以沿着垂直方向变换一下,都可以。那么接下来直接定位,并且给予背景色就完成了:

.sun-body>.smile {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #fdc2a6 50%;
    top: 70px;
    left: 45px;
    border: 4px black solid;
    border-top-left-radius: 8%;
    border-top-right-radius: 16%;
    border-bottom-left-radius: 80%;
    border-bottom-right-radius: 90%;
    transform: rotate(20deg);
}

最后再加一些阳光,阳光就是圆嘛,很简单的,所以直接写好样式:

.sunshine-top-left,
.sunshine-top-right,
.sunshine-bottom-left,
.sunshine-bottom-right {
    position: absolute;
    background-color: #a54a29;
    border-radius: 100%;
}
.sunshine-top-left {
    height: 10px;
    width: 10px;
    left: -30px;
    top: -20px;
}
.sunshine-top-right {
    height: 20px;
    width: 20px;
    left: 130px;
    top: 20px;
}
.sunshine-bottom-left {
    height: 30px;
    width: 30px;
    left: -20px;
    top: 120px;
}
.sunshine-bottom-right {
    height: 10px;
    width: 10px;
    left: 110px;
    top: 120px;
}

再调用即可:

2.2 添加粽子

2.2.1 粽子 body

粽子的话就是里面的白花花的米和外面两块叶子和简单的四肢:

做起来是挺简单的,叶子的话纹路我没有添加,可以简便加上去就好了,首先我们制作里面白花花的糯米和绿油油的叶子部分。

其实这个部分我是分为了上、右、下、左四个部分制作的:

并且再考虑这些部分都是同一个物体,所以也需要一个容器对其进行包裹,首先给予一个容器样式:

.rice-dumplings {
    height: 400px;
    width: 400px;
    position: absolute;
    transform: scale(0.5);
    left: 0;
}

接着先制作粽子的左半部分,其实左半部分也就是一个半圆进行变换而来, 左右两边的样式本质上是一致的,所以直接给予粽子上部分左右两边相同的样式:

.rice-dumplings-body-left-top,
.rice-dumplings-body-right-top {
    position: absolute;
    background-color: #ffffff;
    height: 300px;
    width: 300px;
    border-top-left-radius: 100%;
    border: 4px black solid;
    border-right: 0px;
}

在上面的样式中,由于右边编剧是有边框线的,直接去掉即可,所以使用了代码 border-right: 0px;

接着给予左右两边不一样的变换以及位置信息:

.rice-dumplings-body-left-top {
    left: 25px;
    top: 25px;
    transform: rotatey(30deg) rotate(-10deg);
}
.rice-dumplings-body-right-top {
    left: 235px;
    top: 25px;
    transform: rotatey(210deg) rotate(-10deg);
}

这个时候就应该给这个目前来说像半个饭团的东西一点“遮羞布”了,也就是两张叶子。

这两张叶子的制作方式相似,也就是给圆角然后进行旋转即可,在这里需要注意的是不同大小、角度的叶子变换效果不一样,可以适当的调整效果,并且其内部的叶子纹路也可以通过渐变制作,在这里我是用了渐变色,也可以使用阴影为其添加层次感:

.rice-dumplings-body-left-bottom,
.rice-dumplings-body-right-bottom {
    position: absolute;
    background: linear-gradient(to bottom right, #459712 15%, #8ad35d 80%, #459712 100%);
    border-top-left-radius: 0%;
    border: 4px black solid;
}
.rice-dumplings-body-left-bottom {
    height: 200px;
    width: 400px;
    top: 240px;
    left: 50px;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    border-top-right-radius: 100%;
    transform: rotate(15deg);
}
.rice-dumplings-body-right-bottom {
    height: 200px;
    width: 250px;
    top: 260px;
    left: 250px;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 20%;
    border-top-right-radius: 100%;
    transform: rotatey(180deg);
}

接着在代码中进行调用:

此时效果如下:

2.2.2 粽子 face

接着咱们开始制作这个粽子的脸部,这个脸部也需要在一个容器之内,所以继续设置一个父容器:

.rice-dumplings-face {
    position: absolute;
}

接着制作这个脸部的眼睛,这个眼睛可以看到其内部还有一个亮点:

这个亮点制作其实就是一个缩小版的白色圆点而已,所以现在就知道这个怎么做了,直接设置两个黑点和两个白点,使其在近似的位置就解决了:

.rice-dumplings-face {
    position: absolute;
}
.rice-dumplings-eye {
    position: absolute;
    height: 30px;
    width: 30px;
    border-radius: 100%;
    background-color: black;
}
.eye-left {
    left: 250px;
    top: 80px;
}
.eye-right {
    left: 350px;
    top: 70px;
}
.rice-dumplings-eye>.light {
    position: absolute;
    height: 10px;
    width: 10px;
    border-radius: 100%;
    background-color: white;
}
.rice-dumplings-eye>.postion {
    right: 20%;
    top: 10%;
}
.rice-dumplings-eye>.right {
    right: 20%;
    top: 10%;
}

以上样式中 light 为亮点,创建一个基础样式后再创建左右样式进行调用就可以了:

接着制作两个小脸蛋,也就是一个宽度大于高度的椭圆,设置其 before 文本为“///” 颜色为白就完美解决:

/*脸颊*/
        
.cheek {
    position: absolute;
    top: 120px;
    background-color: #fd8373;
    border-radius: 100%;
}
.cheek::before {
    position: absolute;
    content: "/ / /";
    color: white;
    left: 23%;
    top: 13%;
}
.cheek-left {
    height: 40px;
    width: 80px;
    left: 190px;
}
.cheek-right {
    height: 40px;
    width: 60px;
    left: 380px;
}

接着嘴巴的样式跟太阳的一样,在这里只需要设置对应的渐变色一半为红色一半为粉红色即可:

.smile {
    position: absolute;
    width: 60px;
    height: 80px;
    background: linear-gradient( #fdc2a6 50%, #fa7768 50%);
    top: 120px;
    left: 300px;
    border: 4px black solid;
    border-top-left-radius: 8%;
    border-top-right-radius: 16%;
    border-bottom-left-radius: 80%;
    border-bottom-right-radius: 90%;
}

由于其本身太阳也是相同样式,所以背景色也应用到了太阳嘴巴之中,都是同一款嘴型。

2.2.3 粽子四肢

粽子的四肢制作那就更简单了,直接设置一个 div 留有边框,去掉其他边框之后使用 before 或者 after 做手掌或者脚掌部分就可以了:

此时我们给予样式,调整好位置即可:

/*四肢*/
.arm-left {
    position: absolute;
    height: 100px;
    width: 100px;
    border: 6px black solid;
    border-top: 0px;
    border-left: 0px;
    transform: rotate(45deg);
    left: 160px;
    top: 160px;
}
.arm-left::before {
    position: absolute;
    content: "";
    height: 50px;
    width: 30px;
    right: -15%;
    border-radius: 100%;
    background-color: black;
}
.arm-left::after {
    position: absolute;
    content: "";
    height: 20px;
    width: 10px;
    right: 8%;
    top: 15%;
    border-radius: 100%;
    background-color: black;
    transform: rotate(-45deg);
}
.arm-right {
    position: absolute;
    height: 130px;
    width: 100px;
    border-right: 6px black solid;
    left: 390px;
    top: -52px;
    transform: rotate(45deg);
}
.arm-right::before {
    position: absolute;
    content: "";
    height: 50px;
    width: 30px;
    right: -15%;
    border-radius: 100%;
    background-color: black;
}
.leg-left {
    position: absolute;
    height: 50px;
    width: 50px;
    border: 6px black solid;
    border-top: 0px;
    border-left: 0px;
    left: 160px;
    top: 435px;
}
.leg-left::before {
    position: absolute;
    content: "";
    height: 30px;
    width: 15px;
    left: -15%;
    bottom: -30px;
    border-radius: 100%;
    background-color: black;
}
.leg-right {
    position: absolute;
    height: 100px;
    width: 50px;
    border-right: 6px black solid;
    left: 250px;
    top: 463px;
}
.leg-right::before {
    position: absolute;
    content: "";
    height: 30px;
    width: 15px;
    right: -35%;
    bottom: -10px;
    border-radius: 100%;
    background-color: black;
    transform: rotate(-90deg);
}

四肢位置代码比较简单,就是给予不同的边框位置并且旋转即可,然后 before 和 after 就是一个圆嘛,拿上背景色放到合适位置就可以了。

粽子角色该部分 html 如下:

最后加上文字后效果如下:

由于文字部分其样式就是很基础了,在此没必要赘述了,在最后我祝各位考生 金榜高粽

最后在这里附加上所有代码:

完整代码:


    
    
    
    demo test
    
    

粽子

端午,祛毒平安

1_bit 没事写的《无用css技巧系列内容》
【星辰平台的版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。