zoukankan      html  css  js  c++  java
  • 02-CSS基础与进阶-day12_2018-09-19-20-58-40_2018-09-19-21-22-26

    06开门见帅哥.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
             section {
                 width: 450px;
                 height: 300px;
                 background: url(3.jpg) no-repeat;
                 margin: 100px auto;
                 position: relative;
                 perspective: 1000px;
             }
    
             section div {
                 position: absolute;
                 top: 0;
                 width: 50%;
                 height: 100%;
                 background: url(bg.png);
                 transition: all 2s;
             }
    
             .door-l {
                 left: 0;
                 transform-origin: left;
             }
             .door-r {
                 right: 0;
                 transform-origin: right;
             }
    
             .door-l::before,.door-r::before {
                 content: "";
                 position: absolute;
                 width: 22px;
                 height: 22px;
                 border-radius: 50%;
                 border: 1px solid #000;
                top: 50%;
                transform: translateY(-50%);
             }
    
             .door-l::before {
                 right: 6px;
             }
    
             .door-r::before {
                 left: 6px;
             }
    
             /*鼠标经过section盒子 两个门盒子翻转*/
             section:hover  .door-l {
                   transform: rotateY(-130deg);
             }
    
             section:hover  .door-r {
                   transform: rotateY(130deg);
             }
        </style>
    </head>
    <body>
        <section>
            <div class="door-l"></div>
            <div class="door-r"></div>
        </section>
    </body>
    </html>
  • 相关阅读:
    函数
    vue中v-for循环如何将变量带入class的属性名中
    代码规范 前端导航
    2019.8.5 mysql 删除 更新
    2019.8.1
    2019.7.31 Xshell简单学习
    日常使用知识点
    FormData实现文件多次添加累加上传和选择删除
    上传图片
    验证码
  • 原文地址:https://www.cnblogs.com/HiJackykun/p/11074786.html
Copyright © 2011-2022 走看看