炫酷3D按钮

news2024/11/28 4:47:34

一.预览


        该样式有一种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旋转等,会了其中一个便可以举一反三,期待大家的修改指正。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1448441.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

URL编码算法:解决特殊字符在URL中的烦恼

引言&#xff1a; URL编码算法是一种将URL中的特殊字符转换为特定格式的编码方式。它在网络传输中起到了保护数据安全与完整性的重要作用。本文将深入探讨URL编码算法的优点与缺点&#xff0c;并介绍它在Web开发、网络安全等方面的应用。 URL编码解码 | 一个覆盖广泛主题工具…

Decian 12.x基于LNMP安装phpIPAM(IP管理系统)

phpipam是一个开源Web IP地址管理应用程序&#xff08;IPAM&#xff09;。其目标是提供轻便&#xff0c;且有用的IP地址管理系统。它是基于PHP的应用程序&#xff0c;具有MySQL数据库后端&#xff0c;使用jQuery库&#xff0c;ajax和HTML5 / CSS3功能。 在Debian 12中&…

20240212请问如何将B站下载的软字幕转换成为SRT格式?

20240212请问如何将B站下载的软字幕转换成为SRT格式&#xff1f; 2024/2/12 12:47 百度搜索&#xff1a;字幕 json 转 srt json srt https://blog.csdn.net/a_wh_white/article/details/120687363?share_token2640663e-f468-4737-9b55-73c808f5dcf0 https://blog.csdn.net/a_w…

PHP开发日志 ━━ 深入理解三元操作与一般条件语句的不同

概况 三元运算符的功能与“if…else”流程语句一致。 在一般情况下&#xff0c;三元操作替换if条件语句可以精简代码&#xff0c;并且更为直观&#xff0c;但是在下面的情况中使用三元操作将会返回警告。 借图&#xff1a; 案例 比如原代码&#xff1a; class classA{publ…

Vue3.0(六):VueX 4.x详解

Vuex4状态管理 什么是状态管理 在开发中&#xff0c;我们的应用程序需要处理各种各样的数据&#xff0c;这些数据需要保存在应用程序的某一个位置&#xff0c;对于这些数据的管理&#xff0c;就是 状态管理目前前端项目越来越复杂&#xff0c;多组件共享同一数据的状态很常见…

高校危化试剂管理:Java与SpringBoot的革新

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

机器学习2---逻辑回归(基础准备)

逻辑回归是基于线性回归是直线分的也可以做多分类 ## 数学基础 import numpy as np np.pi # 三角函数 np.sin() np.cos() np.tan() # 指数 y3**x # 对数 np.log10(10) np.log2(2) np.e np.log(np.e) #ln(e)# 对数运算 # log(AB) log(A) logB np.log(3*4)np.log(3)np.log(4) #…

HTML5+CSS3+移动web——HTML 基础

目录 一、标签语法 HTML的基本框架 1. 标题标签 2. 段落标签 3. 换行和水平线 4. 文本格式化标签 5. 图像标签 6. 路径 相对路径 绝对路径 7. 超链接标签 8. 音频 9. 视频 10. 注释 二、标签结构 一、标签语法 HTML 超文本标记语言——HyperText Markup Langua…

【大数据Hive】hive 表设计常用优化策略

目录 一、前言 二、hive 普通表查询原理 2.1 操作演示说明 2.1.1 创建一张表&#xff0c;并加载数据 2.1.2 统计3月24号的登录人数 2.1.3 查询原理过程总结 2.2 普通表结构带来的问题 三、hive分区表设计 3.1 区表结构 - 分区设计思想 3.2 操作演示 3.2.1 创建分区表…

如何使用六图一表七种武器

六图一表七种武器用于质量管理&#xff1a; 描述当遇到问题时应该用那张图来解决&#xff1a; 一、如果题目说出了质量问题需要找原因&#xff1f; 解&#xff1a;用因果图&#xff0c;因果图也称石川图或鱼骨图 二、如果要判断过程是否稳定受控&#xff1f; 解&#xff1a…

谷歌浏览器,如何将常用打开的网站创建快捷方式到电脑桌面?

打开谷歌浏览器&#xff0c;打开想要创建的快捷方式的网页 点击浏览器右上角的三个点&#xff1a; 点击选择【更多工具】 选择【创建快捷方式】 然后&#xff0c;在浏览器上方会弹出一个框&#xff0c;让命名此创建的快捷方式的名称 命名好之后&#xff0c;再点击【创…

Python-web自动化-Playwright的学习

Python-web自动化-Playwright的学习 1. 安装playwright2. 界面等待3. 自动化代码助手4. 定位元素1. css selector定位2. xpath定位3. get_by_XXX定位 5. 操作元素1. 单选框、复选框2. select下拉框3. 网页操作4. 框架页 frame5. 窗口切换6. 截屏 1. 安装playwright pip命令 pi…

【Windows】常用快捷键

文章目录 文本编辑相关快捷键窗口管理和操作系统快捷键浏览器快捷键其他常用快捷键系统无响应快捷键 快捷键&#xff1a;shortcut key、keyboard shortcuts。 文本编辑相关快捷键 这部分是非常常用的内容&#xff0c;在很多编辑器中都适用的&#xff0c;比如csdn的markdown和t…

Python 数据分析库之polars使用详解

概要 数据分析是现代应用程序和业务决策的关键组成部分。Python 作为一门强大的编程语言,拥有丰富的数据处理库和工具,其中之一就是 Polars。Polars 是一个现代化的数据操作和分析库,它提供了高性能的数据操作功能,支持链式方法调用,并且兼容 Pandas 和 Arrow 格式。本文…

每日一练——月落乌啼算钱

题目&#xff1a; 举例&#xff1a; 输入&#xff1a;6&#xff0c;输出&#xff1a;8.00 最开始看到这道题还有点蒙&#xff0c;但是看到他的公式想起了斐波那契数列 1,1,2,3,5,8...... 由前两个数相加得到第三个数&#xff0c;为An2An1An。 可以得出这个题目中所给的通项就…

Hive的Join连接、谓词下推

前言 Hive-3.1.2版本支持6种join语法。分别是&#xff1a;inner join&#xff08;内连接&#xff09;、left join&#xff08;左连接&#xff09;、right join&#xff08;右连接&#xff09;、full outer join&#xff08;全外连接&#xff09;、left semi join&#xff08;左…

猫头虎分享:localhost和127.0.0.1的区别是什么?

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

Java+SpringBoot构建智能捐赠管理平台

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

(AtCoder Beginner Contest 334) --- F - Christmas Present 2 -- 题解

F - Christmas Present 2 F - Christmas Present 2 题目大意&#xff1a; 思路解析&#xff1a; 因为他是顺序前往每个孩子的家&#xff0c;前往时必须要带一个礼物&#xff0c;并且最多只能带k个礼物&#xff0c;所以它每次前往最多k个孩子之后就要回到初始点重新出发。…

linux应用 进程间通信之消息队列(POSIX)

1、前言 1.1 定义 POSIX消息队列是Linux中一种进程间通信机制&#xff0c;允许进程通过发送和接收消息来交换数据。这些消息在队列中按优先级顺序存储和传递。 1.2 应用场景 当多个进程需要共享或交换数据时。实现进程间的解耦和异步通信。作为缓冲区&#xff0c;处理速度不…