html5 遮罩过渡效果,HTML5基础增强css样式篇（css过分效果：界面的浮层遮罩和消失）（十九）...

1最终效果图：javascript

.

css

1.静态页面布局：html

html, body{

height: 100%;

/*html, body 默认高度 0 */

margin: 0;

}

.wrapper{

width: 480px;

margin: 0 auto;

background-color: yellow;

height: 100%;

position: relative;

}

.header{

background-color: orange;

}

.header img{

vertical-align: middle;

margin: 8px;

}

.mask{

background-color: rgba(0, 0, 0, .5);

position: absolute;

width: 100%;

height: 100%;

top: 0;

}

2.逻辑代码：

html, body{

height: 100%;

/*html, body 默认高度 0 */

margin: 0;

}

.wrapper{

width: 480px;

margin: 0 auto;

background-color: yellow;

height: 100%;

position: relative;

}

.header{

background-color: orange;

}

.header img{

vertical-align: middle;

margin: 8px;

}

.mask{

background-color: rgba(0, 0, 0, .5);

position: absolute;

width: 0;

height: 100%;

top: 0;

}

/*显示浮层*/

.mask-show{

width: 100%;

transition-duration: 1s;

}

// 单击导航图标显示浮层，须要有过渡效果

var btnToggleDom = document.querySelector("#btnToggle");

var maskDom = document.querySelector("#mask");

btnToggleDom.onclick = function () {

maskDom.classList.toggle("mask-show");

}

// 单击浮层，浮层消失

maskDom.onclick = function () {

maskDom.classList.toggle("mask-show");

}

3最终代码：

html, body{

height: 100%;

/*html, body 默认高度 0 */

margin: 0;

}

.wrapper{

width: 480px;

margin: 0 auto;

background-color: yellow;

height: 100%;

position: relative;

}

.header{

background-color: orange;

}

.header img{

vertical-align: middle;

margin: 8px;

}

.mask{

background-color: rgba(0, 0, 0, .5);

position: absolute;

width: 0;

height: 100%;

top: 0;

/* 当过分时间设置在开始状态时就会变成双向过分*/

transition-duration: 1s;

}

/*显示浮层*/

.mask-show{

width: 100%;

/*transition-duration: 1s;*/

}

// 单击导航图标显示浮层，须要有过渡效果

var btnToggleDom = document.querySelector("#btnToggle");

var maskDom = document.querySelector("#mask");

btnToggleDom.onclick = function () {

maskDom.classList.toggle("mask-show");

}

// 单击浮层，浮层消失

maskDom.onclick = function () {

maskDom.classList.toggle("mask-show");

}