时间戳

首页 > 解决方案 > 使用 Javascript 添加包含伪元素的类

javascript - 使用 Javascript 添加包含伪元素的类

问题描述

这是使用纯 CSS 创建的闪亮效果：

html, body{
    width: 100%;
    height: 100%;
    margin: 0px;
    display: table;
    background: #2f2f2f;
}

.body-inner{
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
}

.button-container{
    position: relative;
    overflow: hidden !important;
    display: inline-block;
}

.button-container a h3{
    display: inline-block;
    margin: auto;
    color: #fff;
    padding: 20px 25px;
    border: 1px solid;
   
}

.button-container a h3:after {
    content: "";
    position: absolute;
    top: -130%;
    left: -210%;
    width: 200%;
    height: 300%;
    opacity: 0;
    transform: skew(-40deg);
    background: rgba(255, 255, 255, 0.13);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%);
}

.button-container a h3:hover:after {
    opacity: 1;
    /* top: 0%; */
    left: 30%;
    transition-property: left, top, opacity;
    transition-duration: 0.7s, 0.7s, 0.15s;
    transition-timing-function: ease;
}
<body>
    <div class="body-inner">
        <div class="button-container">
            <a href="https://github.com/NadeeshaEranjan" target="_blank" class="btn">
                <h3>Hover on text to shine</h3>
            </a>
        </div>
    </div>
</body>

正如您所看到的，当您将鼠标悬停在容器上时，就会发生发光。

我想知道是否有使用 Javascript 添加闪亮效果的解决方案。

例如，如果我们想通过 Javascript 向容器添加一个类来查看发光效果怎么办。

我试图在发光所需的代码中创建一个包含所有转换的类，并使用 javascript 添加该类，container但由于发光是使用伪元素创建的，所以我几乎不可能有一点运气！

注意：我不希望 CSS 悬停。每当我使用 javascript 添加类时，我都想添加闪亮。

标签： javascripthtmlcss

解决方案

将类添加到 css 规则，移除悬停并切换类

var elem = document.querySelector('.button-container')
window.setInterval(()=>elem.classList.toggle('active'), 1000);
html, body{
    width: 100%;
    height: 100%;
    margin: 0px;
    display: table;
    background: #2f2f2f;
}

.body-inner{
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
}

.button-container{
    position: relative;
    overflow: hidden !important;
    display: inline-block;
}

.button-container a h3{
    display: inline-block;
    margin: auto;
    color: #fff;
    padding: 20px 25px;
    border: 1px solid;
   
}

.button-container a h3:after {
    content: "";
    position: absolute;
    top: -130%;
    left: -210%;
    width: 200%;
    height: 300%;
    opacity: 0;
    transform: skew(-40deg);
    background: rgba(255, 255, 255, 0.13);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%);
}

.button-container.active a h3:after{
    opacity: 1;
    /* top: 0%; */
    left: 30%;
    transition-property: left, top, opacity;
    transition-duration: 0.7s, 0.7s, 0.15s;
    transition-timing-function: ease;
}
<body>
    <div class="body-inner">
        <div class="button-container">
            <a href="https://github.com/NadeeshaEranjan" target="_blank" class="btn">
                <h3> text to shine</h3>
            </a>
        </div>
    </div>
</body>

推荐阅读