css画个熊猫

css画个熊猫
【html源码-一键复制查看效果】

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.box {position: relative;width: 300px;height: 260px;background-color: #55ff7f;border-radius: 20%;margin: 10% auto 5%;transition: all 0.6s;}.box:hover {transform: scale(1.2);}.headBox {position: relative;z-index: 5;width: 280px;height: 250px;border-radius: 300px;background-color: #fff;transform: rotate(-15deg);}.e1 {position: absolute;top: 30px;left: -25px;z-index: 1;width: 90px;height: 90px;border-radius: 50%;background-color: #000;transform: rotate(45deg);}.e2 {position: absolute;top: -20px;left: 174px;z-index: 1;width: 90px;height: 90px;border-radius: 50%;background-color: #000;transform: rotate(45deg);}.eye1 {position: absolute;top: 95px;left: 174px;z-index: 1;width: 73px;height: 75px;/* 不规则的圆形写法 */border-radius: 40% 60% 48% 52% / 50% 61% 39% 50%;background-color: #000;transform: rotate(-6deg);}.eye2 {position: absolute;top: 110px;left: 45px;z-index: 1;width: 73px;height: 75px;border-radius: 66% 34% 48% 52% / 60% 54% 46% 40%;background-color: #000;transform: rotate(20deg);}.y {position: absolute;top: 41px;left: 18px;z-index: 1;width: 40px;height: 10px;border: 4px solid #fff;border-radius: 50% 50% 0 0 / 100% 100% 0 0;border-bottom: none;transform: rotate(-23deg);}.nose {position: absolute;top: 175px;left: 135px;z-index: 1;width: 40px;height: 25px;border-radius: 50%;background-color: #000;}.mouth {position: absolute;top: 205px;left: 137px;z-index: 1;width: 40px;height: 20px;/* 半圆线条 */border: 1px solid black;border-radius: 0 0 50% 50%/0 0 100% 100%;border-top: none;}</style></head><body><div class="box"> <!-- 耳朵 --><div class="e1"></div><div class="e2"></div> <!-- 头 --><div class="headBox"> <!-- 眼睛 --><div class="eye1"><div class="y"></div></div><div class="eye2"><div class="y"></div></div> <!-- 鼻子 --><div class="nose"></div> <!-- 嘴巴 --><div class="mouth"></div></div></div></body>
</html>

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

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

相关文章

文件批量处理:批量读取、修改与保存的技术指南

目录 一、引言 二、批量读取文件 2.1 文件格式与规范 2.2 读取文件的基本方法 2.3 批量读取的实现 三、批量重命名文件 3.1 使用专用软件 3.2 编写脚本实现 四、批量修改文件内容 4.1 使用文本编辑器或IDE的批量替换功能 4.2 编写脚本批量修改文件内容 五、案例分析…

android studio 设置gradle jdk

1. 左上角点击file 2. 按照如下点击&#xff1a; 3. 即可修改gradle jdk

SQL-函数

1、字符串函数 # 字符函数 select concat(hello , mysql!); select lower(HELLO); select upper(hello); select lpad(01,5,-);# 左填充 select rpad(01,5,-);# 右填充 select trim( hello mysql ! );# 去除前后空格 select substring(hello mysql!,1,7);# 截取一部分字符前7…

sql-labs31-35关通关攻略

第三十一关 一.判断闭合 1“” 二.查询数据库 http://127.0.0.1/Less-31/?id-1%22)%20union%20select%201,2,database()--http://127.0.0.1/Less-31/?id-1%22)%20union%20select%201,2,database()-- 三.查表 http://127.0.0.1/Less-31/?id-1%22)%20union%20select%201,…

pmp证书为何会被骂?他真的就是个垃圾证书?

说是垃圾到不至于。 毕竟PMP证书今年被北京市列入急需紧缺专业人才人员名单&#xff01;同时可以在创新创业、社会保障、评价激励等方面得到优先支。 其次&#xff0c;证书&#xff0c;其内容可以夯实基础&#xff0c;理清一个项目从启动、执行到最后的收尾做ppt结案的整个流…

[Hive]四、Hive On Tez

G:\Bigdata\Projects\大数据电商数仓项目(含2.0、3.0版本)\数仓项目实战V2.0\word版资料 1. Hive集成引擎Tez Tez是一个Hive的运行引擎,性能优于MR。为什么优于MR呢?看下图。 用Hive直接编写MR程序,假设有四个有依赖关系的MR作业,上图中,绿色是Reduce Task,云状表示写…

[数据集][目标检测]电力场景输电线均压环歪斜检测数据集VOC+YOLO格式303张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;303 标注数量(xml文件个数)&#xff1a;303 标注数量(txt文件个数)&#xff1a;303 标注类别…

多个pdf合并成一个文件怎么操作?教你几种大家都在用的合并pdf文件方法!

多个pdf合并成一个文件怎么操作&#xff1f;在当下这个信息爆炸的数字化纪元&#xff0c;PDF文件的整合管理正逐步成为职场与学术界的热门话题&#xff0c;许多人或许还未全然意识到&#xff0c;将多个PDF文档合并为一的策略背后所蕴含的深远意义&#xff0c;其中最重要的就在于…

给自己复盘用的tjxt笔记day11第二部分

异步领券 优化方案分析 对于高并发问题&#xff0c;优化的思路有异步写和合并写。 其中&#xff0c;合并写请求比较适合应用在写频率较高&#xff0c;写数据比较简单的场景。而异步写则更适合应用在业务比较复杂&#xff0c;业务链较长的场景。 显然&#xff0c;领券业务更…

Python | Leetcode Python题解之第377题组合总和IV

题目&#xff1a; 题解&#xff1a; class Solution:def combinationSum4(self, nums: List[int], target: int) -> int:dp [1] [0] * targetfor i in range(1, target 1):for num in nums:if num < i:dp[i] dp[i - num]return dp[target]

MyBatis的学习————下篇

目录 一、动态SQL 简介 1、if标签 2、where标签 3、trim标签 4、choose、when、otherwise 5、foreach 5.1、批量删除 5.2、批量添加 6、sql标签 二、MyBatis的缓存 1、一级缓存 2、二级缓存 3、二级缓存的相关配置 4、MyBatis缓存查询的顺序 5、 第三方缓存EHCac…

【滑动窗口法解决子数组,子串问题】

前言 在leetCode题解中看到一位大佬针对滑动窗口法解决子数组&#xff0c;子串问题的总结&#xff0c;觉得总结的非常好&#xff0c;成功地将滑动窗口法变成了默写题&#xff0c;在这里学习记录一下。 适用于 76.最小覆盖子串 567.字符串的排列 438.找到字符串中所有字母异位词…

WPF- vs中的WPF应用项目模板 如何自己实现

读书笔记 1. 单个 c#文件的 空白window应用程序 (只展示了一个button按钮) 2.C#文件 和xml文件 的空白window程序 .xml文件作为程序的资源 (只一个button按钮) 3. xmal和c#共同编译 形如使用VS 创建WPF应用项目模板 1.新建一个wpf空白项目 ,添加一个主c#文件 和xaml文件(属…

手算神经网络MAC和FLOP

在本文中&#xff0c;我们将深入探讨神经网络背景下的 MAC&#xff08;乘法累加运算&#xff09;和 FLOP&#xff08;浮点运算&#xff09;概念。通过学习如何使用笔和纸手动计算这些内容&#xff0c;你将对各种网络结构的计算复杂性和效率有基本的了解。 这是 colab 笔记本中…

Java语言程序设计基础篇_编程练习题*17.13 (带GUI的组合文件工具)

目录 题目&#xff1a;*17.13 (带GUI的组合文件工具) 代码示例 结果展示 题目&#xff1a;*17.13 (带GUI的组合文件工具) 改写编程练习题17.12使之带有GUI&#xff0c;如图1721b所示 可以使用编程练习题17.11的GUI代码和编程练习题17.12的程序代码&#xff1a; Java语言…

linux系统使用 docker 来部署运行 mysql5.7 并配置 docker-compose-mysql.yml 文件

Docker是一个开源的容器化平台&#xff0c;旨在简化应用程序的创建、部署和管理。它基于OS-level虚拟化技术&#xff0c;通过将应用程序和其依赖项打包到一个称为容器的标准化单元中&#xff0c;使得应用程序可以在任何环境中快速、可靠地运行。 Docker的优势有以下几个方面&a…

SpringMVC 笔记篇

1.1 执行流程 1.1.5 DispatcherServlet的init()——> 创建Spring容器 ——> initStrategies()方法 在1.1.4中DispatcherServlet中的init()方法创建Spring容器之外&#xff0c;其实还会做一件特别重要的事&#xff0c;在FrameworkServlet中的refresh()方法执行之前&…

景联文科技提供运动数据采集服务

运动数据的重要性 运动数据的收集与分析对于提升个人健康管理和运动表现具有重要意义。 通过收集心率、步态、速度等生理和运动参数&#xff0c;不仅可以为运动员提供个性化的训练方案&#xff0c;帮助其优化表现&#xff0c;还能早期发现并预防伤病。对于普通健身者而言&…

CSS溢出——WEB开发系列20

在网页设计中&#xff0c;“溢出”是一个常见且重要的概念。它涉及到如何处理那些超出预定范围的内容&#xff0c;以确保网页的布局和视觉效果达到预期。 一、什么是溢出&#xff1f; 在 CSS 中&#xff0c;“溢出”&#xff08;overflow&#xff09;指的是内容超出其包含块的…

python-pptx - Python 操作 PPT 幻灯片

文章目录 一、关于 python-pptx设计哲学功能支持 二、安装三、入门1、你好世界&#xff01;例子2、Bullet 幻灯片示例3、add_textbox()示例4、add_picture()示例5、add_shape()示例6、add_table()示例7、从演示文稿中的幻灯片中提取所有文本 四、使用演示文稿1、打开演示文稿2、…