• 炫酷3D按钮

    一.预览

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

    二.代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>3D按钮title>
    7.     <style>
    8.         /* 通用样式设置，包括盒模型和基础字体 */
    9.         * {
    10.             box-sizing: border-box;
    11.         }
    12.  
    13.         body, html {
    14.             height: 100%;
    15.             width: 100%;
    16.             margin: 0;
    17.             font-family: Arial, sans-serif;
    18.             overflow: hidden;
    19.         }
    20.  
    21.         /* 按钮容器样式，居中显示 */
    22.         .container {
    23.             width: 680px;
    24.             margin: 0 auto;
    25.         }
    26.  
    27.         /* 基础按钮样式设置 */
    28.         .btn {
    29.             border: none;
    30.             position: relative;
    31.             background: none;
    32.             padding: 28px 90px;
    33.             text-transform: uppercase;
    34.             margin: 30px;
    35.             color: inherit;
    36.             letter-spacing: 2px;
    37.             font-size: 1em;
    38.             outline: none;
    39.             transition: all 0.4s;
    40.             cursor: pointer;
    41.         }
    42.  
    43.         /* 3D效果实现前的准备,让该伪元素能够被遮挡*/
    44.         .btn::after {
    45.             content: "";
    46.             position: absolute;
    47.             z-index: -1;
    48.             transition: all 0.4s;
    49.         }
    50.  
    51.         /* 设置3D透视效果 */
    52.         .btn-perspective {
    53.             perspective: 800px;
    54.             display: inline-block;
    55.         }
    56.  
    57.         /* 基础3D按钮样式 */
    58.         .btn-3d {
    59.             transform-style: preserve-3d;
    60.         }
    61.  
    62.         /* 第一个按钮的颜色和3D效果设置 */
    63.         .btn-one {
    64.             background-color: #E74C3C;
    65.         }
    66.  
    67.         .btn-one::after {
    68.             background-color: #621e16; /* 按钮下方的暗色阴影 */
    69.             transform: rotateX(90deg); /* 初始旋转状态 */
    70.         }
    71.  
    72.         .btn-one:hover {
    73.             transform: rotateX(-45deg); /* 鼠标悬停时的旋转 */
    74.         }
    75.  
    76.         /* 其他按钮的样式设置遵循相似的模式，改变颜色和旋转轴 */
    77.         
    78.         /* 第二个按钮样式 */
    79.         .btn-two {
    80.             background-color: pink;
    81.         }
    82.  
    83.         .btn-two::after {
    84.             background-color: rgb(130, 56, 69);
    85.             transform: rotateX(-90deg);
    86.         }
    87.  
    88.         .btn-two:hover {
    89.             transform: rotateX(45deg);
    90.         }
    91.  
    92.         /* 第三个按钮样式 */
    93.         .btn-three {
    94.             background-color: aqua;
    95.         }
    96.  
    97.         .btn-three::after {
    98.             background-color: rgb(26, 131, 131);
    99.             transform: rotateY(-90deg);
    100.         }
    101.  
    102.         .btn-three:hover {
    103.             transform: rotateY(25deg);
    104.         }
    105.  
    106.         /* 第四个按钮样式 */
    107.         .btn-four {
    108.             background-color: orange;
    109.         }
    110.  
    111.         .btn-four::after {
    112.             background-color: rgb(112, 78, 14);
    113.             transform: rotateY(90deg);
    114.         }
    115.  
    116.         .btn-four:hover {
    117.             transform: rotateY(-25deg);
    118.         }
    119.     style>
    120. head>
    121. <body>
    122.     <div class="container">
    123.         
    124.         <div class="btn-perspective">
    125.             <button class="btn btn-3d btn-one">财button>
    126.         div>
    127.  
    128.         <div class="btn-perspective">
    129.             <button class="btn btn-3d btn-two">神button>
    130.         div>
    131.  
    132.         <div class="btn-perspective">
    133.             <button class="btn btn-3d btn-three">到button>
    134.         div>
    135.  
    136.         <div class="btn-perspective">
    137.             <button class="btn btn-3d btn-four">了button>
    138.         div>
    139.     div>
    140. body>
    141. html>

     三.总结

            这个按钮的亮点就是灵活使用了3D变换的相关知识，比如变换原点，设置景深，3D旋转等，会了其中一个便可以举一反三，期待大家的修改指正。 

  • 相关阅读:
    按关键字采集淘特商品列表API接口H5
    优先发展非化石能源
    推荐一个C#开发的窗口扩展菜单，支持系统所以窗口
    爬虫学习笔记-scrapy爬取电影天堂(双层网址嵌套)
    TypeScript知识点
    owasp top 10
    Mysql备份工具innobackupex简单操作及参数说明
    ElasticSearch7.3学习(二十一)----Filter与Query对比、使用explain关键字分析语法
    阿里蚂蚁淘宝等多次一面面试面经
    spring-boot 请求参数校验：注解 @Validated 的使用、手动校验、自定义校验
  • 原文地址：https://blog.csdn.net/weixin_73810008/article/details/136116554