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'.........完整代码请登录后点击上方下载按钮下载查看
网友评论0