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

집

웹 프론트엔드

HTML 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:01 AM

在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>                    </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>

로그인 후 복사

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.