炫酷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模板网!

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

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

相关文章

  • 炫酷UI前端效果的CSS生成工具

    它创造了一种全新的UI风格。来自世界各地的设计师已经在Dribbble和Behance上看到了引人注目的中性设计。 而且这个工具,可

    2024年02月12日
    浏览(39)
  • 10个超炫酷的前端3D开源项目

    本文将分享 10 个超炫酷的前端 3D 开源项目。从令人惊叹的视觉效果到富有创新概念的交互体验,这些项目展示了前端技术的无限可能。无论你是新手还是经验丰富的开发者,都值得一探究竟! 基于 Three.js 的前端 WebGL 页面开发合集,包含冰墩墩、数字城市、3D人像、车模展示

    2024年02月08日
    浏览(105)
  • css的rotate3d实现炫酷的圆环转动动画

    2.1 rotate3d rotate3d:rotate3d() CSS 函数定义一个变换,它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正,运动将为顺时针,如果为负,则为逆时针。 语法: 含义: x 类型,可以是 0 到 1 之间的数值,表示旋转轴 X 坐标方向的矢量。 y 类型,可以是 0

    2024年02月02日
    浏览(49)
  • html实现一个一闪一闪的按钮,CSS实现一个一闪一闪的按钮,Css闪烁点标

    动态 静态 全部例子 底部多加了几个过渡按钮

    2024年02月04日
    浏览(41)
  • 在登录界面中设置登录框、多选项和按钮(HTML和CSS)

      登录框(Input框)的样式: 这样设置后,登录框的宽度为200px,高度为30px,具有1px宽的边框,边框颜色为#ccc,圆角为5px,内边距为5px,下方留有10px的外边距。  多选项的样式(如复选框和单选框): 这样设置后,复选框和单选框之间会有5px的外边距,同时复选框和单选框

    2024年02月14日
    浏览(50)
  • HTML5+CSS3+JS小实例:快捷菜单图标按钮交互特效

    实例:快捷菜单图标按钮交互特效 技术栈:HTML+CSS+JS 字体图标库:font-awesome 效果: 源码: 【html】

    2024年02月17日
    浏览(49)
  • html web前端,点击发送验证码,按钮60秒倒计时

    html web前端,点击发送验证码,按钮60秒倒计时 eaca39b57a49d39f6c9e2f49f2559e9a.jpg

    2024年02月08日
    浏览(59)
  • HTML+CSS:3D轮播卡片

    实现了一个3D翻转的卡片动画,其中每个卡片都有不同的图片和不同的旋转角度。整个动画循环播放,无限次。整个页面的背景是一个占据整个屏幕的背景图片,并且页面内容被隐藏在背景图片之下。 这段代码设置了页面的基本样式,包括高度、居中、背景颜色和溢出部分的

    2024年01月23日
    浏览(57)
  • HTML+CSS+JS--3D相册

    🌱博客主页:大寄一场. 🌱系列专栏:前端 😘博客制作不易欢迎各位👍点赞+⭐收藏+➕关注 ​ 在本文中,我们将介绍如何使用HTML、CSS和JavaScript创建一个3D相册。这个相册将会展示一系列的照片,并且每个照片都会以3D效果呈现,使得整个相册更加生动和有趣。   先,我们

    2024年02月07日
    浏览(52)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包