html+css 实现 熊猫样式
效果
html代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><style>* {box-sizing: border-box;}.ice {width: 198px;margin: 30px auto;position: relative;}.main-body {width: 198px;height: 232px;background: #fff;border: 2px solid #333;border-radius: 47% 47% 47% 47%/50%;}.ear {width: 37px;height: 37px;background: #000;border-radius: 50%;position: absolute;left: 18px;top: 6px;z-index: -1;}.ear.right {left: unset;right: 18px;}.arm-left {width: 71px;height: 31px;background: #000;border-radius: 50%;position: absolute;left: -22%;top: 54%;z-index: -1;transform: rotate(302deg);}.arm-right {width: 71px;height: 31px;background: #000;border-radius: 50%;position: absolute;right: -23%;top: 28%;z-index: -1;transform: rotate(300deg);}.hand-left {width: 27px;height: 30px;background: #000;border-radius: 50%;position: absolute;left: -16%;top: 63%;z-index: -1;}.hand-right {width: 30px;height: 28px;background: #000;border-radius: 50%;position: absolute;right: -17%;top: 19%;z-index: -1;}.heart {position: relative;transform: scale(0.045, 0.045) rotate(61deg);left: 123px;top: 53px;}.div1 {position: fixed;top: -26px;left: 100px;height: 0px;width: 0px;border: 100px solid #e51b1b;border-radius: 100px;}.div2 {position: fixed;top: 100px;left: -26px;height: 0px;width: 0px;border: 100px solid #e51b1b;border-radius: 100px;}.div3 {position: fixed;top: 100px;left: 100px;height: 0px;width: 0px;border: 100px solid #e51b1b;}.leg {width: 48px;height: 78px;background: #000;border-radius: 32%/55%;position: absolute;left: 19%;bottom: -9%;z-index: -1;}.foot {width: 37px;height: 15px;background: #000;border-radius: 50%;position: absolute;left: 23%;top: 104%;z-index: -1;}.leg.right {left: unset;right: 19%;bottom: -9%;}.foot.right {left: unset;right: 23%;top: 104%;}.face {width: 74%;height: 120px;margin: 24px auto;position: relative;border: 1px solid #125af5;border-radius: 50% 50% 38% 38%;box-shadow: 0 0 0 0.5px #ffffff, 0 0 0 1.2px black, 0 0 0 2.1px #ffffff, 0 0 0 3px rgb(47 245 47), 0 0 0 4px #ffffff, 0 0 0 5px yellow, 0 0 0 6px #ffffff, 0 0 0 6.8px red, 0 0 0 7.6px #ffffff, 0 0 0 8.4px pink, 0 0 0 9.2px #ffffff, 0 0 0 9.9px #9e02f8;}.face-circle {width: 72%;height: 122px;margin: 25px 26px auto;position: absolute;border: 1px solid black;border-radius: 50% 50% 57% 58%;z-index: 1;opacity: 0.5;box-shadow: 0 0 0 0.5px #ffffff, 0 0 0 1.2px rgb(22 134 226), 0 0 0 2.1px #ffffff, 0 0 0 3px rgb(243 13 128), 0 0 0 4px #ffffff, 0 0 0 5px rgb(245 135 32), 0 0 0 6px #ffffff, 0 0 0 6.8px rgb(167 22 235), 0 0 0 7.6px #ffffff, 0 0 0 8.4px rgb(71 250 167), 0 0 0 9.2px #ffffff, 0 0 0 9.9px #fddc47;}.blackeye {width: 41px;height: 64px;background: #000;top: 18%;left: 8%;border-radius: 46% 49% 47% 50%;position: absolute;transform: rotate(44deg);}.blackeye.right {left: unset;right: 8%;border-radius: 49% 46% 50% 47%;transform: rotate(-44deg);}.eye {width: 22px;height: 24px;background: #000;border-radius: 50%;border: 2px solid #fff;position: relative;transform: rotate(-45deg);top: 13px;left: 13px;}.eye1 {width: 7px;height: 8px;position: relative;border-radius: 50% 50% 50% 50%;box-shadow: 0px 0px 5px 4px #a6c3cd;-moz-box-shadow: 0 0 16px #DDD;-webkit-box-shadow: 1 22 22px #ddd;background: linear-gradient(-40deg, rgb(60 54 62) 0%, rgb(57 56 68) 52%, rgb(48 66 88) 100%);opacity: 0.6;top: 6px;left: 5.5px;}.eye2 {width: 5px;height: 5px;top: -6px;left: 9px;border-radius: 50%;background: white;position: relative;}.eye3 {width: 3px;height: 3px;top: 1px;left: 5px;border-radius: 50%;background: #91e3f58f;position: relative;}.eye4 {width: 1.5px;height: 3.5px;top: -13px;left: 2px;border-radius: 50%;background: #d0f7f3a8;transform: rotate(30deg);position: relative;}.eye5 {width: 7px;height: 8px;position: relative;border-radius: 50% 50% 50% 50%;box-shadow: 0px 0px 5px 4px #a6c3cd;-moz-box-shadow: 0 0 16px #DDD;-webkit-box-shadow: 1 22 22px #ddd;background: linear-gradient(-40deg, rgb(60 54 62) 0%, rgb(57 56 68) 52%, rgb(48 66 88) 100%);opacity: 0.6;top: -3px;left: 12.5px;transform: rotate(45deg);}.eye6 {width: 5px;height: 5px;top: -12px;left: 19px;border-radius: 50%;background: white;position: relative;}.eye7 {width: 3px;height: 3px;top: -11px;left: 9px;border-radius: 50%;background: #91e3f58f;position: relative;}.eye8 {width: 1.5px;height: 3.5px;top: -25px;left: 14px;border-radius: 50%;background: #d0f7f3a8;transform: rotate(30deg);position: relative;transform: rotate(70deg);}.eye.right {top: 13px;left: 5px;transform: rotate(45deg);}.nose {width: 15px;height: 11px;top: 44%;left: 50%;border-radius: 50% 50% 60% 60%/50% 50% 70% 70%;position: absolute;background-color: #000;transform: translateX(-50%);z-index: 1;}.nose-light {width: 5px;height: 10px;top: -1.5px;left: 5px;border-radius: 50%;background: linear-gradient(90deg, rgb(144 153 155) 0%, rgb(0 0 0) 100%);transform: rotate(90deg);position: relative;}.mouth {width: 31px;height: 16px;top: 50%;left: 50%;box-shadow: inset 0em -0.15em 0px 0em black;background-color: white;border-radius: 50%;position: absolute;transform: translateX(-50%);}.tongue {width: 2px;height: 12px;top: 8.8px;left: 14.6px;border-radius: 50%;background: linear-gradient(90deg, rgb(245 10 10) 0%, rgb(106 12 12) 100%);transform: rotate(90deg);position: relative;}/* .logo {margin: -24px auto 0;text-align: center;display: block;}.logo img {border-radius: 50%;top: 12px;} */
</style>
</head>
<body><div class="ice"><div class="ear"></div><div class="ear right"></div><div class="arm-left"></div><div class="arm-right"></div><div class="hand-left"></div><div class="hand-right"></div><div class="heart"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div><div class="foot"></div><div class="foot right"></div><div class="leg"></div><div class="leg right"></div><div class="main-body"><div class="face-circle"></div><div class="face"><div class="blackeye"><div class="eye"><div class="eye1"></div><div class="eye2"></div><div class="eye3"></div><div class="eye4"></div></div></div><div class="blackeye right"><div class="eye right"></div><div class="eye5"></div><div class="eye6"></div><div class="eye7"></div><div class="eye8"></div></div><div class="nose"><div class="nose-light"></div></div><div class="mouth"><div class="tongue"></div></div></div><!-- <div class="logo"><img src="logo.png" width="120px"></div> --></div></div>
</body>
<script></script>
</html>
相关文章：
html+css 实现 熊猫样式
效果 html代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible"…...
Vue基础19之插槽
Vue基础19插槽不使用插槽App.vueCategory.vue默认插槽：slotApp.vueCategory.vue具名插槽App.vueCategory.vue作用域插槽App.vueCategory.vue总结插槽 不使用插槽 App.vue <template><div class"bg"><Category :listData"food"…...
[Gin]框架底层实现理解(一)
前言：路由原理———压缩字典 这边简单讲一下gin非常重要的一个基点，也就是他作为go web框架的一个亮点 也就是Trie树和压缩字典算法 gin 通过树来存储路由，讲路由的字符拆解为一个个的结点，在获取handler函数时，会…...
css3横向无限公告消息滚动功能
html部分 {{item}}css部分 .boxingeds{ display: flex; flex-wrap: wrap; width: 150%; position: relative; left: 1000rpx; padding: 30rpx 0; position: absolute; top: 23%; z-index: 2; -webkit-animation: myfirst 30s linear 2s infinite; .textname{ display: inlin…...
【Git】Git工作流程及使用
Git工作流程及使用Git工作流程与常用命令Git工作流程Git常用命令项目中使用Git的场景需求开发前的分支拉取流程，需求开发后的分支合并流程分支合并出现冲突如何解决线上出现事故代码如何回退Git工作流程与常用命令 Git工作流程 workspace：工作区 stagin…...
降本增效，合作伙伴营销助力业绩增长
事实上，SaaS品牌透过“推荐奖励计划” 带来的业务营收平均占比高达 30%。例如，Evernote超过11300万用户通过老用户推荐来到Everote；Trello每日注册用户中有35%来自用户推荐；PayPal自从推行“推荐奖励计划”以来，用户日…...
【独家】华为OD机试 - 运动会（C 语言解题）
最近更新的博客 华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南）华为od机试，独家整理 已参加机试人员的实战技巧文章目录 最近更新的博客使用说明本期…...
【每天学习一点新知识】JNDI注入
什么是JNDIJNDI是Java的一种API，为我们提供了查找和访问各种命名和目录服务的通用统一的接口。通过JNDI统一接口我们可以来访问各种不同类型的服务，例如远程方法调用（RMI），通用对象请求代理体系结构（CORBA&…...
Transwarp KunDB 实施方案
星环科技 KunDB 实施方案方案描述优点缺点定期全量逻辑备份基于kundb导入导出工具，定期向kundb导出全量的逻辑数据,恢复时向kundb导入最近全量的逻辑数据。如每天00：00进行一次全量逻辑备份。1. 数据可视化2.方便问题排查3.还原失败不影响数据库的运行状…...
Redis学习之主从复制（八）
这里写目录标题一、主从复制简介1.1原理1.2 主从复制的作用二、主从复制工作流程2.1 建立连接2.1.1 master和slave连接流程2.1.2 master和slave互联2.1.3主从断开连接（了解）2.1.4 授权访问（了解）2.2 数据同步2.3 命令传播2.3.1 命…...
mysql8.0安装
创建文件 mkdir /usr/local/mysql mkdir /usr/local/mysql/data cd /usr/local/mysql 下载 wget https://dev.mysql.com/get/Downloads/MySQL-8.0/mysql-8.0.20-linux-glibc2.12-x86_64.tar.xz 解压 xz -d mysql-8.0.20-linux-glibc2.12-x86_64.tar.xz tar xvf mysql-8.0.20-…...
前端经典面试题（有答案）
代码输出结果var a 10var obj {a: 20,say: () > {console.log(this.a)}}obj.say() var anotherObj { a: 30 } obj.say.apply(anotherObj) 输出结果：10 10我么知道，箭头函数时不绑定this的，它的this来自原其父级所处的上下文，…...
华为云服务器安装mysql连接失败问题
新买了一个华为云服务器，装了一个宝塔linux工具，很好用，很好用。安装软件，管理软件都很方便。具体怎么操作官方文档很详细，不在这里赘述了。 问题：安装好mysql，安全组开放3306端口。修改root连接…...
合作伙伴管理软件VS CRM，企业应该选择哪一个？
当涉及到管理你公司的伙伴关系和与客户的关系时，有两个主要选择：合作伙伴管理软件和CRM（客户关系管理）软件。虽然这两种工具都可以帮助你跟踪商业关系的重要信息，但它们都有各自的优势和不足。 合作伙伴管理软件是专门…...
Matter 系列 #9｜乐鑫 Matter 预配置服务加速设备生产
乐鑫 Matter 系列文章 #9 目录 Matter 预配置服务 1. 设备认证 (Device Attestation) 2. 独特性 (Uniqueness) 3. 安全性 (Security) 联系我们 如今，物联网行业蓬勃发展，大量市场参与者正在积极地构建 Matter 智能设备。 乐鑫一直致…...
手把手交叉编译mysql
1.下载mysql（注意下载boost版本，这样会少一步编译） 下载mysql的时候一定要看好交叉编译工具链的版本。因为mysql 8.0需要的工具链版本较高，所以有可能不支持 查看链接如下： MySQL :: MySQL 8.0 Reference Manual :: …...
升压模块直流隔离低压转高压稳压电源5v12v24v转50V100V110V150V200V250V400V500V600V800V1000V
特点效率高达80%以上1*2英寸标准封装单电压输出价格低稳压输出工作温度: -40℃~85℃阻燃封装，满足UL94-V0 要求温度特性好可直接焊在PCB 上应用HRB W2~40W 系列模块电源是一种DC-DC升压变换器。该模块电源的输入电压分为：4.5~9V、9~18V、及18~36VDC标准&…...
LeetCode：977 有序数组平方
给你一个按 非递减顺序 排序的整数数组 nums，返回 每个数字的平方 组成的新数组，要求也按 非递减顺序 排序。 示例 1： 输入：nums [-4,-1,0,3,10] 输出：[0,1,9,16,100] 解释：平方后，数组变为 […...
JAVA环境配置多个环境（全，详细，简单）
下载java包：https://www.oracle.com/java/technologies/downloads （8版本稳定） 直接无脑安装java程序 （包括jdk-开发与jre-运行） 接下来是java环境配置： 创建系统变量 （用户变量也可以&#…...
10 Seata配置Nacos注册中心和配置中心
Seata配置Nacos注册中心和配置中心 Seata支持注册服务到Nacos，以及支持Seata所有配置放到Nacos配置中心，在Nacos中统一维护； 高可用(集群)模式下就需要配合Nacos来完成: 具体配置如下 注册中心 Seata-server端配置注册中心，…...
[数据库]表的增删改查进阶
●🧑个人主页:你帅你先说. ●📃欢迎点赞👍关注💡收藏💖 ●📖既选择了远方，便只顾风雨兼程。 ●🤟欢迎大家有问题随时私信我！ ●🧐版权：本文由[你帅…...
Kubernetes调度之Pod亲和性
Kubernetes调度中的Pod亲和性abstract.pngPod亲和性节点亲和性，是基于节点的标签对Pod进行调度。而Pod亲和性则可以实现基于已经在节点上运行Pod的标签来约束新Pod可以调度到的节点。具体地，如果X上已经运行了一个或多个满足规则Y的Pod，则这个…...
建立相关在线社群的3个简单步骤
在线社群管理和社交媒体营销通常被视为一回事。虽然社群管理确实是社交媒体营销的一个关键部分，但它的意义超越了社交媒体的内容发布。因此，在线社群对于企业的数字营销十分重要。创建、维护和发展社群不是一件容易的工作，也不是一个快速的过…...
安全运营的新模式
安全运营的新模式是传统安全运维的扩展和升级，其实现落地需要管理和技术两斱面同时支撑、相互衎接和配合，缺夰仸何一个都是行不通的。管理斱面，在顶层设计时，网络安全运营要根据国家信息安全等级保护 2.0 的相关要求，参…...
Day10-网页布局实战CSS3
一 补充 1 画三角形 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevi…...
代码规范（C/C++规范）
文章目录前言个人编写的代码规范链接请求合作大体章节END前言 什么是代码规范 一套用于统一代码开发的准则 为什么需要代码规范 提升代码可读性，提升团队效率 个人编写的代码规范 近期本人编写了一份以C/C为主的代码规范。 其他语言开发者也可以阅读参考。 本…...
春招冲刺（九）：计算属性和监视属性总结
计算属性和监视属性总结 Q1：计算属性 姓：<input type"text" v-model"firstName"><br><br> 名：<input type"text" v-model"lastName"><br><br> 姓名ÿ…...
数据挖掘（作业1）
实验开始前先配置环境 以实验室2023安装的版本为例： 1、安装anaconda：（anaconda自带Python,安装了anaconda就不用再安装Python了） 下载并安装 Anaconda3-2022.10-Windows-x86_64.exe 自己选择安装路径，其他使用默认…...
【UE4 RTS游戏】01-项目准备
步骤新建一个工程，选择俯视角游戏模板我命名工程如下：删除场景内的所有cube再删除Floor和Wall删除TopDownCharacter删除“NavgationMeshBoundVolume”删除“TamplateLabel”和“RecastNavMesh-Default”删除LightmassImportanceVolume、PostProcessVolum…...
登录系统账号检测--课后程序(Python程序开发案例教程-黑马程序员编著-第3章-课后作业)
实例8：登录系统账号检测 登录系统一般具有账号密码检测功能，即检测用户输入的账号密码是否正确。若用户输入的账号或密码不正确，提示 “用户名或密码错误”和“您还有*次机会”； 若用户输入的账号和密码正确，提示“登…...
番禺网站开发哪家专业/朝阳seo排名
1、HBuilder 功能简介： HBuilder是专为前端打造的开发工具，具有飞一样的编码、最全的语法库和浏览器兼容数据、可以方便的制作手机APP、最保护眼睛的绿柔设计等特点。支持HTML、CSS、JS、PHP的快速开发。从开放注册以来深受广大前端朋友们的喜爱。 2、…...
平乡企业做网站/电商网站运营
JACOB 简介 Jacob 是 JAVA-COM Bridge的缩写，是一个中间件，能够提供自动化访问MS系统下COM组件和Win32 libraries的功能。 • MS系统提供的COM组件 COM组件 对象ID MS Word Word.Application MS Excel Excel.Application MS Powerpoint Powerpoint.Appli…...
西安未央区网站建设/最近实时热点事件
Spring Cloud OAuth2实现用户认证中心学习笔记1、创建Spring Cloud OAuth2项目2、在不使用数据库的情况下实现AuthenticationServer3、测试AuthenticationServer3.1 授权码方式（grant_typeauthorization_code）验证测试3.2 客户端方式（grant_t…...
网站首页怎么做ps/百度营消 营销推广
注意：属于转载很多人对于PCB走线的参考平面感到迷惑，经常有人问：对于内层走线，如果走线一侧是VCC，另一侧是GND，那么哪个是参考平面？要弄清楚这个问题，必须对了解传输线的概念。我们知…...
江都微信网站建设/广告推销网站
还有两天就过年了，我祝各位关注我的朋友均值不等式、柯西不等式、排序不等式帮你精打细算财源滚滚； 重心、垂心、外心、内心、旁心让你事事顺心； 外接圆、旁切圆、内切圆让您圆圆满满； 调和点列，调和数列，调…...
学网站开发的软件有哪些/网页制作软件
Android中TextView字体加粗小技巧 开发中经常会遇到字体加粗的需求，在使用系统字体的情况下，我们一般是通过在布局文件中给TextView设置android:textStyle"bold"属性。 如果你们的设计师小姐姐不想使用Android的这种加粗效果，只是…...