div + css 遮罩层实现边线围绕渐显的特效_html/css

div + css 遮罩层实现边线围绕渐显的特效_html/css_WEB-ITnose
php中文网
发布： 2016-06-21 09:01:01
原创
1535人浏览过
在b站上看到个不错的小特效，自己模仿者写了一下，触发事件都很明了了，大家一看就会明白的
效果如下：
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>shade box</title>        <style type="text/css">            * {                margin: 0px;                padding: 0px;                box-sizing: border-box;                font-family: 'Microsoft Yahei';                font-size: 14px;            }            nav {                width: 500px;                margin: 10px auto;            }            .nav {                list-style: none;            }            .nav li {                float: left;                margin: 0px 5px;            }            .nav_element {                position: relative;            }                 /*过度时间为0.5s*/                       .shade {                position: absolute;                left: 0px;                top: 0px;                transition: 0.5s;                width: 0px;                height: 20px;                border-radius: 5px 5px;                /* 遮罩起始宽度为0 溢出隐藏*/                overflow: hidden;                z-index: 1;                visibility: hidden;            }            /*外廓事先已经画好 只是以为父容器宽度为0溢出隐藏不可视而已*/            .outer {                position: absolute;                left: 0px;                top: 0px;                width: 60px;                height: 20px;                border: 1px solid #00a1d6;                border-radius: 20px 20px;            }            /*z-index -1 让外廓可以覆盖此边线*/            .content {                border:1px solid #ccc;                width: 60px;                height: 20px;                border-radius: 20px 20px;                text-align: center;                line-height: 20px;                background-color: #fff;                position: relative;                z-index: -1;            }        </style>    </head>    <body>        <nav>            <ul>                <li>                    <div onmouseover="showOuter(this)" onmouseout="hideOuter(this)">                        <div>                            <div></div>                        </div>                        <p>首页</p>                    </div>                </li>                <li>                    <div onmouseover="showOuter(this)" onmouseout="hideOuter(this)">                        <div>                            <div></div>                        </div>                        <p>视频</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>                    </div>                </li>                <li>                    <div onmouseover="showOuter(this)" onmouseout="hideOuter(this)">                        <div>                            <div></div>                        </div>                        <p>新闻</p>                    </div>                </li>                <li>                    <div onmouseover="showOuter(this)" onmouseout="hideOuter(this)">                        <div>                            <div></div>                        </div>                        <p>画廊</p>                    </div>                </li>                <li>                    <div onmouseover="showOuter(this)" onmouseout="hideOuter(this)">                        <div>                            <div></div>                        </div>                        <p>直播</p>                    </div>                </li>                 <li>                    <div onmouseover="showOuter(this)" onmouseout="hideOuter(this)">                        <div>                            <div></div>                        </div>                        <p>One</p>                    </div>                </li>                 <li>                    <div onmouseover="showOuter(this)" onmouseout="hideOuter(this)">                        <div>                            <div></div>                        </div>                        <p>Enge</p>                    </div>                </li>            </ul>            <script type="text/javascript">                //获取某导航元素的遮罩子元素 修改其宽度                function showOuter(nav_element) {                    var shade = nav_element.getElementsByClassName('shade')[0];                    shade.style.visibility = 'visible';                    shade.style.width = '60px';                }                function hideOuter(nav_element) {                    var shade = nav_element.getElementsByClassName('shade')[0];                    shade.style.visibility = 'hidden';                    shade.style.width = '0px';                }            </script>        </nav>    </body></html>
登录后复制