Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it nowIntall Later
Intall Later
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it nowxxxxxxxxxx<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="ball"> <div id="shadows3D"></div></div></body></html>@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);*,:after,:before { box-sizing: border-box; padding: 0; margin: 0;}*,*::before,*::after { position: relative; box-sizing: border-box; margin: 0; padding: 0;}body { margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; height: 100vh; background: #777777; overflow: hidden; background-image: linear-gradient(145deg, rgba(255, 255, 220, 1), rgba(255, 255, 220, 0) 66%), linear-gradient(220deg, rgba(30, 45, 70, 0.75), rgba(30, 45, 70, 0) 70%); &::before { content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 50%; z-index: -1; background: linear-gradient(to top, #707070 33%, #ffffff33 100%); }}#ball { position: relative; width: 200px; height: 200px; border-radius: 50%; animation: rolling 5s infinite linear; &::before { content: ""; display: block; position: absolute; bottom: -5px; left: 25px; width: 200px; height: 30px; border-radius: 50%; background-image: radial-gradient(ellipse at 35% 75%, #000000 10%, #00000000 70%); z-index: -1; } &::after { content: ""; display: block; position: absolute; inset: 0; border-radius: 50%; background: #f090f0; background-image: radial-gradient( circle, #ffffff, #ffffff77 10%, #ffffff00 calc(10% + 1px), #ffffff00 20%, #ffffff77 calc(20% + 1px), #ffffff77 30%, #ffffff00 calc(30% + 1px), #ffffff00 40%, #ffffff77 calc(40% + 1px), #ffffff77 50%, #ffffff00 calc(50% + 1px), #ffffff00 60%, #ffffff77 calc(60% + 1px), #ffffff77 70%, #ffffff00 calc(70% + 1px), #ffffff00 80%, #ffffff77 calc(80% + 1px), #ffffff77 90%, #ffffff00 calc(90% + 1px), #ffffff00 100% ), conic-gradient(red, orange, yellow, green, blue, red); background-size: 200% 200%; z-index: -1; background-position: 30% 25%; animation: insetRolling 5s linear infinite; } #shadows3D { width: 100%; height: 100%; border-radius: 50%; box-shadow: inset -10px -10px 20px #333333bb, inset 5px 5px 15px #ffffff99, inset 10px 10px 20px #ffffff55, inset -5px 5px 10px rgba(30, 45, 70, 0.25), inset -3px -5px 10px #00000099; background: radial-gradient(circle at 20% 20%, rgba(255, 255, 200, 0.5), rgba(255, 255, 200, 0) 33%); } top: -50p;}@keyframes rolling { 0% { transform: translateX(-80vw); } 100% { transform: translateX(80vw); }}@keyframes insetRolling { 0% { transform: rotate(0deg); background-position: 40% 35%; } 45% { background-position: 20% 15%; }, 50% { transform: rotate(180deg); }, 55% { background-position: 20% 15%; } 100% { transform: rotate(360deg); background-position: 40% 35%; }}xxxxxxxxxxconsole.log("Event Fired")