zoukankan      html  css  js  c++  java
  • html+css实现百叶窗

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>WindowShades</title>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    body{
    background: url(../img/wbg.png);
    }
    .box{
    800px;
    height: 360px;
    margin: 200px auto;
    /*溢出部分隐藏*/
    overflow: hidden;
    }
    .box img{
    640px;
    height: 360px;
    }
    li{
    list-style: none;
    155px;
    height: 360px;
    float: left;
    border-left: 5px solid white;
    box-shadow: -5px 0px 10px black;
    transition: all 0.5s linear;
    }
    /*鼠标悬浮在ul上,让ul变小*/
    .box ul:hover li{
    35px;
    }
    /*鼠标悬浮到某个li上,让li变大*/
    .box ul li:hover{
    635px;
    }
    </style>
    </head>
    <body>
    <div class="box">
    <ul>
    <li><img src="./../../正面.jpg" ></li>
    <li><img src="./../../反面.jpg" ></li>
    <li><img src="./../../xuanjiezhimou.jpg" ></li>
    <li><img src="./../../码上说故事_690.jpeg" ></li>
    <li><img src="./../../1.jpg" ></li>
    </ul>
    </div>
    </body>
    </html>

    资料来源:https://blog.csdn.net/qq_41866776/article/details/96695938

  • 相关阅读:
    Reverse Linked List
    Sqrt(x)
    Convert Sorted Array to Binary Search Tree
    Remove Linked List Elements
    Happy Number
    Length of Last Word
    Pow(x, n)
    Rotate Image
    Permutations
    Integer to Roman
  • 原文地址:https://www.cnblogs.com/ciscolee/p/12386704.html
Copyright © 2011-2022 走看看