• lable与input连用特殊动作效果

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         /*label 可以扩大触点  label中有一个for属性需要与id连用  */
    10.         
    11.         * {
    12.             padding: 0;
    13.             margin: 0;
    14.         }
    15.         
    16.         input {
    17.             display: none;
    18.         }
    19.         
    20.         .container {
    21.             height: 300px;
    22.             width: 520px;
    23.             display: flex;
    24.             justify-content: space-between;
    25.             margin: 150px auto;
    26.             text-transform: uppercase;
    27.             perspective: 1000px;
    28.         }
    29.         
    30.         .label {
    31.             display: flex;
    32.             flex-direction: column;
    33.             justify-content: space-between;
    34.         }
    35.         
    36.         .label label {
    37.             width: 100px;
    38.             height: 90px;
    39.             text-align: center;
    40.             line-height: 90px;
    41.         }
    42.         
    43.         .label label:hover {
    44.             opacity: 0.8;
    45.         }
    46.         
    47.         .label label:nth-child(1) {
    48.             background: rebeccapurple;
    49.         }
    50.         
    51.         .label label:nth-child(2) {
    52.             background: yellowgreen;
    53.         }
    54.         
    55.         .label label:nth-child(3) {
    56.             background: palegreen;
    57.         }
    58.         
    59.         .container .table_body {
    60.             width: 400px;
    61.             height: 300px;
    62.             transform-style: preserve-3d;
    63.             transform: rotateX(0deg);
    64.             transition: all 1s ease;
    65.             display: flex;
    66.             justify-content: center;
    67.             align-items: center;
    68.             position: relative;
    69.         }
    70.         
    71.         .container .table_body .table_content {
    72.             position: absolute;
    73.             width: 350px;
    74.             height: 260px;
    75.             display: flex;
    76.             flex-direction: column;
    77.             justify-content: center;
    78.             text-align: center;
    79.             color: #fff;
    80.         }
    81.         
    82.         .container .table_body .table_content:nth-child(1) {
    83.             background: rebeccapurple;
    84.             transform: translateY(-130px) rotateX(90deg);
    85.         }
    86.         
    87.         .container .table_body .table_content:nth-child(2) {
    88.             background: yellowgreen;
    89.             transform: translateZ(130px);
    90.         }
    91.         
    92.         .container .table_body .table_content:nth-child(3) {
    93.             background: palegreen;
    94.             transform: translateY(130px) rotateX(-90deg);
    95.         }
    96.         
    97.         #top:checked~.table_body {
    98.             transform: rotateX(-90deg);
    99.         }
    100.         
    101.         #middle:checked~.table_body {
    102.             transform: rotateX(0deg);
    103.         }
    104.         
    105.         #bottom:checked~.table_body {
    106.             transform: rotateX(90deg);
    107.         }
    108.     style>
    109. head>
    110.  
    111. <body>
    112.     <div class="container">
    113.         <input type="radio" name="tab" id="top">
    114.         <input type="radio" name="tab" id="middle">
    115.         <input type="radio" name="tab" id="bottom">
    116.         <div class="table_body">
    117.             <div class="table_content">
    118.                 <h3>toph3>
    119.             div>
    120.             <div class="table_content">
    121.                 <h3>middleh3>
    122.             div>
    123.             <div class="table_content">
    124.                 <h3>bottomh3>
    125.             div>
    126.         div>
    127.         <div class="label">
    128.             <label for="top">toplabel>
    129.             <label for="middle">middlelabel>
    130.             <label for="bottom">bottomlabel>
    131.         div>
    132.     div>
    133. body>
    134.  
    135. html>

    lable与input连用特殊动作效果

     

  • 相关阅读:
    Vim命令总结
    C语言快速排序
    PIE-Engine APP:凉山州火灾高发地异常度分析系统
    Hbase解决ERROR: KeeperErrorCode = ConnectionLoss for /hbase/master报错
    【信号去噪】基于硬阈值、软阈值、半软阈值、Maxmin阈值、Garrote阈值小波变换实现心音去噪附matlab代码
    select并发服务器实现
    IBDP学生怎么写PS？
    Canal
    RabbitMQ(四)：RabbitMQ高级特性
    自动驾驶算法逻辑框架中的三层特性——“多”重，“自”主，“深”化演进
  • 原文地址：https://blog.csdn.net/weixin_58474273/article/details/134387580