AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

用css画一个csdn程序猿

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

效果如下：

头部

我们先来拆解一下，程序猿的结构

两只耳朵和头是圆形组成的，耳朵内的红色部分也是圆形

先画头部，利用圆角实现头部形状

借助工具来快速实现圆角效果

https://9elements.github.io/fancy-border-radius/

<div class="head"></div>
• 1
.head{
    width: 300px;
    height: 300px;
    background: #81312a;
    border-radius: 50% 50% 50% 50% / 40% 40% 40% 40% ;  /* 实现头部形状 */
    margin: 0 auto;
    margin-top: 50px;
    position: relative;
}

耳朵部分

两只耳朵以头部为定位基准，居中并且向反方向偏移自身大小的一半，耳朵中心的红色部分利用伪元素实现。

由于左耳和右耳是一样的结构，大小也是一样的，所以我们可以公用一套样式结构，再此基础上分别定义他们的定位位置即可

<div class="left-ear"></div>
<div class="right-ear"></div
.left-ear,.right-ear{
    width: 100px;
    height: 100px;
    background: #f7ba8b;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    z-index: -1;
    transform: translateY(-50%);
      &::before{
           content: '';
           width: 50%;
           height: 50%;
           background: #eb6e6e;
           position: absolute;
           border-radius: 50%;
           top: 50%;
           left: 50%;
           transform: translate(-50%,-50%);
      }
}
.left-ear{
    left: -50px;
}
.right-ear{
    right:-50px;
}

眼睛部分

我们再来实现程序猿的眼睛部分，眼睛部分也是两个圆形组成，大圆形做底色，也就是脸部

<div class="eyes-box">
     <div class="eyes-left-background"></div>
</div>
.eyes-box{
    width: calc(100% - 8px);
    height: 160px;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 55px;
    z-index: 10;
    .eyes-left-background{
        width: 156px;
        height: 156px;
        border-radius: 50%;
        background: #f7ba8b;
        position: absolute;
        top: 0;
        left: 0;
        transform: scale(1);
    }
}

仔细观察，你会发现眼镜的部分其实是圆形的嵌套，一层套一层的圆形，只需要处理好圆形的位置即可。

<div class="eyes-box">
     <div class="eyes-left-background">
          <div class="left-orbit">
               <div class="left-eyeball"></div>
           </div>
     </div>
</div>
.eyes-box{
    width: calc(100% - 8px);
    height: 160px;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 55px;
    z-index: 10;
    .eyes-left-background{
        width: 156px;
        height: 156px;
        border-radius: 50%;
        background: #f7ba8b;
        position: absolute;
        top: 0;
        left: 0;
        transform: scale(1);
        .left-orbit{
             width: 70%;
             height: 70%;
             border-radius: 50%;
             border: 5px solid #542114;
             bottom: 10px;
             position: absolute;
             left: 10%;
             transform: scale(1);
             background: #ce8662;
             z-index: 10;
                .left-eyeball{
                    width: 60%;
                    height: 60%;
                    border: 3px solid #542114;
                    border-radius: 50%;
                    margin: 10px 0px 0px 10px;
                    background: #7c3e37;
                    transform: scale(1);
                    &::before{
                        content: '';
                        width: 60%;
                        height: 60%;
                        background: #542418;
                        position: absolute;
                        top: 0;
                        border-radius: 50%;
                        left: 5px;
                    }
                    &::after{
                        content: '';
                        width: 20%;
                        height: 20%;
                        background: #fff;
                        position: absolute;
                        top: 4px;
                        border-radius: 50%;
                        left: 12px;
                    }
              }
         }
     }
}

左右的眼睛是一样的，左眼写好了后直接复制，将定位的位置改一下即可

<div class="eyes-box">
     <div class="eyes-left-background">
          <div class="left-orbit">
               <div class="left-eyeball"></div>
           </div>
      </div>
      <div class="link-eyse"></div>   <!-- 眼镜架 -->
      <div class="eyes-right-background">
           <div class="right-orbit">
                <div class="right-eyeball"></div>
           </div>
      </div>
</div>
.eyes-box{
        width: calc(100% - 8px);
        height: 160px;
        margin: 0 auto;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 55px;
        z-index: 10;
        .eyes-left-background,.eyes-right-background{
            width: 156px;
            height: 156px;
            border-radius: 50%;
            background: #f7ba8b;
            position: absolute;
            top: 0;
            transform: scale(1);
            .left-orbit,.right-orbit{
                width: 70%;
                height: 70%;
                border-radius: 50%;
                border: 5px solid #542114;
                bottom: 10px;
                position: absolute;
                transform: scale(1);
                background: #ce8662;
                z-index: 10;
                .left-eyeball,.right-eyeball{
                    width: 60%;
                    height: 60%;
                    border: 3px solid #542114;
                    border-radius: 50%;
                    margin: 10px 0px 0px 10px;
                    background: #7c3e37;
                    transform: scale(1);
                    &::before{
                        content: '';
                        width: 60%;
                        height: 60%;
                        background: #542418;
                        position: absolute;
                        top: 0;
                        border-radius: 50%;
                        left: 5px;
                    }
                    &::after{
                        content: '';
                        width: 20%;
                        height: 20%;
                        background: #fff;
                        position: absolute;
                        top: 4px;
                        border-radius: 50%;
                        left: 12px;
                    }
                }
            }
            /* 分别对左右的眼睛进行微调 */
            .left-orbit{
                left: 10%;
            }
            .right-orbit{
                right: 10%;
            }
        }
        /* 分别对左右的眼睛进行微调 */
        .eyes-left-background{
            left:0
        }
        .eyes-right-background{
            right:0
        }
        /* 绘制眼镜架 */
        .link-eyse{
            width: 28px;
            height: 4px;
            background: #542114;
            position: absolute;
            left: 50%;
            top: 54%;
            transform: translate(-50%);
            z-index: 10;
        }
}

眼睛的位置处理完后，再处理嘴巴的位置

嘴巴部分

嘴巴其实也是圆形和椭圆的组合

这里用一个标签实现程序猿的嘴巴部分

先利用圆角实现嘴巴

<div class="mouth"></div>
• 1
.mouth{
   width: 170px;
   height: 128px;
   position: absolute;
   bottom: -2px;
   left: 50%;
   transform: translateX(-50%);
   border-radius: 35% 35% 35% 35% / 50% 50% 50% 50% ;  /* 实现嘴巴的形状 */
   background: #f7ba8b;
   border: 3px solid #81312a;
}

然后利用伪元素实现鼻子和嘴唇，鼻子的位置利用box-shadow绘制多个阴影实现鼻孔的效果

对于box-shadow不理解的小伙伴请看这篇：box-shadow说明

.mouth::before{
        content: '';
        width: 15px;
        height: 15px;
        border-radius: 50%;
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        box-shadow: -15px 0px 0px 0px #81312a,15px 0px 0px 0px #81312a; /* 绘制鼻孔 */
}

嘴巴部分利用伪元素配合圆角，绘制一个椭圆

伪元素说明文档 （👈点击直达）

.mouth::after{
        content: '';
        width: 30px;
        height: 12px;
        border-radius: 50%;
        background: #eb6e6e;
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
}

程序猿的头部到这里就大致完成了，我们看下效果

最后再处理一下头发部分，这里的头发用的是svg标签，头发的父级就是最外层的头部标签，将头发居中，然后定位到头部的上方即可

svg说明文档（👈点击直达）

<div class="head">
    <!-- 头发 -->
  <svg class="hair">
       <path class="st0" d="M0,100c0,0,24-18,50-18s50,18,50,18H0z"/>
       <path class="st0" d="M9,96L9,96c9.77-22.79,26.25-42.07,47.24-55.26L59,39l-3.87,11.29C49.95,65.4,51.35,81.98,59,96l0,0H9z"/>
       <path class="st0" d="M45.89,91L45.89,91c6.68-15.59,17.96-28.78,32.32-37.81L80.11,52l-2.65,7.73C73.91,70.06,74.87,81.41,80.11,91 l0,0H45.89z"/>
  </svg>
</div>
.hair{
    position: absolute;
    top: -85px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    .st0{fill:#81312A;width: 100%;}
}

到这里我们的csdn程序猿就完成了，最后再看一下官方原图：

总结

1、利用圆角实现不规则原型

2、重复的元素可以公用css样式，节省代码

3、利用z-index来实现层级关系

4、box-shadow实现多个同元素复制

5、复杂图形可以用svg实现

案例源码：https://gitee.com/wang_fan_w/css-diary

如果觉得这篇文章对你有帮助，欢迎点赞、收藏、转发哦~

文章标签：
前端开发
程序员
关键词：
CSS csdn
DCodes
目录
相关文章
傲海
|
Web App开发 前端开发 关系型数据库
python+flask+html/css+mysql+BAE 打造CSDN简历自动生成系统（附网站完全源码）
1.背景        一直想自己动手写个web app玩玩，前几天看了一个github的resume自动生成的web-app，所以就动手仿造了一个csdn的简历生成器。结构很简单，前端是html/css文件（这个模仿了github的那个网页，因为博主不太懂前端）。后台是一个爬虫软件，可以把csdn的个人信息爬下来，然后显示出来，最后部署到了百度云。百度的云数据库，真是坑爹.......，我
傲海
2111 0
二二*一一
|
9天前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
30 1
游客fz577umxdejsg
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
游客fz577umxdejsg
73 2
游客fz577umxdejsg
|
3月前
HTML+CSS 实现通用的企业官网页面（记得收藏）
HTML+CSS 实现通用的企业官网页面（记得收藏）
游客fz577umxdejsg
78 2
aliyun8599273441-30642
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站：从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代，拥有一个个人博客不仅是展示自我的平台，也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建，涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章，你将学会如何从零开始构建自己的网络空间，并在互联网世界留下你的足迹。
aliyun8599273441-30642
255 65
疯狂的猿
|
20天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码，带歌词显示。包括支持单曲循环，歌词显示，歌曲搜索，音量控制，列表循环等功能。利用json获取音乐歌单和歌词，基于html5 audio属性手机音乐播放器代码。
疯狂的猿
72 6
游客moiomvrp3vyac2
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站：从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代，拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识，一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解，这篇文章都将是你的理想指南。我们将探索基本概念，实现页面布局，并点缀以个性化样式，最终将静态页面转变为动态交互式网站。准备好了吗？让我们开始吧！
游客moiomvrp3vyac2
106 4
程序员皮皮林
|
2月前
|
前端开发 数据安全/隐私保护 容器
HTML+CSS 水滴登录页
该代码实现了一个创意的水滴登录页面，包含一个水滴形状的登录框与两个按钮（忘记密码和注册）。登录框包括用户名、密码输入框及登录按钮。页面设计独特，采用渐变色与动态效果，增强了交互性和视觉美感。以下为关键实现步骤： - 重置默认样式。 - 设置页面背景颜色和尺寸。 - 定义登录表单容器的布局、位置和尺寸。 - 设置登录表单内容样式，包括3D效果和过渡动画。 - 创建伪元素增强水滴效果。 - 设定输入框容器和输入框样式。 - 为提交按钮、忘记密码和注册按钮设定特定样式，并添加悬停效果。
程序员皮皮林
31 1
游客zi3qmblbcdexu
|
2月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3（HTML--网页标签 下）
HTML/CSS/JS学习笔记 Day3（HTML--网页标签 下）
游客zi3qmblbcdexu
75 9
游客fz577umxdejsg
|
3月前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果？3分钟学会，炫酷到爆！
HTML+CSS如何打造撒花动画效果？3分钟学会，炫酷到爆！
游客fz577umxdejsg
206 2