zoukankan      html  css  js  c++  java
  • 案例-开门效果CSS3

    <style>
            .door {
                 288px;
                height: 153px;
                border: 2px solid #333;
                margin: 150px auto;
                background: url(../img/01.png) no-repeat;
                position: relative;
                perspective: 500px;  /* 设置盒子透明 */
            }
            .door-l,
            .door-r {
                position: absolute;
                top: 0;
                 50%;
                height: 100%;
                background: pink;
                transition:all 1s;   /* 盒子过渡效果 */
            }
            .door-r{
                right: 0;
                border-left: 2px solid #333;
                transform-origin:right;  /* 设置盒子沿right边旋转 */
            } 
            .door-l {
                left: 0;
                border-right: 2px solid #333;
                transform-origin:left; /* 设置盒子沿left边旋转 */
            }
            .door-l::before,
            .door-r::before {
                content: "";
                position: absolute;
                top:50%;
                 20px;
                height: 20px;
                border: 1px solid #000;
                border-radius: 50%;
                transform:translateY(-50%); /* 设置盒子垂直方向 */
            }
            .door-r::before{
                left:5px;
            }
            .door-l::before{
                right:5px;      /* 设置门扣的位置 */
            }
            .door:hover .door-l{
                transform:rotateY(-130deg);  
                
            }
            .door:hover .door-r{
                transform:rotateY(130deg);   /* 设置门沿Y轴旋转的角度 */
                
            }
        </style>
    </head>
    
    <body>
        <div class="door">
            <div class="door-l"></div>
            <div class="door-r"></div>
        </div>
    </body>
    

      

  • 相关阅读:
    1.3、python内置类型(0529)
    1.2、Python快速入门(0529)
    1.1、Python快速入门(0529)
    mini Linux制作过程(25/01)
    samba基本应用24-4及示例
    Apache+Php+Mariadb+NFS+discuz
    U盘中病毒了怎么办
    bind9安装配置
    负载均衡的实现(1)
    MySQL之优化
  • 原文地址:https://www.cnblogs.com/qtbb/p/11431551.html
Copyright © 2011-2022 走看看