首页 > 其他 > 详细

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

时间:2019-01-21 20:43:05      阅读:183      评论:0      收藏:0      [点我收藏+]

伪类边框

设计一个不占位的边框 => 伪类 :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();

角度  平移  缩放 

顺序不同效果不同

 

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

原文:https://www.cnblogs.com/wrqysrt/p/10300712.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!