css实现彩色圆球天体被黑洞吸入动画效果代码-html代码-BFW代码库

css实现彩色圆球天体被黑洞吸入动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现彩色圆球天体被黑洞吸入动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
        	margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #606060;
        }
        
        .content {		
        	width: 125vmin;
            height: 125vmin;
            background: 
        		radial-gradient(#fff0 0 52%, #0000002b calc(52% + 1px) 100%),
        		conic-gradient(from -45deg at 50% 50%, #000c, #fff0, #000c), 
        		radial-gradient( circle at 50% 50%, 
        			#000 0vmin 4vmin, 
        			#000e 4vmin 7vmin, 
        			#000d 7vmin 10vmin, 
        			#000c 10vmin 13vmin,
        			#000b 13vmin 16vmin, 
        			#000a 16vmin 19vmin, 
        			#0009 19vmin 22vmin, 
        			#0008 22vmin 25vmin, 
        			#0007 25vmin 28vmin, 
        			#0006 28vmin 31vmin, 
        			#0005 31vmin 34vmin, 
        			#0004 34vmin 37vmin, 
        			#0003 37vmin 40vmin, 
        			#0002 40vmin 43vmin, 
        			#0001 43vmin 46vmin, 
        			#fff0 calc(14vmin + 1px) 100vmin),
        			#666;
            border-radius: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            transform: rotate(90deg);
        	box-shadow: 1vmin 1vmin 3vmin -1vmin #242424, -1vmin -1vmin 3vmin -1vmin #a9a9a9;
        }
        	
        	
        .hole {
            position: absolute;
            background: #333;
            width: 2.5vmin;
            height: 2.5vmin;
            border-radius: 100%;
            box-shadow: 0 0 0 0.1vmin #85858520, 0.75vmin 0.75vmin 0.75vmin 0 #000c inset;
        }
        
        
        @keyframes spiral {
        	0% { opacity: 0;}
        	2.5% { opacity: 1;}
        	18% { width: 80%; height: 80%; }
        	20% { width: 70%; height: 70%; }
        	97.5% { width: 10%; height: 10%; transform: rotate(1800deg); opacity: 1; }
        	100% { width: 8%; height: 8%; transform: rotate(1900deg) translateX(3vmin) scale(0.5); opacity: 0.5; }
        }
        
        @keyframes ball {
        	100% { transform: rotate(-1800deg); filter: brightness(0.4); }
        }
        
        
        .marble {
            position: absolute;
            width: 100%;
            height: 100%;
        	opacity: 0;
        	animation: spiral 10s ease-in 0s infinite;
        }
        
        .marble:before {
            content: "";
            position: absolute;
            width: 10%;
            height: 10%;
            top: 46%;
        	--clr: #ff0000;
            background: radial-gradient(circle at.........完整代码请登录后点击上方下载按钮下载查看