HTML5基础加强css样式篇（css过度效果：界面的浮层遮罩和消失）（十九）

来源：互联网发布：软件产品质量验收标准编辑：程序博客网时间：2024/05/18 03:46

1最终效果图：

1.静态页面布局：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        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;        }    </style></head><body><div class="wrapper">    <div class="header">        <img src="img/icon_list.png" alt="">    </div>    <div class="mask">    </div></div><script type="text/javascript"></script></body></html>

2.逻辑代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        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;        }    </style></head><body><div class="wrapper">    <div class="header">        <img src="img/icon_list.png" alt="" id="btnToggle">    </div>    <div class="mask" id="mask">    </div></div><script type="text/javascript">//    单击导航图标显示浮层，需要有过渡效果        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");        }</script></body></html>

3最终代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        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;*/        }    </style></head><body><div class="wrapper">    <div class="header">        <img src="img/icon_list.png" alt="" id="btnToggle">    </div>    <div class="mask" id="mask">    </div></div><script type="text/javascript">//    单击导航图标显示浮层，需要有过渡效果        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");        }</script></body></html>

0 0