当前位置: 首页 > news >正文

用css画一个csdn程序猿

效果如下:
在这里插入图片描述

头部

我们先来拆解一下,程序猿的结构
在这里插入图片描述
两只耳朵和头是圆形组成的,耳朵内的红色部分也是圆形
先画头部,利用圆角实现头部形状
借助工具来快速实现圆角效果

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

在这里插入图片描述

<div class="head"></div>
.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>
.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程序猿

效果如下&#xff1a; 头部 我们先来拆解一下&#xff0c;程序猿的结构 两只耳朵和头是圆形组成的&#xff0c;耳朵内的红色部分也是圆形 先画头部&#xff0c;利用圆角实现头部形状 借助工具来快速实现圆角效果 https://9elements.github.io/fancy-border-radius/ <div…...

Java多线程编程—wait/notify机制

文章目录1. 不使用wait/notify机制通信的缺点2. 什么是wait/notify机制3. wait/notify机制原理4. wait/notify方法的基本用法5. 线程状态的切换6. interrupt()遇到方法wait()7. notify/notifyAll方法8. wait(long)介绍9. 生产者/消费者模式10. 管道机制11. 利用wait/notify实现…...

Three.js教程:旋转动画、requestAnimationFrame周期性渲染

推荐&#xff1a;将NSDT场景编辑器加入你3D工具链其他工具系列&#xff1a;NSDT简石数字孪生基于WebGL技术开发在线游戏、商品展示、室内漫游往往都会涉及到动画&#xff0c;初步了解three.js可以做什么&#xff0c;深入讲解three.js动画之前&#xff0c;本节课先制作一个简单的…...

租车自驾app开发有什么作用?租车便利出行APP开发

在线租车APP有哪些优势&#xff0c;租车APP开发的基本功能&#xff0c;租车自驾app开发有什么作用?租车便利出行APP开发&#xff0c;租车服务平台小程序有哪些功能&#xff0c;租车软件开发需要多少钱&#xff0c;租车app都有哪些&#xff0c;租车平台定制开发&#xff0c;租车…...

linux shell 文件分割

split 按照 10m 大小进行分割 split -b 10m large_file.bin new_file_prefix...

智慧农业系统开发功能有哪些?

农业从古至今都是备受关注的话题&#xff0c;新时代背景下农业发展已经融合了互联网&#xff0c;数字化技术等新型发展方式&#xff0c;形成了农业物联网管控系统&#xff0c;让农业生产更加科技化、智能化、高效化&#xff0c;对农业可持续发展有巨大的推动作用。所以&#xf…...

【C语言】 指针的进阶 看这一篇就够了

目录 1.字符指针 2.数组指针 3.指针数组 4.数组传参和指针传参 5.函数指针 6.函数指针数组 7.指向函数指针数组的指针 8.回调函数 9.qsort排序和冒泡排序 1.字符指针 让我们一起来回顾一下指针的概念&#xff01; 1.指针就是一个变量&#xff0c;用来存放地址&#xff0c;地址…...

redis set list

Listlist: 插入命令&#xff1a;lpush / rpush 查看list列表所有数据(-1 表示最后一个)&#xff1a;lrange key 0 -1 查看列表长度(key 不存在则长度返回0 ): llen key list长度 获取下表 为 0 的元素 修改下标为0的元素&#xff0c;改为haha 移除列表的第一个元素 或最后一…...

如何解决DNS劫持

随着互联网的不断发展&#xff0c;DNS(域名系统)成为了构建网络基础的重要组成部分。而DNS遭到劫持&#xff0c;成为一种常见的安全问题。那么DNS遭到劫持是什么意思呢?如何解决DNS劫持问题呢?下面就让小编来为您一一解答。 DNS遭到劫持是什么意思? DNS遭到劫持指的是黑客通…...

【LeetCode】剑指 Offer(28)

目录 题目&#xff1a;剑指 Offer 54. 二叉搜索树的第k大节点 - 力扣&#xff08;Leetcode&#xff09; 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 题目&#xff1a;剑指 Offer 55 - I. 二叉树的深度 - 力…...

「ML 实践篇」模型训练

在训练不同机器学习算法模型时&#xff0c;遇到的各类训练算法大多对用户都是一个黑匣子&#xff0c;而理解它们实际怎么工作&#xff0c;对用户是很有帮助的&#xff1b; 快速定位到合适的模型与正确的训练算法&#xff0c;找到一套适当的超参数等&#xff1b;更高效的执行错…...

域名解析协议-DNS

DNS&#xff08;Domain Name System&#xff09;是互联网上非常重要的一项服务&#xff0c;我们每天上网都要依靠大量的DNS服务。在Internet上&#xff0c;用户更容易记住的是域名&#xff0c;但是网络中的计算机的互相访问是通过 IP 地址实现的。DNS 最常用的功能是给用户提供…...

分享:包括 AI 绘画在内的超齐全免费可用的API 大全

AI 绘画已经火出圈了&#xff0c;你还不知道哪里可以用嘛&#xff1f;我给大家整理了超级齐全的免费可用 API&#xff0c;包括 AI 绘画在内&#xff0c;有需要的小伙伴赶紧收藏了。 AI 绘画/AI 作画 类 AI 绘画&#xff1a;通过AI 生成图片&#xff0c;包括图生文、文生图等。…...

虹科新闻 | 虹科与Overland-Tandberg正式建立合作伙伴关系

虹科Overland-Tandberg 近日&#xff0c;虹科与美国Overland-Tandberg公司达成战略合作&#xff0c;虹科正式成为Overland-Tandberg公司在中国区域的认证授权代理商。未来&#xff0c;虹科将携手Overland-Tandberg&#xff0c;共同致力于提供企业数据管理和保护解决方案。 虹科…...

架构设计三原则

作为程序员&#xff0c;很多人都希望成为一名架构师&#xff0c;但并非简单地通过编程技能就能够达成这一目标。事实上&#xff0c;优秀的程序员和架构师之间存在一个明显的鸿沟——不确定性。 编程的本质是确定性的&#xff0c;也就是说&#xff0c;对于同一段代码&#xff0c…...

Android 性能优化——ANR监控与解决

作者&#xff1a;Drummor 1 哪来的ANR ANR(Application Not responding):如果 Android 应用的界面线程处于阻塞状态的时间过长&#xff0c;会触发“应用无响应”(ANR) 错误。如果应用位于前台&#xff0c;系统会向用户显示一个对话框。ANR 对话框会为用户提供强制退出应用的选项…...

Machine Learning-Ex3(吴恩达课后习题)Multi-class Classification and Neural Networks

目录 1. Multi-class Classification 1.1 Dataset 1.2 Visualizing the data 1.3 Vectorizing Logistic Regression 1.3.1 Vectorizing the cost function&#xff08;no regularization&#xff09; 1.3.2 Vectorizing the gradient&#xff08;no regularization&#…...

【Java】SpringBoot事务回滚规则

SpringBoot事务回滚规则SpringBoot事务回滚规则SpringBoot事务回滚规则 在SpringBoot中&#xff0c;如果一个方法被声明为Transactional&#xff0c;则会开启一个事务。如果这个方法中的任何一个步骤失败了&#xff08;比如抛出了异常&#xff09;&#xff0c;则该事务将会回滚…...

使用cocopod就那么容易

第一节、配置coopod 打开终端替换ruby镜像源&#xff0c;系统自带的镜像源(gem sources --remove https://rubygems.org/)被墙挡住了或者&#xff08;https://ruby.taobao.org/&#xff09;已过期。需替换成新的镜像源。 1&#xff09;.先查看已有的镜像是否是&#xff1a;ht…...

第14届蓝桥杯C++B组省赛

文章目录A. 日期统计B. 01 串的熵C. 冶炼金属D. 飞机降落E. 接龙数列F. 岛屿个数G. 子串简写H. 整数删除I. 景区导游J. 砍树今年比去年难好多 Update 2023.4.10 反转了&#xff0c;炼金二分没写错&#xff0c;可以AC了 Update 2023.4.9 rnm退钱&#xff0c;把简单的都放后面…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008&#xff1a;是version产品的大版本。 R006&#xff1a;是release产品特性版本。 C009&#xff1a;是通用版 B0014&#xff1a;是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存&#xff1a;1GB 以上 硬盘&#xf…...

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...