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%, 99%);
  --color-background-secondary: hsl(var(--hue-primary), 20%, 90%);
  --color-background-tertiary: hsl(var(--hue-primary), 20%, 98%);
  --color-background-intense: hsl(var(--hue-primary), 0%, 100%);
  --color-background-alt: hsl(var(--hue-alt), 30%, 97%);
  --color-interactive: hsl(var(--hue-primary), 100%, 40%);
  --color-interactive-secondary: hsl(var(--hue-primary), 50%, 70%);
  --color-interactive-muted: hsl(var(--hue-primary), 50%, 95%);
  --color-button-outer-background: var(--color-interactive-secondary);
  --color-button-inner-background: var(--color-background);
  --color-button-text: var(--color-interactive);
  --color-tile-text: var(--color-text);
  --color-tile-success: var(--color-success);
  --color-tile-background: var(--color-background);
  --color-tile-border: hsl(var(--hue-primary), 20%, 50%);
  --color-tile-cell-divider: var(--color-background-secondary);
  --color-tile-shadow: var(--color-text);
  --shadow-opacity: 0.2;
  --color-grid-background: hsl(var(--hue-primary), 40%, 80%);
  --color-cell-background: var(--color-interactive-muted);
  --color-victory-panel-background: var(--color-interactive-muted);
  --color-victory-panel-border: hsl(var(--hue-primary), 50%, 80%);
  --color-victory-panel-highlight: hsl(var(--hue-primary), 100%, 50%);
  --color-success: hsl(var(--hue-primary), 80%, 38%);
  --color-danger: hsl(var(--hue-danger), 100%, 50%);
  --color-warning: hsl(var(--hue-warning), 78%, 50%);
}
@media.........完整代码请登录后点击上方下载按钮下载查看