一 盒子的显隐
盒子的显隐操作控制盒子的显示状态。
盒子显隐的的两种方式如下：
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>
<!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>
二 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>
三 伪类设计边框
在没有学习伪类设计边框之前，我们设置边框是利用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>
<!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>