纯css3完成宠物小鸡案例编码

日期:2021-01-20 类型:科技新闻 

关键词:小游戏源代码,互动小游戏微信,自制小游戏,html5游戏,制作游戏大概多少钱

近期看了许多有关css3的专业知识和文章内容,感觉css3用起来很便捷,应用css3的话,在网页页面合理布局上能够省去许多无须要的编码。因此近期用css3仿写了我每日都照料的宠物小鸡的样子,第1次写,一些细节解决的不足好。

先看最后实际效果图:

接下来是我撰写的流程:

最先是html,各自写出云朵,小鸡的人体,鸡冠,双眼,嘴巴,腮红,翅膀,鸡爪

<body>
    <div class="content">
        <!-- 天空的云 -->
        <div class="cloud">
            <div class="content"></div>
        </div>
        <!--鸡冠-->
        <div class="crest"></div>
        <!--翅膀-->
        <div class="hand"></div>
        <!-- 宠物小鸡body -->
        <div class="egg">
            <!--双眼-->
            <div class="eye"></div>
            <!--腮红-->
            <div class="blush"></div>
            <!--嘴-->
            <div class="mouth"></div>
            <!--脚-->
            <div class="feet"></div>
        </div>

    </div>
</body>

接下来是css设定款式:

先设定总体的情况色,应用的是线形渐变色linear-gradient,设定蓝天白云色和草坪色,并设定让元素垂直居中。

.content {
        width: 100%;
        height: 800px;
        background: linear-gradient(rgb(170, 227, 253) 60%, rgb(149, 219, 126) 80px);
        display: flex;
        justify-content: center;
        align-items: center;
        }

天空的云:先给1定的宽高和情况色,应用border-radius设定边框圆角实际效果,只设定左上和右上。实际效果以下:

 border-radius: 100% 100% 0 0;

在应用::before和::after伪元素画出1朵详细的云:

.content::before,
 .content::after {
                content: '';
                position: absolute;
                bottom: 0;
            }
  .content::before {
                width: 40px;
                height: 40px;
                background: currentColor;
                left: ⑵0px;
                border-radius: 100% 100% 0 100%;
            }
   .content::after {
                width: 35px;
                height: 30px;
                background: currentColor;
                right: ⑵0px;
                border-radius: 100% 100% 100% 0;
            } 

随后应用黑影在画出两朵云

.content,
.content::before,
.content::after {
                box-shadow: 
                ⑵00px 50px 0 ⑸px rgb(191, 232, 252),
                 200px 60px 0 10px rgb(191, 233, 253);
            }

云朵完成了。

接下来是宠物小鸡,先把人体写出来,一样用border-radius设定边框圆角实际效果,画出鸡蛋的样子,设定情况色,并应用box-shadow设定向内的黑影。

.egg {
            width: 220px;
            height: 260px;
            border-radius: 100%;
            background: linear-gradient(rgb(254, 249, 249) 60%,rgb(221, 213, 213));
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 ⑴0px 10px 3px rgba(211, 194, 194,0.4) inset;
}

鸡冠和云朵的写法类似

.crest {
            position: relative;
            top: ⑴7%;
            width: 30px;
            height: 25px;
            background: rgb(233, 19, 19);
            border-radius: 50% 100% 20% 20%;
        }
  .crest::before,
  .crest::after {
            content: '';
            position: absolute;
            bottom: 0; 
            width: 20px; 
            background: rgb(233, 19, 19);
        }
  .crest::before {
            left: ⑸px;
            height: 20px;
            border-radius: 100% 50% 0 20%;
        }
  .crest::after {
            right: ⑴5px;
            height: 15px;
            background: rgb(233, 19, 19);
            border-radius: 20% 200% 20% 30%;
        }

双眼,翅膀,腮红,各自用伪元素上下精准定位设定尺寸便可完成。嘴部应用transform转动45°并应用线形渐变色设定鸡嘴的黑影实际效果。

所有css编码以下(我安裝了sass软件,因此是scss的写法):

body {
    margin: 0;
    width: 100%;
    height: 100%;
    >.content {
        width: 100%;
        height: 800px;
        background: linear-gradient(rgb(170, 227, 253) 60%, rgb(149, 219, 126) 80px);
        display: flex;
        justify-content: center;
        align-items: center;
        >.cloud {
            position: absolute;
            top: 5%;
            color: rgb(216, 242, 254);
            >.content {
                width: 50px;
                height: 50px;
                background: currentColor;
                border-radius: 100% 100% 0 0;
            }
            >.content::before,
            >.content::after {
                content: '';
                position: absolute;
                bottom: 0;
            }
            >.content::before {
                width: 40px;
                height: 40px;
                background: currentColor;
                left: ⑵0px;
                border-radius: 100% 100% 0 100%;
            }
            >.content::after {
                width: 35px;
                height: 30px;
                background: currentColor;
                right: ⑵0px;
                border-radius: 100% 100% 100% 0;
            } 
            >.content,
            .content::before,
            .content::after {
                box-shadow: ⑵00px 50px 0 ⑸px rgb(191, 232, 252),
                             200px 60px 0 10px rgb(191, 233, 253);
            }
        }
        >.egg {
            width: 220px;
            height: 260px;
            border-radius: 100%;
            background: linear-gradient(rgb(254, 249, 249) 60%,rgb(221, 213, 213));
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 ⑴0px 10px 3px rgba(211, 194, 194,0.4) inset;
            >.eye::before,
            .eye::after {
                content: '';
                position: absolute;
                top: 15%;
                width: 12px;
                height: 28px;
                border-radius: 100%;
                background: radial-gradient(white 1px, rgb(57, 56, 57) 5%);
            }
            > .eye::before{
                left: 28%;
            }
            >.eye::after {
                right: 28%;
            }
            >.blush::before,
            .blush::after {
                content: '';
                position: absolute;
                top: 30%;
                width: 25px; 
                height: 5px;
                transform: rotate(0deg); 
                background: rgb(250, 108, 127);
                border-radius: 100%;
                box-shadow: 0 0 5px 4px rgb(250, 108, 127);
            }
            >.blush::before {
                left: 20%;
            }
            >.blush::after {
                right: 20%;
            }
            >.mouth {
                position: absolute;
                top: 32%;
                width: 20px;
                height: 20px;
                background: 
                    linear-gradient(135deg, rgb(255, 207, 0) 50%, 
                    rgb(224, 184, 2) 50%);
                transform: rotate(45deg);
                border-radius: 5% 15%;
            }
            > .feet::before,
            .feet::after{
                content: '';
                position: absolute; 
                bottom: ⑴2px;
                width: 10px;
                height: 15px;
                border: 7px solid rgb(71, 49, 20);
            }
            > .feet::before{
                left: 60px;
                border-radius: 80% 100% 100% 50%;
                transform: rotate(⑴0deg);
                border-color: transparent  transparent transparent rgb(71, 49, 20);
            }
            > .feet::after{
                right: 60px;
                border-radius: 100% 80% 50% 0%;
                transform: rotate(10deg);
                border-color: transparent rgb(71, 49, 20) transparent transparent ;
            } 
        }
        >.crest {
            position: relative;
            top: ⑴7%;
            width: 30px;
            height: 25px;
            background: rgb(233, 19, 19);
            border-radius: 50% 100% 20% 20%;
        }
        >.crest::before,
        .crest::after {
            content: '';
            position: absolute;
            bottom: 0; 
            width: 20px; 
            background: rgb(233, 19, 19);
        }
        >.crest::before {
            left: ⑸px;
            height: 20px;
            border-radius: 100% 50% 0 20%;
        }
        >.crest::after {
            right: ⑴5px;
            height: 15px;
            background: rgb(233, 19, 19);
            border-radius: 20% 200% 20% 30%;
        }
        > .hand{
            position: relative;
            top: ⑸%;
        }
        > .hand::before,
        .hand::after{
            content: '';
            position: absolute;
        }
        > .hand::before{
            left:⑴35px;
            width: 20px;
            height: 80px;
            transform: rotate(15deg);
            background: rgb(250, 242, 242);
            border-radius: 100% 0 50% 50%;
        }
        > .hand::after{
            right: ⑴10px;
            width: 20px;
            height: 80px;
            transform: rotate(⑴5deg);
            background: rgb(250,242,242);
            border-radius: 50% 100% 50% 50%;
        }
    }
}

总结

以上所述是网编给大伙儿详细介绍的纯css3完成宠物小鸡案例编码,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

上一篇:css中grid特性的应用详解 返回下一篇:没有了