动画插件

您所在的位置：网站首页 › js自动触发submit › 动画插件

动画插件

2023-04-26 02:55| 来源: 网络整理| 查看: 265

react-countup地址效果Ant Motion（动效组件）">Ant Motion（动效组件）地址效果纯 CSS 实现数字动画示例一（手动触发）示例二（也可以用于 @keyframes 自动触发）示例三（携带小数）

react-countup

地址

https://github.com/glennreyes/react-countuphttps://www.npmjs.com/package/react-countup

效果

Ant Motion（动效组件）

地址

单元素动画 - 数值变化 - Ant Motion

效果

纯 CSS 实现数字动画

https://css-tricks.com/animating-number-counters/要写一个数字从 0-100 增长的动画效果，可能首先会想到用 setInterval，但是其实你可以试试 New School 的 CSS 解决方案。

示例一（手动触发）

Document @property --num { syntax: ''; initial-value: 0; inherits: false; } div { transition: --num 5s; counter-set: num var(--num); font: 800 40px system-ui; } div::after { content: counter(num); } div:hover { --num: 100; } body { margin: 2rem; } Hover the number.

示例二（也可以用于 @keyframes 自动触发） Document @property --num { syntax: ''; initial-value: 0; inherits: false; } div { animation: counter 5s infinite alternate ease-in-out; counter-reset: num var(--num); font: 800 40px system-ui; padding: 2rem; } div::after { content: counter(num); } @keyframes counter { from { --num: 0; } to { --num: 100; } }

示例三（携带小数）

Document @property --percent { syntax: ''; initial-value: 0; inherits: false; } @property --temp { syntax: ''; initial-value: 0; inherits: false; } @property --v1 { syntax: ''; initial-value: 0; inherits: false; } @property --v2 { syntax: ''; initial-value: 0; inherits: false; } div { font: 800 40px monospace; padding: 2rem; transition: --percent 1s; --temp: calc(var(--percent) * 100); --v1: max(var(--temp) - 0.5, 0); --v2: max((var(--temp) - var(--v1)) * 100 - 0.5, 0); counter-reset: v1 var(--v1) v2 var(--v2); } div::before { content: counter(v1) '.' counter(v2, decimal-leading-zero) '%'; } const genNumber = () => { document .querySelector('div') .style.setProperty('--percent', Math.random()); }; setInterval(genNumber, 2000); setTimeout(genNumber);

【本文地址】

动画插件

动画插件

今日新闻

推荐新闻