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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看