字体图标,盒子显隐,overflow属性,伪类设计边框,盒子阴影2d形变
''' fa框架: http://fontawesome.dashgame.com/ 下载 => 引入css文件 引入字体图标库 <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css"> 设置预定好的类名 <i class="fa fa-**"></i> '''
''' 1.显示效果 display: none; # 没有任何显示效果 消失的时候在页面中不占位,显示的时候在页面中占位 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子显隐</title> <style> div{ width: 100px; height: 100px; background-color: yellow; margin-top: 10px; } .d1{ display: none; } .ctrl:hover ~ .d1{ display: block; } </style> </head> <body> <div class="ctrl">控制</div> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> </body> </html> 2.盒子透明度 opacity: 0; # 所在区域留白 消失显示在页面中都占位 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子显隐</title> <style> div{ width: 100px; height: 100px; background-color: yellow; margin-top: 10px; } .d2{ opacity: 0; } .ctrl:hover ~ .d2{ opacity: 1; } </style> </head> <body> <div class="ctrl">控制</div> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> </body> </html> 只要盒子在页面中有占位,就会影响其他盒子布局, 所以显隐的盒子都需要进行定位处理 将上述代码修改如下: .d1{ display: none; position: absolute; } .d2{ opacity: 0; position: absolute; } opacity可以动画处理, display不能动画处理 opacity能过渡动画 => 0~1之间可以找出多个中间点, 比如0.5 display不能过渡动画 => 原因none与block是两个状态点(中间找不出存在的第三个状态点) '''
''' 解决: 超出盒子规定的显示区域外的内容的处理方式 /*将超出规定区域的内容隐藏, 隐藏掉的内容无法直接查看*/ /*overflow: hidden;*/ /*不超出正常,超出滚动*/ /*overflow: auto;*/ /*一直以滚动方式处理超出规定区域的内容*/ /*overflow: scroll;*/ '''
''' 设计边框 => 在页面中占位 => 让其定位处理 => 脱离文档流 => 不占位 => 层级结构复杂 设计一个不占位的边框,在页面中不占位 => 伪类 :before | :after 操控文本 .box { width: 200px; height: 200px; background-color: red; /*给伪类边框提供定位参考系*/ position: relative; } .box:before { content: ""; /*上下边框*/ width: 180px; height: 1px; background-color: green; /*控制边框位置*/ position: absolute; bottom:0px; left: 10px; } '''
''' 注意: 1.盒子阴影是一个独立的显示图层, 永远出现在背景层之下(即使背景层透明, 也会被覆盖遮挡) 2.盒子可以绑定多套阴影图层 3.阴影图层永远相对于显示图层进行偏移 语法: box-shadow: x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色, ...; 虚化程度采用的是镜像界面,从中心往外扩 阴影宽度:四个边都会增加设置的宽度 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子阴影</title> <style> body{ margin: 0; } .box{ width: 200px; height: 200px; /*盒子阴影是一个独立的显示图层, 永远出现在背景层之下(即使背景层透明, 也会被覆盖遮挡)*/ /*background-color: rgba(0,0,0,0);*/ background-color: red; margin: 220px auto; /*验证阴影图层永远相对于显示图层进行偏移*/ /*position: relative;*/ /*top: 200px;*/ /*box-shadow: 0 0 0 0 orange;*/ box-shadow: 220px 0 0 20px orange,-220px 0 200px 0 green,0 220px 0 0 yellow,0 -220px 0 0 black, 220px 220px 0 0 wheat; } </style> </head> <body> <div class="box"></div> </body> </html> 设置盒子阴影: .wrap { width: 200px; height: 260px; background-color: orange; margin: 50px auto; } .wrap:hover { box-shadow: 0 5px 20px -5px #424242; } '''
''' # 形变参考点(盒子左上角为原点) 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>形变</title> <style> .b{ width: 150px; height: 150px; background-color: orange; margin: 10px auto; font: 100 50px/150px "STSong"; color: blue; text-align: center; transition: 1s linear; } /*设置形变参考点*/ /*.b1{*/ /*transform-origin: 0 0;*/ /*}*/ /*b1旋转形变 角度(deg)*/ .b1:hover{ transform: rotate(1080deg); } /*b2绕x轴旋转*/ .b2:hover{ transform: rotateX(1080deg); } /*b3绕y轴旋转*/ .b3:hover{ transform: rotateY(1080deg); } /*b4绕z轴旋转*/ .b4:hover{ transform: rotateZ(1080deg); } /*b5沿着x轴偏移*/ .b5:hover{ transform: translateX(300px); } /*b6沿着Y轴偏移*/ .b6:hover{ transform: translateY(300px); } /*1.形变多个效果要同时赋值给transform属性 2.属性值之间的先后顺序往往也会导致过程的不同 */ .b7:hover{ transform: translateX(300px) rotate(1080deg); } .b8:hover{ transform: rotate(1080deg) translateX(300px); } /*缩放比例*/ /*b9 x,y同时扩大两倍*/ .b9:hover{ transform: scaleX(2) scaleY(2); } .b10:hover{ /*b10 x,y同时扩大;两倍*/ /*transform: scale(2);*/ /*b10 x扩大两倍,y缩小为原来一半*/ transform: scale(2,0.5); } </style> </head> <body> <div class="b b1">1</div> <div class="b b2">2</div> <div class="b b3">3</div> <div class="b b4">4</div> <div class="b b5">5</div> <div class="b b6">6</div> <div class="b b7">7</div> <div class="b b8">8</div> <div class="b b9">9</div> <div class="b b10">10</div> </body> </html> '''