盒子显隐、阴影、形变、overflow、伪类边框

一盒子的显隐

盒子的显隐操作控制盒子的显示状态。

盒子显隐的的两种方式如下：

1.display: none  /*显示效果，display为none，消失的时候在页面中不占位，显示的时候在页面上占位*/
2.opacity:0; /*盒子的透明度，0-1* /

opacity透明度盒子显隐的布局问题：

　　一旦盒子显示在页面中，那么便代表着盒子在页面中有占位，就会影响到其他盒子的布局，所以对于显隐的盒子都需要进行定位布局处理即属性display。使用opacity的盒子的显隐，会覆盖原来位置的盒子（根据两个盒子的大小进行覆盖）。

盒子显隐的动画处理：

　　盒子的显隐可以通过控制opacity进行动画处理，display不能进行图画处理。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>盒子的显隐问题</title>
    <style>
        body{
            margin: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: orangered;
            margin-top: 10px; /*每个div之间都有一个间距，看起来清晰点*/
            text-align: center;
            line-height: 200px;
        }
        .div2{
            display: none;
        }
        .ctrl:hover~.div2{
            display:block ;
        }

    </style>
</head>
<body>
    <div class="ctrl">控制</div>
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</body>
</html>

利用disolay控制盒子的显隐

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>盒子的显隐问题</title>
    <style>
        body{
            margin: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: orangered;
            margin-top: 10px; /*每个div之间都有一个间距，看起来清晰点*/
            text-align: center;
            line-height: 200px;
        }
        .div2{
            position: absolute; /*为显隐的盒子加上定位布局*/
            opacity: 0; /*初始状态为隐藏*/
            transition: 2s; /*过度动画*/
        }
        .ctrl:hover~.div2{
            opacity: 1;  /*修改为显示状态，会覆盖原有位置的盒子(根据大小覆盖)*/
        }

    </style>
</head>
<body>
    <div class="ctrl">控制</div>
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</body>
</html>

利用opacity控制盒子的显隐，加上动画

二 overflow属性

overflow是为了解决超出盒子规定的显示区域外的内容的显示方式的属性。一共有三个参数，分别为：hidden、auto、scroll。

/*将超出规定区域的内容隐藏, 隐藏掉的内容无法直接查看*/
/*overflow: hidden;*/

/*不超出正常，超出滚动 两种不同的处理方式来处理超出规定区域的内容*/
/*overflow: auto;*/

/*一直以滚动方式处理超出规定区域的内容*/
/*overflow: scroll;*/

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>overflow轮播图</title>
    <style>
        .wrapper{
            width: 150px;
            height: 200px;
            margin: 20px auto;
            overflow: hidden;
            position: relative;
        }
        .big_img{
            position: absolute;
            width: 450px;
            height: 200px;
            left: calc(-200px * 0);
            transition: 1s;
        }
        .big_img div{
            float: left;
            width: 150px;
            height: 200px;
        }
        .img1{
            background-color: red;
        }
        .img2{
            background-color: green;
        }
        .img3{
            background-color: blue;
        }
        .wrapper:hover .big_img{
            left: calc(-150px * 2);
        }


    </style>
</head>
<body>
    <div class="wrapper">
        <div class="big_img">
            <div class="img1"></div>
            <div class="img2"></div>
            <div class="img3"></div>
        </div>
    </div>
</body>
</html>

overflow实现简单的轮播图

三伪类设计边框

在没有学习伪类设计边框之前，我们设置边框是利用border设置，但是这样设置的边框会有一个宽度，会影响整个布局，我们可以利用定位处理的方式，使其脱离文档流，实现边框在页面中不占位，但是这样走层级结构复杂，并且写起来也非常的不方便。如何设计一个不占位的边框就成为了一个问题，而伪类边框就是一个不占位的边框。

设计边框的两类伪类：before | after（两个伪类可以分别设计上下、左右边框。）

需要注意的是用此种方法设置的边框，一个盒子最多设置2条边框，上下一条，左右一条，如果一定要使用这种方法实现4条边框，可以利用两个重叠的盒子的方法，设置4条边框。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>伪类设计不占位的边框</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: orange;
            position: relative;
        }
        .box_son{
            width: 200px;
            height: 200px;
            position: relative;
        }
        /*before设计上边框*/
        .box:before{
            /*设置上边框*/
            content: "";
            width: 200px;
            height: 1px;
            background-color: black;
            /*控制边框的位置*/
            position: absolute; /*父相子绝*/
            top:0;
        }
        /*after设计左边框*/
        .box:after{
            /*设置左边框*/
            content: "";
            width: 1px;
            height: 200px;
            background-color: black;
            /*控制边框位置*/
            position: absolute;
            top:0;
        }
        /*before设计下边框*/
        .box_son:before{
            /*设置下边框*/
            content: "";
            width: 200px;
            height: 1px;
            background-color: black;
            /*控制边框的位置*/
            position: absolute; /*父相子绝*/
            bottom:0;
        }
        /*after设计右边框*/
        .box_son:after{
            /*设置右边框*/
            content: "";
            width: 1px;
            height: 200px;
            background-color: black;
            /*控制边框位置*/
            position: absolute;
            right: 0;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="box_son"></div>
    </div>
</body>
</html>

伪类设计边框的方法

四盒子阴影

盒子阴影操作是显示出一个盒子的阴影图层，这个盒子阴影是一个独立的显示图层，永远出现在（盒子显示图层）背景图层之下（即使背景层透明，也会被覆盖遮挡）。一个盒子可以绑定多个阴影图层，阴影图层可以相对于盒子显示图层进行偏移。

语法：box-shadow: x轴偏移 y轴偏移虚化程度阴影宽度阴影颜色

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>盒子阴影</title>
    <style>
        div{
            width: 150px;
            height: 200px;
            background-color: orange;
            margin:20px auto;
        }
        .box2{
            box-shadow:0 5px 20px 0 green ;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

盒子阴影简单版

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子阴影</title>
    <style>
        body {
            margin: 0;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;

            /*position: relative;*/
            /*top: 220px;*/

            /*position: absolute;*/
            /*top: 220px;*/

            /*margin-top: 220px;*/

            background-color: rgba(0,0,0,0);

            margin: 220px auto 0;

            /*x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色*/
            box-shadow: 220px 0 0 20px red, 0 -220px 0 -20px blue, -220px 0 200px 100px yellow, -220px -220px 0 0 cyan, 220px -220px 0 0 cyan;
        }

        .wrap {
            width: 200px;
            height: 260px;
            background-color: orange;
            margin: 50px auto;
        }
        .wrap:hover {
            box-shadow: 0 5px 20px -5px #424242;
        }
    </style>
</head>
<body>
    <!--<div class="box"></div>-->

    <div class="wrap"></div>
</body>
</html>

基于鼠标悬浮的盒子阴影

五 2d形变

2d形变的作用：使运动起来！！！

'''
# 形变参考点(盒子左上角原点)
transform-origin: x轴坐标 y轴坐标;

# 形变属性
transform: rotate() translate() scale();
# 旋转角度(deg) 偏移距离(px) 缩放比例(无单位)


1.形变多个效果要同时赋值给transform属性
transform: rotate(1080deg) translateX(-300px);  # ①
2.属性值之间的先后顺序往往也会导致过程的不同
transform: translateX(-300px) rotate(1080deg); # ②过程的运动效果与①不同
'''

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>形变案例1</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: orange;
            margin: 10px auto;
            font-size: 12px;
            text-align: center;
            color: white;
            transition: 1s linear; /*设置动画，使我们观察清楚*/
        }
        .box1:hover{
            /*transition: 1s linear; !*将15行隐去，此时设置动画各自的形变将不会有反弹结果*!*/
            transform: rotateX(1080deg);
        }
        .box2:hover{
            transform: rotateY(1080deg);
        }
        .box3:hover{
            transform: rotateZ(1080deg);
        }
        .box4:hover{
            transform: translateX(-300px);
        }
        .box5:hover{
            transform: translateY(200px);
        }
        .box6:hover{
            transform: scaleX(2);
        }
        .box7:hover{
            transform: scaleY(2);
        }
        .box8:hover{
            transform: scale(0.5); /*设置一个值，xy均采取该值，设置两个值则一个对一个*/
        }
    </style>
</head>
<body>
    <div class="box1">基于x轴的旋转</div>
    <div class="box2">基于y轴的旋转</div>
    <div class="box3">基于z轴的旋转</div>
    <div class="box4">基于x轴的偏移</div>
    <div class="box5">基于y轴的偏移</div>
    <div class="box6">基于x轴的缩放</div>
    <div class="box7">基于y轴的缩放</div>
    <div class="box8">基于x,y轴的缩放</div>
</body>
</html>

形变案例1

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>形变+阴影案例</title>
    <style>
        div{
            width: 150px;
            height: 200px;
            background-color: orange;
            margin: 10px auto;
            font-size: 12px;
            text-align: center;
        }
        .div2:hover{
            transform: translateY(-5px);
            box-shadow: 0 10px 20px 0 green;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2">鼠标悬浮此处，查看变化</div>
    <div class="div3"></div>
</body>
</html>

形变+阴影案例