扑捉一只耿鬼（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】研究的目…...
Cursor实现用excel数据填充word模版的方法
cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例，…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现，展示如何创建和管理多个 OkHttpClient 实例，分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 （忘了有没有这步了 估计有） 刷机程序 和 镜像 就不提供了。要刷的时…...
C++实现分布式网络通信框架RPC(2)——rpc发布端
有了上篇文章的项目的基本知识的了解，现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...
向量几何的二元性：叉乘模长与内积投影的深层联系
在数学与物理的空间世界中，向量运算构成了理解几何结构的基石。叉乘（外积）与点积（内积）作为向量代数的两大支柱，表面上呈现出截然不同的几何意义与代数形式，却在深层次上揭示了向量间相互作用的…...
【PX4飞控】mavros gps相关话题分析，经纬度海拔获取方法，卫星数锁定状态获取方法
使用 ROS1-Noetic 和 mavros v1.20.1， 携带经纬度海拔的话题主要有三个： /mavros/global_position/raw/fix/mavros/gpsstatus/gps1/raw/mavros/global_position/global 查看 mavros 源码，来分析他们的发布过程。发现前两个话题都对应了同一…...
02-性能方案设计
需求分析与测试设计 根据具体的性能测试需求，确定测试类型，以及压测的模块(web/mysql/redis/系统整体)前期要与相关人员充分沟通，初步确定压测方案及具体的性能指标QA完成性能测试设计后，需产出测试方案文档发送邮件到项目组&…...
组合模式：构建树形结构的艺术
引言：处理复杂对象结构的挑战 在软件开发中，我们常遇到需要处理部分-整体层次结构的场景： 文件系统中的文件与文件夹GUI中的容器与组件组织结构中的部门与员工菜单系统中的子菜单与菜单项组合模式正是为解决这类问题而生的设计模式。它允许我们将对象组合成树形结构来表示&…...
Java毕业设计：办公自动化系统的设计与实现
JAVA办公自动化系统 一、系统概述 本办公自动化系统基于Java EE平台开发，实现了企业日常办公的数字化管理。系统包含文档管理、流程审批、会议管理、日程安排、通讯录等核心功能模块，采用B/S架构设计，支持多用户协同工作。系统使用Spring B…...