svg+js实现星星数字增减动画效果代码-html代码-BFW代码库

svg+js实现星星数字增减动画效果代码

代码语言：html

所属分类：其他

代码描述：svg+js实现星星数字增减动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
<style>
:root {
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

main {
  display: grid;
  place-content: center;
  padding: 2rem;
  min-height: 100svh;
  box-sizing: border-box;
  gap: 2em;
}

label {
  font-size: 1.25rem;
  display: inline-flex;
  margin-inline: auto;
  gap: 0.5em;
  align-items: center;
  
  span {
    font-weight: 600;
  }
  
  input {
    font: inherit;
    padding: 0.25em;
    width: 5rem;
    border-radius: 0.25em;
    background: var(--color-white);
    border: 2px solid hsl(210, 50%, 80%);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

:root {
  --font-sans: 'Source Sans 3', sans-serif;
  --font-serif: 'Source Serif 4', serif;

  --fluid-sizing-xxl: clamp(2rem, calc(1rem + 5vw), 5rem);
  --fluid-sizing-xl: clamp(1.75rem, calc(1rem + 2vw), 3rem);
  --fluid-sizing-l: clamp(1.5rem, calc(1rem + 1vw), 2rem);
  --fluid-sizing-m: clamp(1.125rem, calc(0.75rem + 0.5vw), 1.5rem);

  font-optical-sizing: auto;
  font-synthesis: font-weight;
}

html {
  line-height: 1.4;
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-text);
  background: var(--color-background-alt);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
  font-family: var(--font-serif);
  font-weight: 900;
  margin: 0;
  color: var(--color-text-heading);
} 

:root {
  .moon {
    display: block;
  }
  .sun {
    display: none;
  }
   --color-white: #fff;
  --hue-blue: 200;
  --hue-greenish: 100;
  --hue-red: 0;
  --hue-orange: 30;
  --hue-primary: var(--hue-blue);
  --hue-alt: var(--hue-greenish);
  --hue-danger: var(--hue-red);
  --hue-warning: var(--hue-orange);
  --color-text: hsl(var(--hue-primary), 100%, 10%);
  --color-text-heading: hsl(var(--hue-primary), 100%, 20%);
  --color-text-muted: hsl(var(--hue-alt), 10%, 40%);
  --color-background: hsl(var(--hue-primary), 30%, 9.........完整代码请登录后点击上方下载按钮下载查看