当前位置： 首页 > article >正文

css button 点击效果

article 2026/1/17 14:34:42 

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>button点击效果</title><style>#container {display: flex;align-items: center;justify-content: center;}.pushable {position: relative;background: transparent;padding: 0px;border: none;cursor: pointer;outline-offset: 4px;outline-color: deeppink;transition: filter 250ms;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.shadow {position: absolute;top: 0;left: 0;height: 100%;width: 100%;background: hsl(226, 25%, 69%);border-radius: 8px;filter: blur(2px);will-change: transform;transform: translateY(2px);transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);}.edge {position: absolute;top: 0;left: 0;height: 100%;width: 100%;border-radius: 8px;background: linear-gradient(to right,hsl(248, 39%, 39%) 0%,hsl(248, 39%, 49%) 8%,hsl(248, 39%, 39%) 92%,hsl(248, 39%, 29%) 100%);}.front {display: block;position: relative;border-radius: 8px;background: hsl(248, 53%, 58%);padding: 16px 32px;color: white;font-weight: 600;text-transform: uppercase;letter-spacing: 1.5px;font-size: 1rem;transform: translateY(-4px);transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);}.pushable:hover {filter: brightness(110%);}.pushable:hover .front {transform: translateY(-6px);transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);}.pushable:active .front {transform: translateY(-2px);transition: transform 34ms;}.pushable:hover .shadow {transform: translateY(4px);transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);}.pushable:active .shadow {transform: translateY(1px);transition: transform 34ms;}.pushable:focus:not(:focus-visible) {outline: none;}</style>
</head><body><div id="container"><button class="pushable"><span class="shadow"></span><span class="edge"></span><span class="front">梦雨生生</span></button></div><script></script>
</body></html>

相关文章：

css button 点击效果

<!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><title>button点击效果</title><style>#container {display: flex;align-items: center;justify-content: center;}.pushable {position: relat…...

编程日记 2026/1/13 10:22:09

表征流体作用力的参数及其特性

在圆柱绕流研究中&#xff0c;这些参数分别表征流体作用力的关键特性&#xff0c;以下是详细解析&#xff1a; &#x1f4ca; 参数物理意义及工程应用 符号名称物理意义典型值范围&#xff08;参考&#xff09;工程意义 C d m a x C_{dmax} Cdmax​最大阻力系数瞬时阻力系数&a…...

编程日记 2025/12/4 13:29:05

Foundation Agent：深度赋能AI4DATA

2025年5月17日&#xff0c;第76期DataFunSummit&#xff1a;AI Agent技术与应用峰会将在DataFun线上社区举办。Manus的爆火并非偶然&#xff0c;随着基础模型效果不断的提升&#xff0c;Agent作为大模型的超级应用备受全世界的关注。为了推动其技术和应用&#xff0c;本次峰会计…...

编程日记 2026/1/15 18:47:13

Docker--Docker镜像原理

docker 是操作系统层的虚拟化&#xff0c;所以 docker 镜像的本质是在模拟操作系统。 联合文件系统&#xff08;UnionFS&#xff09; 联合文件系统&#xff08;UnionFS&#xff09; 是Docker镜像实现分层存储的核心技术&#xff0c;它通过将多个只读层&#xff08;Image Laye…...

编程日记 2026/1/12 23:35:54

SpringAI+DeepSeek大模型应用开发——2 大模型应用开发架构

目录 2.大模型开发 2.1 模型部署 2.1.1 云服务-开放大模型API 2.1.2 本地部署 搜索模型 运行大模型 2.2 调用大模型 接口说明 提示词角色 ​编辑 会话记忆问题 2.3 大模型应用开发架构 2.3.1 技术架构 纯Prompt模式 FunctionCalling RAG检索增强 Fine-tuning …...

编程日记 2026/1/10 7:07:16

Transformer 架构 - 编码器 (Transformer Architecture - Encoder)

1.Transformer 编码器整体结构 Transformer 编码器的结构相对直观：它由 N 个完全相同的编码器层 (Encoder Layer) 堆叠而成。 图1: Transformer 编码器整体结构示意图 (简化) 输入序列（例如，通过 embedding 层转换后的词向量）首先会加上位置编码，然后传入第一个编码器层…...

编程日记 2025/12/3 21:28:37

2.2/Q2，Charls最新文章解读

文章题目&#xff1a;Association of uric acid to high-density lipoprotein cholesterol ratio with the presence or absence of hypertensive kidney function: results from the China Health and Retirement Longitudinal Study (CHARLS) DOI&#xff1a;10.1186/s12882-…...

编程日记 2026/1/10 7:08:07

下拉框select标签类型

在我们很多页面里有下拉框的选择&#xff0c;这种元素怎么定位呢&#xff1f;下拉框分为两种类型&#xff1a;我们分别针对这两种元素进行定位和操作 select标签 &#xff1a; 通过select类处理。 非select标签 1、针对下拉框元素&#xff0c;如果是Select标签类型&#xff0c;…...

编程日记 2025/12/2 6:17:00

CentOS 7 linux系统从无到有部署项目

环境部署操作手册 一、Maven安装与配置 1. 下载与解压 下载地址&#xff1a;https://maven.apache.org/download.cgi?spm5238cd80.38b417da.0.0.d54c32cbnOpQh2&filedownload.cgi上传并解压解压命令&#xff1a; tar -zxvf apache-maven-3.9.9-bin.tar.gz -C /usr/loc…...

编程日记 2026/1/12 14:33:17

李飞飞团队新作WorldScore：“世界生成”能力迎来统一评测，3D/4D/视频模型同台PK

从古老神话中对世界起源的幻想&#xff0c;到如今科学家们在实验室里对虚拟世界的构建&#xff0c;人类探索世界生成奥秘的脚步从未停歇。如今&#xff0c;随着人工智能和计算机图形学的深度融合&#xff0c;我们已站在一个全新的起点&#xff0c;能够以前所未有的精度和效率去…...

编程日记 2026/1/10 7:08:11

如何在米尔-STM32MP257开发板上部署环境监测系统

本文将介绍基于米尔电子MYD-LD25X开发板&#xff08;米尔基于STM35MP257开发板&#xff09;的环境监测系统方案测试。 摘自优秀创作者-lugl4313820 一、前言 环境监测是当前很多场景需要的项目&#xff0c;刚好我正在论坛参与的一个项目&#xff1a;Thingy:91X 蜂窝物联网原型…...

编程日记 2026/1/10 7:08:15

MySQL之SQL优化

目录 1.插入数据 2.大批量插入数据 3.order by优化 4.group by优化 5.limit优化 6.count优化 count用法 7.update优化 1.插入数据 如果我们需要一次性往数据库表中插入多条记录&#xff0c;可以从以下三个方面进行优化 第一个:批量插入数据 Insert into tb_test va…...

编程日记 2026/1/12 13:39:55

python_level1.2

目录 一、变量 例如&#xff1a;小正方形——>大正方形 【1】第一次使用这个变量&#xff0c;所以说&#xff1a;定义一个变量length&#xff1b; 【2】&#xff1a;是赋值符号&#xff0c;不是等于符号。&#xff08;只有赋值&#xff0c;该变量才会被创建&#xff09;…...

编程日记 2026/1/11 21:35:00

Linux、Kylin OS挂载磁盘，开机自动加载

0.实验环境&#xff1a; 1.确定挂载目录&#xff0c;如果没有使用mkdir 进行创建&#xff1a; mkdir /data 2.查看磁盘 lsblk #列出所有可用的块设备df -T #查看磁盘文件系统类型 3.格式化成xfs文件系统 (这里以xfs为例&#xff0c;ext4类似) mkfs.xfs /dev/vdb 4.挂载到…...

编程日记 2026/1/10 7:08:27

FPGA-VGA

目录 前言 一、VGA是什么&#xff1f; 二、物理接口 三、VGA显示原理 四、VGA时序标准 五、VGA显示参数 六、模块设计 七、波形图设计 八、彩条波形数据 前言 VGA的FPGA驱动 一、VGA是什么&#xff1f; VGA&#xff08;Video Graphics Array&#xff09;是IBM于1987年推出的…...

编程日记 2026/1/12 12:01:21

java的lambda和stream流操作

Lambda 表达式 ≈ 匿名函数 &#xff08;Lambda接口&#xff09;函数式接口&#xff1a;传入Lambda表达作为函数式接口的参数 函数式接口 只能有一个抽象方法的接口 Lambda 表达式必须赋值给一个函数式接口&#xff0c;比如 Java 8 自带的&#xff1a; 接口名 作用 Functio…...

编程日记 2025/12/4 7:47:07

【嵌入式】【阿里云服务器】【树莓派】学习守护进程编程、gdb调试原理和内网穿透信息

目录 一. 守护进程的含义及编程实现的主要过程 1.1守护进程 1.2编程实现的主要过程 二、在树莓派中通过三种方式创建守护进程 2.1nohup命令创建 2.2fork()函数创建 2.3daemon()函数创建 三、在阿里云中通过三种方式创建守护进程 3.1nohup命令创建 3.2fork()函数创建 …...

编程日记 2026/1/12 22:38:47

数据结构学习笔记 ：树与二叉树详解

目录 树的基本概念二叉树的定义与特性二叉树的存储结构 3.1 顺序存储 3.2 链式存储二叉树遍历特殊二叉树类型总结与应用场景 一、树的基本概念 核心定义 树&#xff1a;由根节点和若干子树构成的层次结构。叶子节点&#xff08;终端节点&#xff09;&#xff1a;没有子节点的…...

编程日记 2025/12/6 2:56:39

前沿篇｜CAN XL 与 TSN 深度解读

引言 1. CAN XL 标准演进与设计目标 2. CAN XL 物理层与帧格式详解 3. 时间敏感网络 (TSN) 关键技术解析 4. CAN XL + TSN 在自动驾驶领域的典型应用...

编程日记 2026/1/12 13:36:08

七、LangChain Tool类参数对接机制解析：基于Pydantic的类型安全与流程实现

LangChain 的 Tool 类（包括 BaseTool 和 StructuredTool）通过 参数校验、输入解析、函数调用 的流程，将外部函数与 Agent 的逻辑对接。以下是其内部逻辑的详细解析： 1. 工具与函数对接的核心机制 (1) 工具的定义方式 LangChain 提供了两种主要方式定义工具： 继承 BaseTo…...

编程日记 2025/12/1 23:43:35

Spring-AI-alibaba 结构化输出

1、将模型响应转换为 ActorsFilms 对象实例&#xff1a; ActorsFilms package com.alibaba.cloud.ai.example.chat.openai.entity;import java.util.List;public record ActorsFilms(String actor, List<String> movies) { } GetMapping("/toBean")public Ac…...

编程日记 2025/12/1 4:17:27

AI大模型科普：从零开始理解AI的“超级大脑“，以及如何用好提示词？

大家好&#xff0c;小机又来分享AI了。 今天分享一些新奇的东西&#xff0c; 你有没有试过和ChatGPT聊天时&#xff0c;心里偷偷犯嘀咕&#xff1a;"这AI怎么跟真人一样对答如流&#xff1f;它真的会思考吗&#xff1f;" 或者刷到技术文章里满屏的"Token"…...

编程日记 2026/1/14 18:58:28

STM32单片机入门学习——第40节: [11-5] 硬件SPI读写W25Q64

写这个文章是用来学习的,记录一下我的学习过程。希望我能一直坚持下去,我只是一个小白,只是想好好学习,我知道这会很难&#xff0c;但我还是想去做&#xff01; 本文写于&#xff1a;2025.04.18 STM32开发板学习——第一节&#xff1a; [1-1]课程简介第40节: [11-5] 硬件SPI读…...

编程日记 2026/1/10 7:08:47

【Java学习笔记】关键字汇总

Java 关键字汇总 用于定义数据类型的关键字&#xff1a; classinterfaceenumbyteshortintlongfloatdoublecharbooleanvoid 用于定义数据值的关键字&#xff1a; truefalsenull 用于定义流程控制的关键字&#xff1a; ifelseswitchcasedefaultwhiledoforbreakcontinueretu…...

编程日记 2026/1/11 6:31:18

langgraph框架之初识

1.什么是langgraph&#xff1f; LangGraph 是一个用于构建可控代理的底层编排框架。在AI中&#xff0c;代理也就是执行动作的智能体&#xff0c;也就是agent。使用这个框架可以构建一个可以自由控制的智能执行体&#xff0c;它可以帮我们做许多事情&#xff0c;如下&#xff1…...

编程日记 2025/12/1 21:48:25

如何将 .txt 文件转换成 .md 文件

一、因为有些软件上传文件的时候需要 .md 文件&#xff0c;首先在文件所在的目录中&#xff0c;点击“查看”&#xff0c;然后勾选上“文件扩展名”&#xff0c;这个时候该目录下的所有文件都会显示其文件类型了。 二、这时直接对目标的 .txt 文件进行重命名&#xff0c;把后缀…...

编程日记 2026/1/14 17:17:27

pdfjs库使用记录1

import React, { useEffect, useState, useRef } from react; import * as pdfjsLib from pdfjs-dist; // 设置 worker 路径 pdfjsLib.GlobalWorkerOptions.workerSrc /pdf.worker.min.js; const PDFViewer ({ url }) > { const [pdf, setPdf] useState(null); const […...

编程日记 2025/12/1 5:49:38

Qt 创建QWidget的界面库(DLL)

【1】新建一个qt库项目 【2】在项目目录图标上右击&#xff0c;选择Add New... 【3】选择模版&#xff1a;Qt->Qt设计师界面类&#xff0c;选择Widget&#xff0c;填写界面类的名称、.h .cpp .ui名称 【4】创建C调用接口&#xff08;默认是创建C调用接口&#xff09; #ifnd…...

编程日记 2026/1/10 7:08:51

Django REST framework 并结合 `mixin` 的示例

下面为你提供一个使用 Django REST framework 并结合 mixin 的示例，该示例将实现一个简单的图书管理 API。 项目需求 我们要创建一个图书管理系统的 API，支持对图书信息的创建、读取、更新和删除操作。 实现步骤 1. 项目初始化 首先，确保你已经安装了 Django 和 Django…...

编程日记 2025/12/1 14:08:37

linux查看及修改用户过期时间

修改用户有效期 密码到期时间 sudo chage -E 2025-12-31 username sudo chage -M 180 username sudo chage -d $(date %F) username 查询用户密码到期时间 for user in $(cat /etc/passwd |cut -d: -f1); do echo $user; chage -l $user | grep "Password expires"; …...

编程日记 2025/12/1 23:46:49