I have an animation that should run behind a link. Here's the example: https://codepen.io/ehbehr/pen/KKNbOvN and here's my html and css:
*, *:before, *:after { margin: 0; padding: 0; } .container { position: relative; width: 100%; height: 100vh; } .container > div { display: flex; justify-content: center; align-items: center; } .wrap { position: relative; width: 100%; height: 100vh; } .linky-thing { width: auto; display: flex; justify-content: center; align-items: center; z-index: 2; } .thankyou { color: magenta; text-decoration: none; white-space: nowrap; font-size: 2em; font-family: arial; } .pulser { position: absolute; display: block; width: inherit; padding-top: 20px; height: 2em; z-index: -1; } .pulser p { position: absolute; margin: 0; padding: 0; height: 20px; width: 20px; border-radius: 50%; z-index: -1; } .pulser p:before { content: ''; position: absolute; height: 15px; width: 15px; top: 0%; left: 0%; bottom: 0%; right: 0%; border-radius: 50%; border: 2px solid #2cfa1f; background-size: 100%; border-radius: 50%; opacity: 0; /*} .pulser p:hover:before {*/ animation-name: pulse; animation-duration: 1.5s; animation-delay: calc(var(--animation-order)/.33 * 100ms); animation-fill-mode: both; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes pulse { 0% { transform: scale(0); } 33% { opacity: 1; } 100% { transform: scale(2.7); opacity: 0; } }<div class="container"> <div class="wrap"> <div class="linky-thing"><a class="thankyou" href="https://wikipedia.org">lorum ipsum dolor sit amet colotum ecvo</a> <div class="pulser"> <p style="--animation-order: 3;" /> <p style="--animation-order: 2;" /> <p style="--animation-order: 1;" /> </div> </div> </div> </div>It consists of a CSS declaration which iterates 3 times, scaling up and fading out to look somewhat like the old RKO Radio Pictures tower cartoon. I want it to be triggered by hovering anywhere on the text link "over" it. These are the problems I've run into:
-
Using the :before pseudo-element, I can get it to animate but only when I place it in front of the text and then only when I hover directly over it, not anywhere on the link behind it, and since I've set the animation to opacity: 0; in the before state, nothing will clue someone to trigger the animation, hence wanting it to trigger no matter where on the text someone lands. Moreover, I want it to animate behind the text link. Currently, stacking it under the link eliminates the possibility of even triggering it by hovering.
-
The animation, re-jiggered from here https://codepen.io/dbenmore/pen/zVxrpB, works perfectly in that it runs 3 staggered instances of the declaration, but not in the :hover:before state, just in the :before state (notice the commented out markup in the pen). In the :hover:before state it runs only one instance. How do I get it to iterate all three times, instead of just once? (I considered "faking" the look with a png, but at that small size it would be too blurry).
-
For some extra fun, it would be great if instead of displaying in the middle of the text link as I have it now, it could originate from wherever on the text a visitor lands a cursor/taps the text. We're probably getting into some javascript here, (which is above my hobby grade, currently). If so, it will need to be called(?) by a class name rather than an ID as there are literally hundreds of links on the page to which it will apply. (It is a "thank you" page listing all of the sites I've used to help me build my site and to which the solution to this problem will be added.)
My (preliminary) thanks.
https://stackoverflow.com/questions/66615572/how-can-i-get-this-animation-to-trigger-when-anyplace-on-the-link-in-front-of-it March 13, 2021 at 11:59PM
没有评论:
发表评论