超萌!HTMLCSS:超萌卡通熊猫头

效果演示

创建了一个卡通风格的熊猫头

HTML

<div class="box"><div class="head"><div class="head-copy"></div><div class="ears-left"></div><div class="ears-right"></div><div class="patch-left"><div class="blush-left"></div><div class="eye-left"></div></div><div class="patch-right"><div class="blush-right"></div><div class="eye-right"></div></div><div class="nose"></div><div class="mouth"></div><div class="mouth2"></div></div>
</div>
  • box:外层容器,用于包裹整个图形,设置了相对定位、自动居中、宽度为 600px、高度为 420px,并通过margin-top设置了与顶部的距离。
  • head:头部的主要容器,包含了耳朵、眼睛、鼻子、嘴巴等各个部分。
  • head-copy:可能是头部的副本,用于特定的效果或备用。
  • ears-left和ears-right:分别表示左右耳朵。
  • patch-left和patch-right:可能是脸部的补丁部分,内部包含腮红和眼睛。
  • blush-left和blush-right:左右腮红。
  • eye-left和eye-right:左右眼睛。
  • nose:鼻子。
  • mouth和mouth2:嘴巴部分,可能是为了实现更复杂的嘴巴效果。

CSS

.box {position: relative;margin: auto;display: block;margin-top: 10%;width: 600px;height: 420px;
}.head,
.head-copy,
.ears-left,
.ears-right,
.patch-left,
.patch-right,
.blush-left,
.blush-right,
.eye-left,
.eye-right,
.nose,
.mouth,
.mouth2 {position: absolute;
}.head {top: 10%;left: 32.5%;background: #FAF3DD;width: 35%;height: 45%;border-radius: 60% 60% 90px 90px;
}.head-copy {width: 100%;height: 100%;background: #FAF3DD;border-radius: 60% 60% 90px 90px;z-index: 1;
}.ears-left {top: -1%;left: -10%;width: 30%;height: 30%;border-radius: 50%;background: #000000;
}.ears-right {top: -1%;right: -10%;width: 30%;height: 30%;border-radius: 50%;background: #000000;
}.patch-left {top: 43%;left: 8%;width: 32%;height: 40%;border-radius: 50% 50% 30px 30px;transform: rotate(35deg);background: #000000;z-index: 2;
}.patch-right {top: 43%;right: 8%;width: 32%;height: 40%;border-radius: 50% 50% 30px 30px;transform: rotate(-35deg);background: #000000;z-index: 2;
}.blush-left {top: 93%;left: 23%;width: 35%;height: 20%;border-radius: 50%;transform: rotate(-30deg);background: #FF9F9E;opacity: .8;
}.blush-right {top: 93%;right: 23%;width: 35%;height: 20%;border-radius: 50%;transform: rotate(30deg);background: #FF9F9E;opacity: .8;
}.eye-left {top: 30%;left: 22%;width: 30px;height: 30px;border: 3px solid;border-radius: 50%;border-color: #FAF3DD transparent transparent #FAF3DD;transform: rotate(15deg);
}.eye-right {top: 30%;left: 22%;width: 30px;height: 30px;border: 3px solid;border-radius: 50%;border-color: #FAF3DD transparent transparent #FAF3DD;transform: rotate(75deg);
}.nose {top: 70%;left: 46%;width: 18px;background: #000000;height: 10px;border-radius: 50%;z-index: 2;
}.mouth {top: 78%;left: 45%;width: 10px;height: 10px;border: 2px solid;border-radius: 50%;border-color: transparent #000000 #000000 transparent;transform: rotate(45deg);z-index: 2;
}.mouth2 {top: 78%;left: 51%;width: 10px;height: 10px;border: 2px solid;border-radius: 50%;border-color: transparent #000000 #000000 transparent;transform: rotate(45deg);z-index: 2;
}
  • .box类:position: relative;设置相对定位,作为内部元素定位的参考。margin: auto; display: block;使容器在页面上水平居中显示。margin-top: 10%;设置与顶部的距离为页面高度的 10%。width: 600px; height: 420px;设置容器的宽度和高度。
  • 通用选择器部分:所有具有特定类名的元素都被设置为绝对定位,以便可以精确地放置在头部容器中。
  • .head类:top: 10%; left: 32.5%;设置头部在容器中的位置。background: #FAF3DD;设置头部的背景颜色为浅黄色。width: 35%; height: 45%;设置头部的大小。border-radius: 60% 60% 90px 90px;设置头部的圆角形状。
  • .head-copy类:与头部具有相同的大小、位置和背景颜色,可能用于创建特殊效果或作为备份。.ears-left和.ears-right类:分别设置左右耳朵的位置、大小和背景颜色为黑色,使用border-radius: 50%;使其成为圆形。
  • .patch-left和.patch-right类:分别设置左右补丁部分的位置、大小、旋转角度和背景颜色为黑色,使用border-radius: 50% 50% 30px 30px;设置圆角形状。
  • .blush-left和.blush-right类:分别设置左右腮红的位置、大小、旋转角度、背景颜色为淡粉色,并设置了一定的透明度。
  • .eye-left和.eye-right类:分别设置左右眼睛的位置、大小、边框样式和旋转角度,通过边框颜色的设置创建了一种特殊的眼睛效果。
  • .nose类:设置鼻子的位置、大小和背景颜色为黑色,使用border-radius: 50%;使其成为圆形。
  • .mouth和.mouth2类:分别设置嘴巴的位置、大小、边框样式和旋转角度,通过边框颜色的设置创建了嘴巴的效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/465113.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用 AMD GPU 的 ChatGLM-6B 双语语言模型

Using the ChatGLM-6B bilingual language model with AMD GPUs — ROCm Blogs 2024 年 4 月 4 日&#xff0c;作者&#xff1a; Phillip Dang. ChatGLM-6B 是一个开源的中英双语语言模型&#xff0c;拥有 62 亿参数。它基于通用语言模型 (GLM) 架构&#xff0c;针对中文对话进…

计算并联电阻的阻值

计算并联电阻的阻值 C语言代码C代码Java代码Python代码 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 对于阻值为r1和r2的电阻&#xff0c;其并联电阻阻值公式计算如下&#xff1a; R1/(1/r11/r2) 输入 两个电阻阻抗大小&#xff0c;浮…

创建线程时传递参数给线程

在C中&#xff0c;可以使用 std::thread 来创建和管理线程&#xff0c;同时可以通过几种方式将参数传递给线程函数。这些方法包括使用值传递、引用传递和指针传递。下面将对这些方法进行详细讲解并给出相应的代码示例。 1. 值传递参数 当你创建线程并希望传递参数时&#xff…

AAA 数据库事务隔离级别及死锁

目录 一、事务的四大特性&#xff08;ACID&#xff09; 1. 原子性(atomicity)&#xff1a; 2. 一致性(consistency)&#xff1a; 3. 隔离性(isolation)&#xff1a; 4. 持久性(durability)&#xff1a; 二、死锁的产生及解决方法 三、事务的四种隔离级别 0 .封锁协议 …

数字后端零基础入门系列 | Innovus零基础LAB学习Day9

Module 16 Wire Editing 这个章节的学习目标是学习如何在innovus中手工画线&#xff0c;切断一根线&#xff0c;换孔&#xff0c;更改一条net shape的layer和width等等。这个技能是每个数字IC后端工程师必须具备的。因为项目后期都需要这些技能来修复DRC和做一些手工custom走线…

前后端交互通用排序策略

目录 排序场景 排序实现思路 1. 静态代码排序实现 2.数据库驱动排序实现 3. 基于Java反射的动态排序实现 通用排序工具 SortListUtil 结语 排序场景 在面向前端数据展示的应用场景中&#xff0c;我们旨在实现一个更加灵活的排序机制&#xff0c;该机制能够支持对从后端传递…

前端入门一之CSS知识详解

前言 CSS是前端三件套之一&#xff0c;在MarkDown中也完美兼容这些语法&#xff1b;这篇文章是本人大一学习前端的笔记&#xff1b;欢迎点赞 收藏 关注&#xff0c;本人将会持续更新。 文章目录 Emmet语法&#xff1a;CSS基本语法&#xff1a;css语法结构只有3种&#xff1a…

leetcode | 88. 合并两个有序数组

题目描述 88. 合并两个有序数组 分析 题目不允许更改nums1的长度&#xff0c;要求原地更改。 题目其实不难&#xff0c;如果记住可以从后往前合并的解法&#xff0c;但是正向遍历的问题是什么呢&#xff1f; ——元素覆盖。那为什么负向遍历就不会有这个问题呢&#xff1f;…

跳蚤市场之商品发布功能

一 商品类别和小类的联动 以下是一个示例代码&#xff0c;展示了如何实现商品类别中大类和小类的联动。 商品大类选择框、小类选择框 的设计 html部分 <form id"category-form"><label for"major-category">大类&#xff1a;</label&g…

OpenAI 发布了新的事实性基准——SimpleQA

SimpleQA 简介 名为 SimpleQA 的事实性基准&#xff0c;用于衡量语言模型回答简短的事实性问题的能力。 人工智能领域的一个悬而未决的问题是如何训练模型&#xff0c;使其产生符合事实的回答。 目前的语言模型有时会产生错误的输出或没有证据证明的答案&#xff0c;这个问题…

Android camera2

一、序言 为了对阶段性的知识积累、方便以后调查问题&#xff0c;特做此文档&#xff01; 将以camera app 使用camera2 api进行分析。 (1)、打开相机 openCamera (2)、创建会话 createCaptureSession (3)、开始预览 setRepeatingRequest (4)、停止预览 stopRepeating (5)、关闭…

Javascript属性遮蔽问题

先了解一下Object.defineProperty()方法 Object.defineProperty() 静态方法会直接在一个对象上定义一个新属性&#xff0c;或修改其现有属性&#xff0c;并返回此对象。 //obj&#xff1a;要定义的对象 //prop&#xff1a;一个字符串或 Symbol&#xff0c;指定了要定义或修改…

vue3项目history模式部署404处理,使用 historyApiFallback 中间件支持单页面应用路由

vue3项目history模式部署404处理&#xff0c;使用 historyApiFallback 中间件支持单页面应用路由 在现代的 web 开发中&#xff0c;单页面应用&#xff08;SPA&#xff09;变得越来越流行。这类应用通常依赖于客户端路由来提供流畅的用户体验&#xff0c;但在服务器端&#xf…

【vim文本编辑器gcc编译器gdb调试器】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、vimvim安装vim常用快捷键vim使用vimtutor zh文档 二、gcc编译器安装gcc工具编译源代码 三、gdb调试器gdb安装gdb常用指令gdb简单上手使用gdb的单步调试功能 总结…

企业数字化转型的架构治理策略:核心问题、深度分析与优化路径

在当今的商业环境中&#xff0c;企业数字化转型已成为实现可持续发展、增强竞争力的战略选择。企业架构治理&#xff08;Enterprise Architecture Governance Capability, EAGC&#xff09;在数字化转型中扮演着保障架构一致性、提升变革效能的关键角色。本指南深入解析了如何通…

基于springboot+vue实现的农产品物流系统

基于springbootvue实现的农产品物流系统 &#xff08;源码L文ppt&#xff09;4-107 摘 要 随着现代信息技术的迅猛发展&#xff0c;农产品物流系统应运而生&#xff0c;成为连接生产者与消费者的重要桥梁。该系统采用java语言&#xff0c; Spring Boot框架&#xff0c;结合My…

基于uniapp和java的电动车智能充电系统软件平台的设计

文章目录 项目介绍具体实现截图技术介绍mvc设计模式小程序框架以及目录结构介绍错误处理和异常处理java类核心代码部分展示详细视频演示源码获取 项目介绍 对电动车智能充电系统进行设计和开发。通过使用本系统可有效地减少运营成本&#xff0c;提高管理效率。 根据近年来社会…

Jmeter命令监控CPU等指标

JMeter 命令行执行脚本得到的报告中&#xff0c;是没有CPU、内存使用率等监控数据的&#xff0c;但是可以使用JMeter插件帮忙。 一、下载jmeter-plugins-manager.jar 下载后将文件放到jmeter安装包lib/ext目录下。打开Jmeter》菜单栏》选项》Plugins Manager 二、安装PerfMon…

ubuntu20.04 加固方案-检查是否设置登录超时

一、编辑/etc/profile配置文件 打开终端。 使用文本编辑器&#xff08;如vim&#xff09;编辑/etc/profile 文件。 vi /etc/profile 二、添加配置参数 在打开的配置文件中&#xff0c;如图位置添加如下参数&#xff1a; TMOUT1800 export TMOUT三、保存并退出 在vim编辑器…