svg+js实现日食点击动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+js实现日食点击动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
#switch-theme {
width: 50vmin;
cursor: pointer;
}
:root {
--sun-clr: #f3d05e;
--dark-clr: hsl(246, 23%, 16%);
--light-clr: #F9F6EF;
--clr-foreground: var(--dark-clr);
/*hsl(0 0% 0%);*/
--clr-background: var(--light-clr);
}
@media (prefers-color-scheme: dark) {
:root {
--clr-background: var(--dark-clr);
--clr-foreground: var(--light-clr);
}
}
.light-theme {
--clr-foreground: var(--dark-clr);
--clr-background: var(--light-clr);
}
.dark-theme {
--clr-background: var(--dark-clr);
--clr-foreground: var(--light-clr);
}
.light-theme .img .toggle-sun {
transform: rotate(0.5turn);
}
.light-theme .sun-rays,
.light-theme .sun-core {
color: var(--sun-clr);
fill: var(--sun-clr);
}
.moon-mask,
.sun-core,
.sun-rays {
transition: 750ms ease-out;
transform-origin: center center;
}
.dark-theme .moon-mask {
r: 4.8;
cx: 12;
cy: 12;
}
.light-theme .moon-mask {
r: 5;
transform: rotate(-90deg);
cx: 20;
cy: 0;
}
.dark-theme .sun-core {
fill: color-mix(in lab, var(--sun-clr), orangered);
transform: rotate(-40deg);
}
.dark-theme .sun-rays {
transform: rotate(-180deg);
opacity: 0;
}
body {
font-family: "Open Sans", sans-serif;
display: grid;
place-content: center;
min-height: 100vh;
margin: 0;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0