adding a class containing pseudo-element using Javascript
Question
Here is a shining effect created with pure 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>
as you see when you hover over the container the shining occurs.
I wonder if there is a solution to add the shining effect using Javascript.
For instance, what if we want to see the shining effect by adding a class via Javascript to the container.
I have tried to create a class of all transitions in the code needed for the shining and add the class using javascript to the container but since the shining is created using a pseudo-element it's almost impossible for me to have a bit of luck!
Note: I don't want the CSS hover. I want to add shining whenever I add a class using javascript.
2 answers
solution1
2 ACCPTED 2020-08-20 20:05:52
Add a class to the css rule, remove the hover and toggle the class
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>
solution2
1 2020-08-20 20:13:43
Instead of using the css :hover selector use directly a class (let say animate ). If you click on the button Animate me , the class will be added to the h3 and animate it:
function animate() { document.querySelector('h3').classList.add("animate"); } document.getElementById('animate').addEventListener("click", animate);
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:animate: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> <button id="animate"> Animate me </button> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.