扑捉一只耿鬼（HTML文件）
图例：
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>耿鬼</title><style>body {background: #fff;font-family: 'Comfortaa', sans-serif;}* {box-sizing: border-box;}*:before,*:after {content: '';position: absolute;}main {width: 400px;height: 400px;margin: auto;text-align: center;}.gengar {background: #9179c6;margin: 3em auto 5em;width: 310px;height: 350px;border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;margin: auto;position: relative;}.gengar .ear {width: 150px;height: 150px;background: #9179c6;border-radius: 10px;position: relative;transform: rotate(-120deg) skewX(-40deg) scale(1, 0.866);position: absolute;top: 0;}.gengar .ear.right {position: absolute;background: #9179c6;transform: rotate(110deg) skewX(40deg) scale(1, 0.866);right: 0;}.gengar .hair {width: 0;height: 0;position: absolute;top: -45px;left: 50%;margin-left: -45px;transform: rotate(10deg);border-bottom: 100px solid #9179c6;border-left: 70px solid transparent;border-right: 70px solid transparent;}.gengar .hair.two,.gengar .hair.two:before,.gengar .hair.two:after {transform: rotate(-30deg);margin-left: -60px;top: -35px;border-bottom: 80px solid #9179c6;border-left: 30px solid transparent;border-right: 30px solid transparent;}.gengar .hair.two:before {transform: rotate(60deg) translate(130px, -50px);}.gengar .hair.two:after {transform: rotate(-15deg) translate(-10px, 48px);border-bottom: 40px solid #9179c6;}.gengar .eye {width: 100px;height: 50px;background: #f6b392;border-radius: 0 0 200px 200px;position: absolute;top: 33%;overflow: hidden;transition: 0.3s ease;}.gengar .eye:before {width: 20px;height: 35px;background: black;border-radius: 100%;transform: rotate(-35deg);}.gengar .eye:after {width: 8px;height: 8px;border-radius: 50%;background: white;left: 43%;top: 10px;}.gengar .eye.one {left: 50%;transform: rotate(35deg);margin-left: -120px;}.gengar .eye.two {transform: rotate(-35deg) scaleX(-1);right: 50%;margin-right: -120px;}.gengar .mouth {position: absolute;left: 50%;margin-left: -125px;top: 7%;width: 250px;height: 190px;border-radius: 50%;box-shadow: 0 75px 0 -10px white;transition: 0.3s ease;}.gengar .leg {position: absolute;width: 320px;height: 130px;border-top-left-radius: 200px;border-top-right-radius: 200px;border: 80px solid #7a63ad;border-bottom: 0;top: 75%;left: 0;right: 0;margin: auto;z-index: -1;}.gengar .leg:before,.gengar .leg:after {height: 20px;border-radius: 10px;width: 85px;bottom: -5px;background: #7a63ad;}.gengar .leg:before {left: -84.5px;}.gengar .leg:after {right: -84.5px;}.gengar .hand {position: absolute;width: 85px;height: 140px;background: #9179c6;border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;transform: rotate(59deg);top: 31%;left: -40px;}.gengar .hand.two {transform: rotate(-59deg);left: auto;right: -40px;}input[type='checkbox'] {height: 0;width: 0;visibility: hidden;}label {background: #eee;width: 160px;height: 75px;border-radius: 80px;display: inline-block;margin: 4em auto;position: relative;cursor: pointer;}label span {position: absolute;top: 5px;left: 5px;width: 65px;height: 65px;background: #333;border-radius: 50%;transition: 0.5s;border: 3px solid #222;background: radial-gradient(#fff, #fff 15%, #333 15%, #333 24%, transparent 24%), linear-gradient(to bottom, #d02222, #d02222 45%, #222 45%, #222 52%, #fff 52%);}input:checked+label span {left: 90px;transform: rotate(360deg);background: #f38dcb;border-radius: 200% 320% 150% 150%;border-radius: 50%;background-repeat: no-repeat;background-image: radial-gradient(ellipse, black 50%, transparent 50%), radial-gradient(ellipse, black 50%, transparent 50%), linear-gradient(#333, #333);background-size: 6px 6px, 6px 6px, 25px 2px;background-position: 28% 50%, 80% 50%, 55% 64%;}input:checked~.gengar .eye {background: black;width: 16px;height: 16px;border-radius: 50%;}input:checked~.gengar .eye.one {margin-left: -60px;}input:checked~.gengar .eye.two {margin-right: -60px;}input:checked~.gengar .eye:before,input:checked~.gengar .eye:after {content: none;}input:checked~.gengar .mouth {margin-left: -100px;top: 35%;width: 210px;height: 50px;border-radius: 50%;box-shadow: 0 15px 0 -10px #131313;}</style>
</head><body><main><input type="checkbox" id="ditto-me" /><label for="ditto-me"><span></span></label><div class="gengar"><div class="ear left"></div><div class="ear right"></div><div class="hair"></div><div class="hair two"></div><div class="hand"></div><div class="hand two"></div><div class="mouth"></div><div class="eye one"></div><div class="eye two"></div><div class="leg"></div></div></main>
</body></html>
相关文章：
扑捉一只耿鬼（HTML文件）
图例： 代码： <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>耿鬼</title><style>body {background: #fff;font-family: Comfortaa, sans-serif;}* {box-sizing:…...
Address localhost:1099 is already in use：tomcat频繁重启端口占用问题
错误提示 Unable to open debugger port (127.0.0.1:58198): java.net.SocketException "Socket closed" Address localhost:1099 is already in use 端口被占用 报错原因 由于短时间内频繁运行tomcat服务器。 为了避免出现这一错误。可以点击刷新uodate resourc…...
HTTPS SEO优势
搜索引擎优化（SEO）是提高网站在搜索引擎结果页（SERP）中的排名以吸引更多访问者的过程。HTTPS作为网站安全的标准，对SEO有着直接和间接的优势： 1. HTTPS作为排名信号 2014年，Google宣布HTTPS成…...
UE5 C++ 读取图片插件(一)
原来UE可以使用 static,之前不知道，一用就报错。 static TSharedPtr<IImageWrapper> GetImageWrapperByExtention(const FString InImagePath); //智能指针，方便追寻引用C,加载ImageWrapperstatic UTexture2D* LoadTexture2D(const FString& …...
C语言行地址列地址区别，内存的分配
开辟了10个字节的空间在栈中 "abc"常量在代码段 char a[10]"abc"; p：8个字节存"abc"的地址 "abc"常量在代码段中 char *p"abc" char *q"abc" p,q的值是一样的 到…...
Unity 一键修改图片缩放保存为当前的一半大小
用来压缩贴图大小还是比较方便的 支持 png,jpg,tga 话不多说 直接上代码 [MenuItem("Assets/扩展功能/缩放贴图一半尺寸（png | jpg | tga）", false)]static void ScaleHalfTextureSizeMenu(){foreach(var obj in Selection.objects) {Texture…...
Identifying User Goals from UI Trajectories论文学习
通过UI轨迹识别用户的需求。 这篇论文同样聚焦于UI agent，只是思路比较特别。他们想要通过训练agent通过用户的行为轨迹反推出他们想要干什么的能力来锻炼agent识别，理解，使用UI的能力。同时这个训练项目本身也有一定的实际意义，…...
[STM32]从零开始的STM32标准库环境搭建（小白向）
一、我们为什么要搭建STM32标准库开发环境 如果你对STM32有一定的了解，相信你已经认识了STM32的几种开发方式。基于STM32寄存器开发，基于ST官方的标准库开发，基于ST官方的HAL库开发。我们现在来了解一下这些库的优缺点。首先就是基于寄存器开…...
解决 Android 上的 .NET MAUI/Xamarin.AndroidX 应用调用 ASP.NET Core API 端点时 SSL 连接被拒绝的问题
从虚拟机调用本地API报各种 SSL 连接不上的错误，这给本地调试造成了极大的不便，在被这个问题困扰了多日以后，终于在GitHub上找到答案 基于这个 帖子 ，有一个回复 他写了一个帮助类，专门用来调试本地的API，…...
助贷CRM系统：为金融中介行业打造全新营销管理模式
助贷CRM（客户关系管理）系统是针对金融中介行业，特别是从事贷款助贷业务的机构设计的一套综合管理系统。该系统旨在通过数字化、智能化的手段，优化金融中介机构的营销、销售、客户管理及服务流程，提升运营效率ÿ…...
HBase 部署及shell操作
HBase 数据库 一、HBase 概述1.1 HBase 是什么HBase 的特点 二、HBase 模型及架构2.1 HBase 逻辑模型2.2 HBase 数据模型2.3 HBase 物理模型2.3.1 列簇物理模型2.3.2 Rowkey 字段排序2.3.3 Region 存储到不同节点2.3.4 Region 结构 2.4 HBase 基本架构 三、搭建 HBase 分布式集…...
使用Fign进行客户端远程调用和SpringFormEncoder的使用
1、引入依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign</artifactId> </dependency> 2、启动类加上注解 EnableFeignClients SpringBootApplication public class FeignTe…...
golang 数据库使用注意事项
1.在使用 fmt.Sprintf 构建 SQL 插入语句时，参数包含特殊符号（如引号 、分号 ;、反斜杠 \ 等），可能会导致 SQL 注入或插入失败的问题。为了解决这个问题，推荐使用占位符（如 $1, $2, 等）和参数化…...
Leetcode面试经典150题-221.最大正方形
解法都在代码里，不懂就留言或者私信 class Solution {/**本题一看就是典型的动态规划，要找以每个点为右下角的正方形的面积，然后取最大的这个题要注意找规律，我找到的规律如下：1.以第一行为右下角的，因为正…...
51单片机-DS1302，操作简述
DS1302的命令字（Command Byte）是由控制DS1302芯片的主机（通常是单片机，如51单片机）来生成和发送的。DS1302是一款实时时钟（RTC）芯片，它通过串行通讯接口与单片机进行数据交换。 DS1…...
Vue3+Vite+Echarts 出现Missing semicolon错误
使用的echarts代码如下: import * as echarts from echarts;type EChartsOption echarts.EChartsOption;var chartDom document.getElementById(main)!; var myChart echarts.init(chartDom); var option: EChartsOption;option {series: [{type: gauge,center: [50%, 6…...
iOS——frame和bounds的区别
把frame理解为占用区域，把bounds理解为边界。View在旋转过程中，其实自己的坐标系统并没有发生改变，bounds中的origin只能通过setBounds方法修改。 frame 定义了视图在其父视图坐标系统中的位置和大小。其坐标系是相对于俯视图的坐标系。 bou…...
Trm理论 3（注意力机制）
注意力机制（attention） 在使用LSTM，CNN等模型的时候，很难决定对于一个信息什么是重要的，什么是不重要的。因此注意力机制就是为了优化这一问题 怎么做注意力机制 注意力机制包含，查询对象（Q&…...
Vue2和Vue3项目创建的区别和 element ui 和element plus的导入方式
文章目录 创建项目Vue2Vue3 Vue2项目机构Vue 2 Element UI VUE3项目结构Vue 3 Element Plus 创建项目 Vue2 Vue CLI 3 及之前版本： 使用 vue-cli 创建项目： npm install -g vue/cli vue create my-project-vue2 cd my-project-vue2Vue3 Vue CLI 4…...
(215))
基于STM32的猫狗宠物喂养系统设计(微信小程序)(215)
文章目录 一、前言1.1 项目介绍【1】项目功能介绍【2】设计实现的功能【3】项目硬件模块组成1.2 设计思路【1】整体设计思路【2】ESP8266工作模式配置1.3 项目开发背景【1】选题的意义【2】可行性分析【3】参考文献【4】摘要【5】选题背景【6】国内外技术发展现状【7】研究的目…...
转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解，“超级…...
AI书签管理工具开发全记录（十九）：嵌入资源处理
1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...
作为测试我们应该关注redis哪些方面
1、功能测试 数据结构操作：验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化：测试aof和aof持久化机制，确保数据在开启后正确恢复。 事务：检查事务的原子性和回滚机制。 发布订阅：确保消息正确传递。 2、性…...
DAY 26 函数专题1
函数定义与参数知识点回顾：1. 函数的定义2. 变量作用域：局部变量和全局变量3. 函数的参数类型：位置参数、默认参数、不定参数4. 传递参数的手段：关键词参数5 题目1：计算圆的面积 任务： 编写一…...
React从基础入门到高级实战：React 实战项目 - 项目五：微前端与模块化架构
React 实战项目：微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇！在前 29 篇文章中，我们从 React 的基础概念逐步深入到高级技巧，涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...
CTF show 数学不及格
拿到题目先查一下壳，看一下信息 发现是一个ELF文件，64位的 用IDA Pro 64 打开这个文件 然后点击F5进行伪代码转换 可以看到有五个if判断，第一个argc ! 5这个判断并没有起太大作用，主要是下面四个if判断 根据题目…...
背包问题双雄：01 背包与完全背包详解（Java 实现）
一、背包问题概述 背包问题是动态规划领域的经典问题，其核心在于如何在有限容量的背包中选择物品，使得总价值最大化。根据物品选择规则的不同，主要分为两类： 01 背包：每件物品最多选 1 次（选或不选&#…...
理想汽车5月交付40856辆，同比增长16.7%
6月1日，理想汽车官方宣布，5月交付新车40856辆，同比增长16.7%。截至2025年5月31日，理想汽车历史累计交付量为1301531辆。 官方表示，理想L系列智能焕新版在5月正式发布，全系产品力有显著的提升，每…...
视觉slam--框架
视觉里程计的框架 传感器 VO--front end VO的缺点 后端--back end 后端对什么数据进行优化 利用什么数据进行优化的 后端是怎么进行优化的 回环检测 建图 建图是指构建地图的过程。 构建的地图是点云地图还是什么信息的地图？ 建图并没有一个固定的形式和算法…...
Angular中Webpack与ngx-build-plus 浅学
Webpack 在 Angular 中的概念 Webpack 是一个模块打包工具，用于将多个模块和资源打包成一个或多个文件。在 Angular 项目中，Webpack 负责将 TypeScript、HTML、CSS 等文件打包成浏览器可以理解的 JavaScript 文件。Angular CLI 默认使用 Webpack 进行项目…...