A gently floating bubble. I hope to be able to use this more in the following challenges.
A Pen by Chris Bolson on CodePen.
Created
August 26, 2024 19:04
-
-
Save awakeningspirit/b78285d3a15bf47a7250e15d42e102d5 to your computer and use it in GitHub Desktop.
CPC - Gently floating bubble
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <span class="bubble"></span> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| --bg-body-rgb: 0,0,0; | |
| height: 100vh; | |
| margin: 0; | |
| display: grid; | |
| place-content: center; | |
| background: rgb(var(--bg-body-rgb)); | |
| } | |
| .bubble { | |
| --_float-distance: -20px; | |
| --_float-speed: 3000ms; | |
| --_size: 200px; | |
| width: var(--_size); | |
| aspect-ratio: 1/1; | |
| border-radius: 50%; | |
| position: relative; | |
| backdrop-filter: blur(5px); | |
| box-shadow: | |
| inset 0 0.13vmin blue, | |
| inset 0 0.18vmin orange, | |
| inset 0.1vmin 0.1vmin orange; | |
| animation: floating var(--_float-speed) ease-in-out infinite; | |
| } | |
| .bubble::before, | |
| .bubble::after { | |
| content: ""; | |
| position: absolute; | |
| border-radius: inherit; | |
| } | |
| .bubble::before { | |
| inset: 0; | |
| backdrop-filter: blur(12px); | |
| background-image: conic-gradient( | |
| from -25deg at 80% 20%, | |
| transparent 85%, | |
| rgba(255,255,255,0.7) 94%, | |
| transparent 94% | |
| ); | |
| filter: blur(4px); | |
| } | |
| .bubble::after { | |
| inset: -3px; | |
| background: rgba(var(--bg-body-rgb), 0.2); | |
| backdrop-filter: blur(3px); | |
| z-index: -1; | |
| } | |
| @keyframes floating { | |
| 0%,100% { | |
| translate: 0; | |
| } | |
| 50% { | |
| translate: 0 var(--_float-distance, -10px); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment