1、平时在结合css的伪类实现平滑过渡时,最开始时也许会这样写,当鼠标移动到a标签时.submit-btn-icon 元素向左移动20px(动画效果~~)
a:hover .submit-btn-icon {
transition: left 2s;
left:200px;
}
.submit-btn-icon {
position: absolute;
top: 2px;
left: 170px;
}
这样写随之会带来一个问题就是当鼠标移开a标签时 submit-btn-icon 元素会离开回到原来的位置即向右移动20px,速度很快,非常僵硬,我们希望它也能缓慢的回到开始的位置,要是先这种效果只需要对上面的css做一个简单的更改即可
a:hover .submit-btn-icon {
left:200px;
}
.submit-btn-icon {
position: absolute;
transition: left 2s;
top: 2px;
left: 170px;
}
只需要将伪类的渐变transition移动到目标元素中去即可
2、如何利用定位方式进行页面布局,左右固定布局,中间自适应宽带
body{position:relative}
.left{position:absolute;left:0;top:0;width:100px;height:200px;}
.right{position:absoulte;right:0;top:0;widht:160px;height:200px;}
.center{height:200px;margin-left:100px;margin-right:160px;}
//原理利用绝对定位会使元素脱离文档流,center元素宽度自适应填满全屏,然后使用margin属性来调整其宽度
3、其实遮罩层也可以用css来实现
核心点在于将遮罩层外层的container容器设置为posititon:absoulte 重点在于接下来对坐标的设置
top:0;left:0;bottom:0;right:0; 然后将body元素上设置为position:relative;这四个定位属性一设置就会自动将这个container扩展覆盖整个body,实现全覆盖的效果