位置: IT常识 - 正文

用css画一个csdn程序猿(用css画一个扇形)

编辑:rootadmin
用css画一个csdn程序猿

推荐整理分享用css画一个csdn程序猿(用css画一个扇形),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:用css画一个低音喇叭,用css画一个右边三角形,用css画一个等边三角形,用css画一个扇形,用css画一个等边三角形,用css画一个房子,用css画一个低音喇叭,用css画一个等边三角形,内容如对您有帮助,希望把文章链接给更多的朋友!

效果如下:

头部

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

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); }}用css画一个csdn程序猿(用css画一个扇形)

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

<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

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

本文链接地址:https://www.jiuchutong.com/zhishi/300574.html 转载请保留说明!

上一篇:人工智能介绍(人工智能介绍200字)

下一篇:Pytorch实现EdgeCNN(基于PyTorch实现)(pytorch中embedding)

  • 华为p40付款没有面容吗(华为手机为什么没有支付管理)

    华为p40付款没有面容吗(华为手机为什么没有支付管理)

  • 无线耳机盒子上的按钮有啥用(无线耳机盒子上的按键是什么意思)

    无线耳机盒子上的按钮有啥用(无线耳机盒子上的按键是什么意思)

  • win7电脑能进入安全模式,但是进不了系统(win7怎么进入)

    win7电脑能进入安全模式,但是进不了系统(win7怎么进入)

  • 怎么把苹果xr底部变透明(苹果xr怎么设置黑色底屏)

    怎么把苹果xr底部变透明(苹果xr怎么设置黑色底屏)

  • 路由器在哪里买(路由器在哪里买实体店)

    路由器在哪里买(路由器在哪里买实体店)

  • 共享充电宝要原地还吗(共享充电宝要原件吗)

    共享充电宝要原地还吗(共享充电宝要原件吗)

  • 转转平台介入商家会退款吗(转转平台介入商家能得到货款吗?)

    转转平台介入商家会退款吗(转转平台介入商家能得到货款吗?)

  • 1660ti和1650ti差多少(1660ti和1650ti区别大吗)

    1660ti和1650ti差多少(1660ti和1650ti区别大吗)

  • cpu频率多少才算好(cpu频率多少才算高频)

    cpu频率多少才算好(cpu频率多少才算高频)

  • 华为用什么芯片(华为p60用的是什么芯片)

    华为用什么芯片(华为p60用的是什么芯片)

  • 屏幕摔了没碎但是黑屏(屏幕摔了没碎但是黑屏修多少钱)

    屏幕摔了没碎但是黑屏(屏幕摔了没碎但是黑屏修多少钱)

  • 微信被打标有什么影响吗(微信被打标的后果是什么)

    微信被打标有什么影响吗(微信被打标的后果是什么)

  • 支付宝盒子红灯一直闪怎么回事(支付宝盒子红灯闪是什么意思)

    支付宝盒子红灯一直闪怎么回事(支付宝盒子红灯闪是什么意思)

  • 电视大会员和大会员有区别吗

    电视大会员和大会员有区别吗

  • 手机dc调光有什么好处(手机dc调光有什么用)

    手机dc调光有什么好处(手机dc调光有什么用)

  • 淘宝积分在哪里兑换(淘宝积分在哪里领取)

    淘宝积分在哪里兑换(淘宝积分在哪里领取)

  • 微信语音通话能回放吗(微信语音通话能录音吗怎么设置)

    微信语音通话能回放吗(微信语音通话能录音吗怎么设置)

  • word文档电脑怎么下载(word文档电脑怎么新建)

    word文档电脑怎么下载(word文档电脑怎么新建)

  • 为什么饿了么显示账户异常(为什么饿了么显示超出范围)

    为什么饿了么显示账户异常(为什么饿了么显示超出范围)

  • 苹果x报错53是哪坏了(苹果x报错53是哪里坏了)

    苹果x报错53是哪坏了(苹果x报错53是哪里坏了)

  • 手机qq怎么改群成员名片(手机QQ怎么改群备注)

    手机qq怎么改群成员名片(手机QQ怎么改群备注)

  • netbean怎么用(netbeans怎么用)

    netbean怎么用(netbeans怎么用)

  • pr视频剪辑吃显卡吗(pr视频剪辑吃显卡还是cpu)

    pr视频剪辑吃显卡吗(pr视频剪辑吃显卡还是cpu)

  • xsmax亮度自动调节失灵(xsmax自动亮度调节太暗)

    xsmax亮度自动调节失灵(xsmax自动亮度调节太暗)

  • word中部两端怎么对齐(word2010中部两端对齐)

    word中部两端怎么对齐(word2010中部两端对齐)

  • 微信转账记录腾讯保存多久(微信转账记录腾讯数据库会保存多久)

    微信转账记录腾讯保存多久(微信转账记录腾讯数据库会保存多久)

  • 安卓迅雷下载的文件在哪个文件夹(安卓迅雷下载的文件怎么看)

    安卓迅雷下载的文件在哪个文件夹(安卓迅雷下载的文件怎么看)

  • iphonesir在哪里设置(iphonesiri怎么设置)

    iphonesir在哪里设置(iphonesiri怎么设置)

  • 申报个税后发生扣工资
  • 自然人电子税务局
  • 航天信息开票软件
  • 销售额是含税价还是不含税价
  • 怎么证明自己是建档立卡贫困户
  • 汽车销售和租赁哪个大
  • 管理费用中的税金包括哪些
  • 年底对账
  • 企业股东分红可以不按比例分吗
  • 年度纳税总额的时间怎么计算
  • 小规模纳税人建筑工程增值税税率
  • 社保公积金计提是本月计提下月
  • 个税系统添加不了新的单位
  • 私对公转账可以撤回吗
  • 招标文件费属于哪类税收编码
  • 技术服务费属于现代服务吗
  • 行政事业单位拨入经费
  • 境外支付佣金如何开发票
  • 收到发票,未付款,付款的时候需要把发票复印做附件吗
  • 个税申报状态失败
  • 税费五个点怎么算
  • 购入需要安装的固定资产会计科目
  • 中小企业划分标准
  • 递延所得税怎么产生
  • 计算内含报酬率所使用的年金现值系数
  • 佣金可以开票吗
  • 鸿蒙系统控制中心
  • 任务管理器网络占用率100%怎么办
  • 出租的设备
  • 产品作为样品账务处理
  • 哪些资产类科目增加记贷方
  • php proc_open
  • 进货发票怎么抵税
  • 二级路由器怎么配置
  • 琼斯的大海怪
  • 未交土地出让金的处罚
  • 微信小店的入口在哪里
  • node教程
  • lincom命令
  • windows刻录cd
  • 企业送的购物卡怎么退回去
  • python分割语句
  • 保险费计入固定资产原值吗
  • mongodb与mysql相比的优缺点
  • 财政拨款结转和财政拨款结余以前年度盈余调整
  • 甲公司购入一台不需要安装
  • 会计人员信息采集怎么填
  • 故障的机器修好多少钱
  • 开的票比实际支付的多,账务怎么处理
  • 销售额大于营业收入吗
  • 结汇时和月底结转汇兑损益
  • 转出未交增值税和未交增值税区别
  • 其他人挂靠公司交社保会计处理怎么做?
  • 增值税欠税及滞纳金计算
  • 被工商吊销营业执照怎么办
  • 融资开票是什么意思
  • 主营业务成本如何做分录
  • 出纳 记账凭证
  • 文本文本
  • linux系统基础教程
  • 毕竟近义词语
  • linux端口流量监控
  • win7怎么设置工作组共享
  • Cocos2dx3.2 CrazyTetris 单线裁剪 对于判断消除的思考(一)
  • csshtml经典案例
  • html怎么用javascript
  • nodejs mysql orm
  • vue自定义组件v-html
  • shell bash sh
  • js用于
  • js格式化时间戳
  • 税基式减免,税率式减免,税额式减免三者之间的联系
  • 如何查询企业出资时间
  • 浙江发票查验不了什么原因
  • 进口商品的消费税计入成本吗
  • 重庆税务电子税登录
  • 丰台和朝阳中间是哪里
  • 在山东省一个月水费大概多少
  • 马来西亚进口货物的标签要求
  • 日本各界
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设