炫酷3D按钮

这篇具有很好参考价值的文章主要介绍了炫酷3D按钮。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一.预览


        该样式有一种3D变换的高级感,大家可以合理利用这些样式到自己的按钮上 

炫酷3D按钮,html,css,前端,css3

二.代码

<!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旋转等,会了其中一个便可以举一反三,期待大家的修改指正。 文章来源地址https://www.toymoban.com/news/detail-827223.html

到了这里,关于炫酷3D按钮的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML5+CSS3+JS小实例:过年3D烟花秀

    实例:过年3D烟花秀 技术栈:HTML+CSS+JS 效果: 源码: 【HTML】 【CSS】

    2024年02月03日
    浏览(44)
  • h5(html5)+css3前端笔记二

    一、表格标签 表格的主要作用: 表格主要用于 显示、展示数据 ,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 1. table/table 用来定义表格的标签

    2024年02月14日
    浏览(60)
  • CSS3基础之3D转换(1),前端开发架构

    3. 透视perspective 3.1`translateZ` 4. 3D旋转`rotate3d` 5. 3D呈现`transform-style` 1. 三维坐标系 ======================================================================== 三维坐标系 其实就是指立体空间,立体空间是由3个轴共同组成的 x轴: 水平向右 注意: x 右边是正值,左边是负值 y轴: 垂直向下 注意:

    2024年04月13日
    浏览(43)
  • 【前端基础篇】HTML5 + CSS3 入门知识

    万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改(这是一项推荐标准、外语原文:W3C Recommendation) HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。 HTML5的设计目的是为了在移动设备上支持多媒体。 HTML5 简

    2024年02月09日
    浏览(76)
  • 前端 | ( 十一)CSS3简介及基本语法(上) | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月16日
    浏览(47)
  • HTML5+CSS3小实例:3D翻转Tab选项卡切换特效

    实例:3D翻转Tab选项卡切换特效 技术栈:HTML+CSS 效果: 源码: 【HTML】

    2024年02月04日
    浏览(56)
  • HTML5+CSS3+移动web 前端开发入门笔记(二)HTML标签详解

    排版标签用于对网页内容进行布局和样式的调整。下面是对常见排版标签的详细介绍: 标题使用至标签进行定义。定义最大的标题,定义最小的标题。具有align属性,属性值可以是:left、center、right。 将给定的HTML代码转换为Markdown格式的标题标签如下所示: 效果演示: H3:

    2024年02月07日
    浏览(65)
  • HTML5+CSS3小实例:带标题的3D多米诺人物卡片

    实例:带标题的3D多米诺人物卡片 技术栈:HTML+CSS 效果: 源码: 【html】

    2024年02月14日
    浏览(44)
  • 前端 | ( 十三)CSS3简介及基本语法(下)| 伸缩盒模型 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月16日
    浏览(61)
  • 前端 | ( 十二)CSS3简介及基本语法(中)| 变换、过渡与动画 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月16日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包