CSS特效之丑蘑菇

2022-11-30 98

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： CSS特效之丑蘑菇

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

上图看效果

图如其名，接下来我讲解排版思路

实现思路

蘑菇分为头部,根部，俩大部分，头部还有一些不规则形状的蘑菇点

头部通过盒子先花一个半圆，然后通过伪元素的方式定位到头部盒子的最底部，实现头部的效果

根部就很简单了，这里就不说了

小圆点通过定位的方式实现不同位置的排列，其中还通过CSS的扭曲属性实现不规则的小圆点

transform: skew(0deg, 10deg);

页面结构

<!-- 大盒子 -->
    <div class="mushroom_box">
        <!-- 蘑菇头 -->
        <div class="mushroom_top">
            <!-- 不规则小圆点 -->
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
        <!-- 蘑菇根部 -->
        <div class="mushroom_bottom"></div>
    </div>

先给大盒子排好基本布局样式免得最后样式错乱，大盒子采用flex布局的方式设置Y轴为主轴侧轴居中，实现盒子里面的子元素居中排列

/* 大盒子 */
        .mushroom_box {
            position: relative;
            box-sizing: border-box;
            width: 750px;
            padding-top: 20px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

蘑菇头部

首先先画出来一个半圆

/* 蘑菇头 */
         .mushroom_top {
            position: relative;
            width: 400px;
            height: 200px;
            background: #FE876F;
            border-top-left-radius: 200px;
            border-top-right-radius: 200px;
        }

画出半圆后在通过伪元素的方式完成蘑菇头的基本样式，伪元素这里要采用定位的方式把他定位到半圆的底部，这样就实现了一个头部的基本轮廓

.mushroom_top::after {
            content: '';
            position: absolute;
            top: 100%;
            width: 400px;
            height: 100px;
            border-bottom-left-radius: 200px;
            border-bottom-right-radius: 200px;
            background: #FE876F;
        }

头部完成后，需要在给上边框，这样才能实现一个初步的效果，伪元素也需要给边框，整个头部都需要有边框，伪元素有了边框之后会和头部的盒子对不起，这是因为伪元素是基准头部盒子的content部分进行定位的，但是边框不在content部分，这个时候需要给通过定位的left属性减去边框的宽度就可以实现对齐的效果了

/* 蘑菇头 */
        .mushroom_top {
            border: 4px solid #000;
        }
        .mushroom_top::after {
            content: '';
            position: absolute;
            top: 100%;
            left: -4px;
            border: 4px solid #000;
            border-top: none;
        }

蘑菇头根部

蘑菇头根部比较简单，给宽高和边框就好了，最后在通过边框圆角的方式实现一个圆底

/* 蘑菇根部 */ 
        .mushroom_bottom {
            width: 120px;
            height: 300px;
            background: #FFF6E5;
            border: 4px solid #000;
            border-top-left-radius: 150px;
            border-top-right-radius: 150px;
            border-bottom-left-radius: 100px;
            border-bottom-right-radius: 100px;
        }

不规则蘑菇圆点

不规则蘑菇圆底，通过给蘑菇头里面的标签定位的方式结合css序选择器实现圆点的大小和不同位置的排列，在通过css3的skew扭曲属性实现不规则的圆点大小

/* 蘑菇小黄点 */
        .mushroom_top>i {
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #FFF9D6;
            border: 3px solid #000;
            top: 20%;
            left: 40%;
        }
        .mushroom_top>i:nth-child(2) {
            top: 30%;
            left: 20%;
            width: 40px;
            height: 50px;
            transform: skew(30deg, 20deg);
        }
        .mushroom_top>i:nth-child(3) {
            top: 70%;
            left: 60%;
            width: 70px;
            height: 70px;
            z-index: 8;
        }
        .mushroom_top>i:nth-child(4) {
            top: 70%;
            left: 20%;
            width: 90px;
            height: 90px;
            transform: skew(0deg, 10deg);
            z-index: 8;
        }
        .mushroom_top>i:nth-child(5) {
            top: 15%;
            left: 60%;
            width: 90px;
            height: 90px;
            z-index: 8;
        }