diff options
Diffstat (limited to 'animations.css')
| -rw-r--r-- | animations.css | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/animations.css b/animations.css new file mode 100644 index 0000000..765787a --- /dev/null +++ b/animations.css @@ -0,0 +1,77 @@ +/* +animation for a button to appear and glow on hover + */ +.glow-on-hover { + outline: none; + color: black; + cursor: pointer; + position: relative; + z-index: 0; + border-radius: 10px; +} + +.glow-on-hover:before { + content: ''; + /*background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);*/ + background: linear-gradient(45deg, #ff7300, #fffb00, #48ff00, #002bff, #7a00ff, #ff00c8); + position: absolute; + top: -2px; + left:-2px; + background-size: 400%; + z-index: -1; + filter: blur(5px); + width: calc(100% + 4px); + height: calc(100% + 4px); + animation: glowing 20s linear infinite; + opacity: 0; + transition: opacity .3s ease-in-out; + border-radius: 10px; +} + +.glow-on-hover:active { + color: #000; +} + +.glow-on-hover:active:after { + background: transparent; +} + +.glow-on-hover:hover:before { + opacity: 1; +} + +.glow-on-hover:after { + z-index: -1; + content: ''; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + border-radius: 10px; +} + +@keyframes glowing { + 0% { background-position: 0 0; } + 50% { background-position: 400% 0; } + 100% { background-position: 0 0; } +} + +/* +weekly specials conic border + */ +.conic-border { + --startDeg: 0deg; + + border: 7px solid; + border-image-slice: 1; + + border-image-source: conic-gradient( + from var(--startDeg, 0deg), + #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000 + ); + + display: grid; + place-content: center; + box-sizing: border-box; +}
\ No newline at end of file |