扑捉一只耿鬼（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】研究的目…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式，可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
Spark 之 入门讲解详细版（1）
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室（Algorithms, Machines, and People Lab）开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目，8个月后成为Apache顶级项目，速度之快足见过人之处&…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
大语言模型如何处理长文本？常用文本分割技术详解
为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...
精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南
精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南 在数字化营销时代，邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天，我们将深入解析邮件打开率、网站可用性、页面参与时…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）
船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
虚拟电厂发展三大趋势：市场化、技术主导、车网互联
市场化：从政策驱动到多元盈利 政策全面赋能 2025年4月，国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》，首次明确虚拟电厂为“独立市场主体”，提出硬性目标：2027年全国调节能力≥2000万千瓦࿰…...
安卓基础（Java 和 Gradle 版本）
1. 设置项目的 JDK 版本 方法1：通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分，设置 Gradle JDK 方法2：通过 Settings File → Settings... (或 CtrlAltS)…...
在树莓派上添加音频输入设备的几种方法
在树莓派上添加音频输入设备可以通过以下步骤完成，具体方法取决于设备类型（如USB麦克风、3.5mm接口麦克风或HDMI音频输入）。以下是详细指南： 1. 连接音频输入设备 USB麦克风/声卡：直接插入树莓派的USB接口。3.5mm麦克…...