炫酷3D按钮
一.预览
该样式有一种3D变换的高级感，大家可以合理利用这些样式到自己的按钮上
二.代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D按钮</title><style>/* 通用样式设置，包括盒模型和基础字体 */* {box-sizing: border-box;}body, html {height: 100%;width: 100%;margin: 0;font-family: Arial, sans-serif;overflow: hidden;}/* 按钮容器样式，居中显示 */.container {width: 680px;margin: 0 auto;}/* 基础按钮样式设置 */.btn {border: none;position: relative;background: none;padding: 28px 90px;text-transform: uppercase;margin: 30px;color: inherit;letter-spacing: 2px;font-size: 1em;outline: none;transition: all 0.4s;cursor: pointer;}/* 3D效果实现前的准备,让该伪元素能够被遮挡*/.btn::after {content: "";position: absolute;z-index: -1;transition: all 0.4s;}/* 设置3D透视效果 */.btn-perspective {perspective: 800px;display: inline-block;}/* 基础3D按钮样式 */.btn-3d {transform-style: preserve-3d;}/* 第一个按钮的颜色和3D效果设置 */.btn-one {background-color: #E74C3C;}.btn-one::after {background-color: #621e16; /* 按钮下方的暗色阴影 */transform: rotateX(90deg); /* 初始旋转状态 */}.btn-one:hover {transform: rotateX(-45deg); /* 鼠标悬停时的旋转 */}/* 其他按钮的样式设置遵循相似的模式，改变颜色和旋转轴 *//* 第二个按钮样式 */.btn-two {background-color: pink;}.btn-two::after {background-color: rgb(130, 56, 69);transform: rotateX(-90deg);}.btn-two:hover {transform: rotateX(45deg);}/* 第三个按钮样式 */.btn-three {background-color: aqua;}.btn-three::after {background-color: rgb(26, 131, 131);transform: rotateY(-90deg);}.btn-three:hover {transform: rotateY(25deg);}/* 第四个按钮样式 */.btn-four {background-color: orange;}.btn-four::after {background-color: rgb(112, 78, 14);transform: rotateY(90deg);}.btn-four:hover {transform: rotateY(-25deg);}</style>
</head>
<body><div class="container"><!-- 每个按钮都包裹在具有3D透视效果的容器中 --><div class="btn-perspective"><button class="btn btn-3d btn-one">财</button></div><div class="btn-perspective"><button class="btn btn-3d btn-two">神</button></div><div class="btn-perspective"><button class="btn btn-3d btn-three">到</button></div><div class="btn-perspective"><button class="btn btn-3d btn-four">了</button></div></div>
</body>
</html>
三.总结
这个按钮的亮点就是灵活使用了3D变换的相关知识，比如变换原点，设置景深，3D旋转等，会了其中一个便可以举一反三，期待大家的修改指正。
相关文章：
炫酷3D按钮
一.预览 该样式有一种3D变换的高级感，大家可以合理利用这些样式到自己的按钮上 二.代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice…...
世界顶级名校计算机专业学习使用教材汇总
🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 💫个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-IauYk2cGjEyljid0 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…...
通过ffmpeg实现rtsp rtmp rtmps 推流
安卓端推流直接引用 implementation com.arthenica:mobile-ffmpeg-full:4.4 包 记得添加网络权限 <uses-permission android:name"android.permission.INTERNET" /> 基本方法： public static long executionId; Override protected void onCr…...
基于springboot+vue的高校学科竞赛系统(前后端分离)
博主主页：猫头鹰源码 博主简介：Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战，欢迎高校老师\讲师\同行交流合作 主要内容：毕业设计(Javaweb项目|小程序|Pyt…...
SQL 练习题目（入门级）
今天发现了一个练习SQL的网站--牛客网。里面题目挺多的，按照入门、简单、中等、困难进行了分类，可以直接在线输入SQL语句验证是否正确，并且提供了测试表的创建语句，也可以方便自己拓展练习，感觉还是很不错的一个网站&a…...
中科大计网学习记录笔记（十四）：多路复用与解复用 | 无连接传输：UDP
前言： 学习视频：中科大郑烇、杨坚全套《计算机网络（自顶向下方法 第7版，James F.Kurose，Keith W.Ross）》课程 该视频是B站非常著名的计网学习视频，但相信很多朋友和我一样在听完前面的部分发现信…...
机器学习 | 实现图像加密解密与数字水印处理
目录 实现窗口可视化 数字图像加密 窗口布局设置 基于混沌Logistic的图像加密 基于三重DES的图像加密 数字图像解密 窗口布局设置 基于混沌Logistic的图像解密 基于三重DES的图像解密 基于LSB的数字水印提取 窗口布局设置 水印的嵌入与提取 实现窗口可视化 这里…...
AJAX.
概念:AJAX：异步的 JavaScript 和 XML AJAX作用: 1.与服务器进行数据交换: 通过AJAX可以给服务器发送请求，并获取服务器响应的是数据 使用了AJAX和服务器进行通讯，就可以使用HTML和AJAX来替换JSP页面了 2.异步交互:可以在不重新加载整个页面的…...
Win32 获取EXE/DLL文件版本信息
CFileVersion.h #pragma once#include <windows.h> #include <string> #include <tchar.h>#ifdef _UNICODE using _tstring std::wstring; #else using _tstring std::string; #endif// 版本号辅助类 class CVersionNumber { public:// 无参构造CVersionN…...
回显服务器的制作方法
文章目录 客户端和服务器TCP和UDP的特点UDP socket api的使用DatagramSocketDatagramPacketInetSocketAddress API 做一个简单的回显服务器UDP版本的回显服务器TCP版本的回显服务器 客户端和服务器 在网络中，主动发起通信的一方是客户端，被动接受的这一方…...
w28DVWA-csrf实例
DVWA-csrf实例 low级别 修改密码：修改的密码通过get请求，暴露在url上。 写一个简单的html文件，里面伪装修改密码的文字，代码如下： <html><body><a href"http://dvwa:7001/vulnerabilities/csr…...
子网络划分与互通，上网行为审计
网络环境需求：在办公网络环境中，由于公司部门的划分，以及服务器、电脑、手机等设备类型，一般都需要划分多个网段，便于进行网络管理，并提升网络通信效率。各个子网段管理员控制设备的接入，子网段之间需要进行局域网通信，发送消息和文件，通常使用飞秋。服务器网段，禁止…...
如何快速删除node_module依赖包
利用npm：输入 npm install rimraf -g rimraf node_modules...
async/await 的用法
一、async和await定义 async 是异步的意思，而 await 是等待的意思，await 用于等待一个异步任务执行完成的结果。 1.async/await 是一种编写异步代码的新方法（以前是采用回调和 promise）。 2. async/await 是建立在 promise 的基础…...
JAVA面试汇总总结更新中ing
本人面试积累面试题 基础RocketMQSpring登录技能操作线程事务微服务JVMKAFKAMYSQLRedislinux 基础 1.面向对象的三个特征 封装，继承，多态，有时候也会加上抽象。 2.多态的好处 允许不同类对象对同一消息做出响应，即同一消息可以根…...
vue-利用属性（v-if）控制表单（el-form-item）显示/隐藏
表单控制属性 v-if 示例： 通过switch组件作为开关，控制表单的显示与隐藏 <el-form-item label"创建数据集"><el-switch v-model"selectFormVisible"></el-switch></el-form-item><el-form-item label&…...
数据结构-邻接矩阵
介绍 邻接矩阵，是表示图的一种常见方式，具体表现为一个记录了各顶点连接情况的呈正方形的矩阵。 假设一共有以下顶点，其连接关系如图所示 那么，怎么表示它们之间的连接关系呢？ 我们发现，各条边所连接的都…...
基于CNN-GRU-Attention的时间序列回归预测matlab仿真
目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 CNN（卷积神经网络）部分 4.2 GRU（门控循环单元）部分 4.3 Attention机制部分 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版…...
Docker部署Halo容器并结合内网穿透实现公网访问本地个人博客
文章目录 1. Docker部署Halo1.1 检查Docker版本如果未安装Docker可参考已安装Docker步骤：1.2 在Docker中部署Halo 2. Linux安装Cpolar2.1 打开服务器防火墙2.2 安装cpolar内网穿透 3. 配置Halo个人博客公网地址4. 固定Halo公网地址 本文主要介绍如何在CentOS 7系统使…...
纯css实现文字左右循环滚动播放效果
思路：由两个span模块组成，第一个为空的span内容，为的是实现第二个span内容缓慢出现的效果。 代码如下： <div class"scrollingStyle"><span class"first-marquee"></span><span class&q…...
PHP和Node.js哪个更爽?
先说结论，rust完胜。 php：laravel，swoole，webman，最开始在苏宁的时候写了几年php，当时觉得php真的是世界上最好的语言，因为当初活在舒适圈里，不愿意跳出来，就好比当初活在…...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中，有几种方法可以执行Shell指令： 1. 使用system()函数 这是最简单的方法，包含在stdlib.h头文件中： #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
Spring AI 入门：Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天，Spring AI 作为 Spring 生态系统的新生力量，正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务（如 OpenAI、Anthropic）的无缝对接&…...
Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强：基于微服务与容器化的解决方案
在大数据时代，海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构，在处理大规模数据抓取任务时展现出强大的能力。然而，随着业务规模的不断扩大和数据抓取需求的日益复杂，传统…...
论文阅读：LLM4Drive: A Survey of Large Language Models for Autonomous Driving
地址：LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂，正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...
Pydantic + Function Calling的结合
1、Pydantic Pydantic 是一个 Python 库，用于数据验证和设置管理，通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发（如 FastAPI）、配置管理和数据解析，核心功能包括： 数据验证：通过…...
Monorepo架构: Nx Cloud 扩展能力与缓存加速
借助 Nx Cloud 实现项目协同与加速构建 1 ） 缓存工作原理分析 在了解了本地缓存和远程缓存之后，我们来探究缓存是如何工作的。以计算文件的哈希串为例，若后续运行任务时文件哈希串未变，系统会直接使用对应的输出和制品文件。 2 …...
基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究
摘要：在消费市场竞争日益激烈的当下，传统体验营销方式存在诸多局限。本文聚焦开源AI智能名片链动2 1模式S2B2C商城小程序，探讨其在沉浸式体验营销中的应用。通过对比传统品鉴、工厂参观等初级体验方式，分析沉浸式体验的优势与价值…...
在Spring Boot中集成RabbitMQ的完整指南
前言 在现代微服务架构中，消息队列（Message Queue）是实现异步通信、解耦系统组件的重要工具。RabbitMQ 是一个流行的消息中间件，支持多种消息协议，具有高可靠性和可扩展性。 本博客将详细介绍如何在 Spring Boot 项目…...
Linux信号保存与处理机制详解
Linux信号的保存与处理涉及多个关键机制，以下是详细的总结： 1. 信号的保存 进程描述符（task_struct）：每个进程的PCB中包含信号相关信息。 pending信号集：记录已到达但未处理的信号（未决信号&a…...