伪类边框，字体图标，显隐，overflow，阴影，二维变形

Posted 2021-02-05 wrqysrt

伪类边框

设计一个不占位的边框 => 伪类 :before | :after

.box:before{content:";width:  height:  color:  left   bottom:  position:absolution }

.box:after{content:";width:  height:  color:  left   bottom:  position:absolution }

before after分别一个边框不占位必须绝对定位对应的box相对定位

 

字体图标

导入文件，定义对应的类名，设置外联link 后既可以用

 

显隐、

opacity:透明度 0~1设置所以可以做控制动画

而 display 只有none或者block因此不能做动画；瞬变 两者都必须 定位因为不影响其他盒子布局

 

overflow

结合绝对定位移动；通过控制hidden  auto  scroll 可以控制显示内容，滚动条；可以实现 与显隐相似效果；但是是滑动效果

类似图的滑动控制显示区域

 

 

阴影

box-shadow x轴 y轴  模糊度  宽度  颜色

通过五个参数进行阴影控制达到效果

1.盒子阴影是一个独立的显示图层, 永远出现在背景层之下(即使背景层透明, 也会被覆盖遮挡)

2.盒子可以绑定多套阴影图层

3.阴影图层永远相对于显示图层进行偏移

 

 

二维变形

transform-origin:50px 200px ;相对于盒子左上角的坐标

transition-form     rotateX(0deg)   translate() scale();

角度  平移  缩放 

顺序不同效果不同