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

代码语言:html

所属分类:其他

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

代码标签: css 太阳系 行星 轨道 运行 时钟 指针

下面为部分代码预览,完整代码请点击下载或在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'.........完整代码请登录后点击上方下载按钮下载查看

网友评论0