artem_niko Posted December 7, 2022 Share Posted December 7, 2022 Good afternoon! I found some code: $anime-time: 8s; $box-size: 200px; $clip-distance: .05; $clip-size: $box-size * (1 + $clip-distance * 2); $path-width: 2px; $main-color: #69ca62; $codepen-logo-path: url('//blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png'); %full-fill { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .bb { @extend %full-fill; width: $box-size; height: $box-size; margin: auto; background: $codepen-logo-path no-repeat 50% / 70% rgba(#000, .1); color: $main-color; box-shadow: inset 0 0 0 1px rgba($main-color, .5); &::before, &::after { @extend %full-fill; content: ''; z-index: -1; margin: -1 * $clip-distance * 100%; box-shadow: inset 0 0 0 $path-width; animation: clipMe $anime-time linear infinite; } &::before { animation-delay: $anime-time * -.5; } // for debug &:hover { &::after, &::before { background-color: rgba(#f00, .3); } } } @keyframes clipMe { 0%, 100% {clip: rect(0px, $clip-size, $path-width, 0px); } 25% {clip: rect(0px, $path-width, $clip-size, 0px); } 50% {clip: rect($clip-size - $path-width, $clip-size, $clip-size, 0px); } 75% {clip: rect(0px, $clip-size, $clip-size, $clip-size - $path-width); } } ///// html, body { height: 100%; } body { position: relative; background-color: #0f222b; } *, *::before, *::after { box-sizing: border-box; } It plays some animation. How do I display this animation on the authorization form (UniLoginForm)? I understand what needs to be prescribed.bb, but it doesn't work. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted December 8, 2022 Share Posted December 8, 2022 Hello, These posts may help you, try. Although you already posted there, it seems in the last post... Quote Link to comment Share on other sites More sharing options...
artem_niko Posted December 8, 2022 Author Share Posted December 8, 2022 6 minutes ago, Sherzod said: Hello, These posts may help you, try. Although you already posted there, it seems in the last post... I know about these topics, I did it with their help. But, JS is used there, and in my first post of this topic, pure HTML + CSS, without JS. Therefore, the links above do not quite fit me, besides, I tried to do it by analogy - it did not work. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.