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>
登录后复制


HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号