css+js实现太阳系行星轨道运行时钟指针效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：css+js实现太阳系行星轨道运行时钟指针效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body{
        	margin:0 auto;
        	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cfilter id='filter-ynk201gnq'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='1' seed='1'%3E%3C/feTurbulence%3E%3CfeColorMatrix values='-0.3 3.3 2.4 2.1 -4.1 0 -2.6 2.4 3.7 -3.7 -1 -0.9 -4.9 0.7 -1.7 -2.2 2.7 -3.5 -1.8 4.5'%3E%3C/feColorMatrix%3E%3C/filter%3E%3C!-- %3Crect width='100%25' height='100%25' fill='rgb(43,173,230)' class='bgRect'%3E%3C/rect%3E --%3E%3Crect width='100%25' height='100%25' filter='url(%23filter-ynk201gnq)'%3E%3C/rect%3E%3C/svg%3E");
        	overflow:hidden;
        	height:100vh;
        	width:100vw;
        }
        .container{
        	position:absolute;
        	top:50%;
        	left:50%;
        	transform:translate(-50%,-50%);
        	height:100px;
        	width:100px;
        }
        .sun{
        	position:absolute;
        	top:50%;
        	left:50%;
        	transform:translate(-50%,-50%);
        	height:100px;
        	width:100px;
        	border-radius:50%;
        /* 	border:4px solid blue; */
        	box-shadow:0 0 15px rgba(255,255,255,1), inset 0 0 15px #000;
        	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cfilter id='filter-zao54kfb'%3E%3CfeTurbulence baseFrequency='0.1' numOctaves='6' seed='666'/%3E%3CfeColorMatrix type='hueRotate' values='0'%3E%3Canimate attributeName='values' from='0' to='720' dur='5s' repeatCount='indefinite' /%3E%3C/feColorMatrix%3E%3CfeColorMatrix values='1.7 -0.7 1.8 4.5 0.4 1.8 1.4 -4.6 3.7 0.5 -0.7 -4.6 -3.6 -4.8 -1.9 1.4 -0.7 0.3 2.2 1.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='rgb(175,195,88)' class='bgRect'/%3E%3Crect width='100%25' height='100%25' filter='url(%23filter-zao54kfb)'/%3E%3C/svg%3E");
        }
        .mercury{
        	position:absolute;
        	top:50%;
        	left:50%;
        	transform:translate(-50%,-100%);
        	transform-origin: center bottom;
        	height:70%;
        	width:5%;
        	background-image: linear-gradient(rgba(0,0,0,0.5),#fff);
        }
        .mercury > span{
        	content:'';
        	position:absolute;
        	top:0%;
        	left:50%;
        	transform:translate(-50%,-50%);
        	height:15px;
        	width:15px;
        	border-radius:50%;
        	box-shadow:0 0 10px rgba(255,255,255,0.2), inset 0 0 5px #000;
        	background-image: url("data:image/svg+xml,%3Csvg class='mercury' xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cfilter id='mercury'%3E%3CfeTurbulence baseFrequency='0.3' numOctaves='9' seed='1'%3E%3C/feTurbulence%3E%3CfeColorMatrix values='-2.4 -4.9 -1.6 2.5 0 -1.9 -2.4 2.8 0.9 -3.3 -3.3 0.5 3.4 0.1 -2.9 -1.9 2.3 0.4 0.9 -0.5'%3E%3C/feColorMatrix%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='rgb(219,65,47)' class='bgRect'%3E%3C/rect%3E%3Crect width='100%25' height='100%25' filter='url(%23mercury)'%3E%3C/rect%3E%3C/svg%3E");
        }
        .venus{
        	position:absolute;
        	top:50%;
        	left:50%;
        	transform:translate(-50%,-100%);
        	transform-origin: center bottom;
        	height:90%;
        	width:5%;
        	background-image: linear-gradient(rgba(0,0,0,0.5),#fff);
        }
        .venus > span{
        	content:'';
        	position:absolute;
        	top:0%;
        	left:50%;
        	transform:translate(-50%,-50%);
        	height:17px;
        	width:17px;
        	border-radius:50%;
        	box-shadow:0 0 10px rgba(255,255,255,0.2), inset 0 0 5px #000;
        	background-image: url("data:image/svg+xml,%3Csvg class='jupiter' xmlns='http://www.w3.org/2000/svg' style='background-color:tan' height='100%25' width='100%25'%3E%3Cfilter id='filter489'%3E%3CfeTurbulence baseFrequency='0.001 0.08' numOctaves='6' seed='3' /%3E%3CfeColorMatrix values='0.3 0.3 -0.6 0.8 1.7 0.2 -0.9 -0.4 -0.1 -0.9 0.8 0.9 -0.8 -0.7 -1.5 0.2 1.9 1.2 1.1 -1.1' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23filter489)' /%3E%3C/svg%3E");
        }
        .earth{
        	position:absolute;
        	top:50%;
        	left:50%;
        	transform:translate(-50%,-100%);
        	transform-origin: center bottom;
        	height:120%;
        	width:5%;
        	background-image: linear-gradient(rgba(0,0,0,0.5),#fff);
        	transition:100ms;
        }
        .earth > .mo.........完整代码请登录后点击上方下载按钮下载查看