700行无用纯 CSS 祝考生金榜高粽《1_bit 的无用 CSS 代码》_css 无用代码(2)

最新推荐文章于 2024-05-17 16:16:33 发布

2401_84164672

最新推荐文章于 2024-05-17 16:16:33 发布

阅读量397

点赞数 4

分类专栏：程序员文章标签： css 前端 css3

本文链接：https://blog.csdn.net/2401_84164672/article/details/138258353

版权

程序员专栏收录该内容

186 篇文章 1 订阅

订阅专栏

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

再调用即可：

<div class="sun-body">
    <div class="sun-eye eye-left"></div>
    <div class="sun-eye eye-right"></div>
    <div class="smile"></div>
    <div class="sunshine-top-left"></div>
    <div class="sunshine-top-right"></div>
    <div class="sunshine-bottom-left"></div>
    <div class="sunshine-bottom-right"></div>
</div>

在这里插入图片描述

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);
}

接着在代码中进行调用：

<div class="rice-dumplings">
    <div class="rice-dumplings-body">
        <div class="rice-dumplings-body-left-top"></div>
        <div class="rice-dumplings-body-right-top"></div>
        <div class="rice-dumplings-body-left-bottom"></div>
        <div class="rice-dumplings-body-right-bottom"></div>
    </div>
</div>

此时效果如下：

在这里插入图片描述

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 为亮点，创建一个基础样式后再创建左右样式进行调用就可以了：

<div class="rice-dumplings-face">
    <div class="rice-dumplings-eye eye-left">
        <div class="light postion"></div>
    </div>
    <div class="rice-dumplings-eye eye-right">
        <div class="light postion"></div>
    </div>
</div>

在这里插入图片描述

接着制作两个小脸蛋，也就是一个宽度大于高度的椭圆，设置其 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 如下：

<div class="rice-dumplings">
    <div class="rice-dumplings-body">
        <div class="rice-dumplings-body-left-top"></div>
        <div class="rice-dumplings-body-right-top"></div>
        <div class="rice-dumplings-body-left-bottom"></div>
        <div class="rice-dumplings-body-right-bottom"></div>
    </div>
    <div class="rice-dumplings-face">
        <div class="rice-dumplings-eye eye-left">
            <div class="light postion"></div>
        </div>
        <div class="rice-dumplings-eye eye-right">
            <div class="light postion"></div>
        </div>
        <div class="cheek cheek-left"></div>
        <div class="cheek cheek-right"></div>
        <div class="smile"></div>
    </div>
    <div class="limbs">
        <div class="arm-left"></div>
        <div class="arm-right"></div>
        <div class="leg-left"></div>
        <div class="leg-right"></div>
    </div>
</div>

三、所有内容

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

在这里插入图片描述

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

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

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo test</title>
    <style>
 body {
 height: 100vh;
 width: 100vw;
 }
 
 .demo-area {
 height: 400px;
 width: 1200px;
 position: relative;
 background-color: #8bb72b;
 overflow: hidden;
 }
 
 body {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 width: 100vw;
 }
 
 .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;
 }
 
 .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);
 }
 
 .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%;
 }
 
 .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%;
 }
 
 .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;
 }
 
 .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);
 }
 /\*太阳\*/
 
 .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>.eye-left {
 top: 60px;
 left: 70px;
 }
 
 .sun-body>.eye-right {
 top: 50px;
 left: 40px;
 }
 
 .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;
 }
 
 .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;


![img](https://img-blog.csdnimg.cn/img_convert/20de98675eee38e37ad8971a457effb1.png)
![img](https://img-blog.csdnimg.cn/img_convert/b0d18b46db9285fface4e49ac94792ed.png)
![img](https://img-blog.csdnimg.cn/img_convert/913a4b0ce11564ccc3f6afe7d4139ded.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

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


[外链图片转存中...(img-UdOa9vYX-1714224330820)]
[外链图片转存中...(img-NvOz4zlB-1714224330820)]
[外链图片转存中...(img-5Q3Yq80N-1714224330821)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**