扑捉一只耿鬼（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】研究的目…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中，iftop是网络管理的得力助手，能实时监控网络流量、连接情况等，帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
Python：操作 Excel 折叠
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时，需结合业务场景设计数据流转链路，重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点： 一、核心对接场景与目标 商品数据同步 场景：将1688商品信息…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集，包含8种湿地亚类，该数据以0.5X0.5的瓦片存储，我们整理了所有属于中国的瓦片名称与其对应省份，方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求，由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面： 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限，形成层级清晰的管理网络…...
oracle与MySQL数据库之间数据同步的技术要点
Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异，它们的数据同步要求既要保持数据的准确性和一致性，又要处理好性能问题。以下是一些主要的技术要点： 数据结构差异 数据类型差异ÿ…...
【单片机期末】单片机系统设计
主要内容：系统状态机，系统时基，系统需求分析，系统构建，系统状态流图 一、题目要求 二、绘制系统状态流图 题目：根据上述描述绘制系统状态流图，注明状态转移条件及方向。 三、利用定时器产生时…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径：src/utils/timer.ts 完整代码： import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
三体问题详解
从物理学角度，三体问题之所以不稳定，是因为三个天体在万有引力作用下相互作用，形成一个非线性耦合系统。我们可以从牛顿经典力学出发，列出具体的运动方程，并说明为何这个系统本质上是混沌的，无法得到一般解…...