SEOLHEE

HTML CSS * { margin: 0; padding: 0; } .back { position: fixed; width: 100%; height: 100%; background: #fff; animation: back 1s infinite; } .heart { position: absolute; top: 50%; left: 50%; background: red; width: 50px; height: 50px; transform: rotate(-45deg); animation: beat 1s infinite; } .heart::after { content: ''; position: absolute; top: 0; left: 25px; background: red; width: 50px; height: ..

HTML CSS *, *::before, *::after { box-sizing: bolder-box; } html,body { height: 100%; } body { display: grid; align-items: center; justify-content: center; margin: 0; background-color: #000; } div { width: 300px; height: 300px; border-radius: 50%; box-shadow: 0 0 20px #fff, -20px 0 80px #f0f, 20px 0 80px #0ff, inset 0 0 50px #f0f, inset -50px 0 80px #0ff, inset 50px 0 300px #f0f, inset -50px 0 3..

HTML CSS body { background-color: #000; align-items: center; justify-content: center; display: flex; height: 100vh; } .watch__face { animation: summer 3s cubic-bezier(0.5, 0, 0.5, 1) alternate infinite; width: 125px; height: 125px; } .circle { width: 125px; height: 125px; border-radius: 50%; position: absolute; mix-blend-mode: screen; } .circle:nth-child(odd) { background-color: #90e0ef; } .circ..

See the Pen Tail Animation by seolhee313 (@seolhee313) on CodePen.