基本信息
源码名称：html5 classList.toggle 渐变样式示例源码
源码大小：1.17KB
文件格式：.html
开发语言：CSS
更新时间：2018-08-15
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍

百度前端学院设计师学院任务一，渐变样式 效果

实现任务一所需功能，下划线由中间向两边展开为难点 


<html>
    <head>
        <style type="text/css">
        .text{
            position: relative; /* 使用::after */
            font-size: 20px;
            transition:1s; /* 过渡时间 */
            padding-bottom: 8px;  /* 文字与下划线的间隔 */
        }

        .text::after{
            content:"";
            width: 0;
            height: 2px;
            background: blue;
            position: absolute;
            top: 100%;
            left: 50%;
            transition: all 1s;
        }

        .blue{
            color:blue;
        }

        .blue:after{
        left: 0%;
        width: 100%;
        }
        </style>

    </head>
    <body>
        <span id="variable" class="text">前端学院</span><br /><br />
        <div id="underline"></div> 
        <button type="button" id="btn" >切换样式</button>
        <script>
            var x = document.getElementById('variable');
            var btn = document.getElementById('btn');
            btn.addEventListener("click",function(){
                x.classList.toggle("blue"); /* 添加的是class */
            }, false)
        </script>
    </body>
</html>