炫酷3D按钮

GIS小小白

已于 2024-02-14 22:31:25 修改

阅读量1.3k

点赞数 4

文章标签： html css 前端 css3

于 2024-02-14 22:18:02 首次发布

本文链接：https://blog.csdn.net/weixin_73810008/article/details/136116554

版权

一.预览

该样式有一种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>