有一个很好的脚本，不幸的是它只适用于 codepen.io 网站。
我正在尝试将其移植到 SVG。起初我使用<animate>and <animateTransform>。但是有些事情没有解决，所以我决定将其更改为 SVG+CSS。但是，它也被证明是错误的。在 codepen 网站上的脚本上，时钟以一种活泼的方式工作。我得到了一些不真实的物理学。
html,
body {
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
background: #4873a9;
}
* {
box-sizing: border-box;
}
svg {
position: absolute;
width: 600px;
height: 600px;
left: calc(50vw - 300px);
top: calc(50vh - 300px);
}
:root {
--animation-duration: 10s;
}
.topSand {
animation: topSand var(--animation-duration) linear infinite;
}
.botSand {
animation: botSand var(--animation-duration) linear infinite;
}
.topShadow {
animation: topShadow var(--animation-duration) linear infinite;
}
.botShadow {
animation: botShadow var(--animation-duration) linear infinite;
}
.rightShine {
animation: rightShine var(--animation-duration) linear infinite;
}
.leftShine {
animation: leftShine var(--animation-duration) linear infinite;
}
.allGrouped {
animation: rotate var(--animation-duration) linear infinite;
transform-origin: 306px 275px;
}
.drip {
animation: drip var(--animation-duration) linear infinite;
stroke-miterlimit: 10;
}
@keyframes topSand {
0% {
y: 90px;
}
90% {
y: 280px;
}
100% {
y: 280px;
}
}
@keyframes botSand {
0% {
cy: 580px;
rx: 47.5;
}
5% {
cy: 580px;
rx: 47.5;
}
90% {
cy: 415px;
rx: 247.5;
}
93% {
cy: 415px;
rx: 247.5;
}
100% {
cy: 415px;
rx: 247.5;
cy: 375px;
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
90% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
@keyframes topShadow {
0% {
opacity: 0.12;
}
90% {
opacity: 0.12;
}
100% {
opacity: 0;
}
}
@keyframes botShadow {
0% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0.12;
}
}
@keyframes rightShine {
0% {
opacity: 0.1;
}
90% {
opacity: 0.1;
}
100% {
opacity: 0.28;
}
}
@keyframes leftShine {
0% {
opacity: 0.28;
}
90% {
opacity: 0.28;
}
100% {
opacity: 0.1;
}
}
@keyframes drip {
0% {
stroke-dashoffset: 180px;
stroke-dasharray: 1px 86px;
}
5% {
stroke-dashoffset: -186px;
stroke-dasharray: 1px, 2px;
}
8% {
stroke-dashoffset: 0;
stroke-dasharray: 1px, 1px;
}
11% {
stroke-dashoffset: -186px;
stroke-dasharray: 1px, 0px;
}
84.9% {
stroke-dashoffset: 0px;
stroke-dasharray: 1px, 0px;
}
88% {
stroke-dashoffset: 0px;
stroke-dasharray: 1px, 1px;
}
89.9% {
stroke-dashoffset: 0px;
stroke-dasharray: 1px, 48px;
}
90% {
stroke-dashoffset: -186px;
stroke-dasharray: 0px, 196px;
}
100% {
stroke-dashoffset: -186px;
stroke-dasharray: 0px, 196px;
}
}<svg viewBox="0 0 600 600" width="600" height="600" xml:space="preserve">
<defs>
<circle id="grain" cx="0" cy="0" r="1" fill="#F7E0B7"></circle>
<clipPath id="topMask">
<path
class="topMask"
fill="#6D00BF"
d="M316.7,266.3c-0.2,0.1-3.7,1.5-4.8,2.5c0,0,0,0,0,0.1c-1.8,1.5-3.2,4.5-3.2,7.1l-1.6,0l-1.4,0c0-2.6-1.4-5.6-3.2-7.1c0,0,0-0.1,0-0.1c-1.1-1-4.6-2.5-4.8-2.5C237.1,249.5,195,174,188,91h119h119.3C419.3,174,377.2,249.5,316.7,266.3z"
></path>
</clipPath>
<clipPath id="botMask">
<path
class="botMask"
fill="#6D00BF"
d="M316.7,283.7c-0.2-0.1-3.7-1.5-4.8-2.5c0,0,0,0,0-0.1c-1.8-1.5-3.2-4.5-3.2-7.1l-1.6,0l-1.4,0c0,2.6-1.4,5.6-3.2,7.1c0,0,0,0.1,0,0.1c-1.1,1-4.6,2.5-4.8,2.5C237.1,300.5,195,376,188,459h119h119.3C419.3,376,377.2,300.5,316.7,283.7z"
></path>
</clipPath>
</defs>
<g class="allGrouped">
<g clip-path="url(#topMask)">
<rect
class="topSand"
x="0"
y="90"
fill="#F7E0B7"
width="600"
height="185"
></rect>
</g>
<g clip-path="url(#botMask)">
<ellipse
class="botSand"
fill="#F7E0B7"
cx="307.5"
cy="580"
rx="47.5"
ry="120"
></ellipse>
</g>
<rect
class="top"
x="175"
y="70"
fill="#F1AF31"
width="263"
height="21"
></rect>
<line
class="drip"
fill="none"
stroke="#F7E0B7"
stroke-dashoffset="-186"
stroke-dasharray="1, 1"
stroke-width="2"
stroke-miterlimit="10"
x1="307"
y1="275"
x2="307"
y2="460"
></line>
<path
class="body"
opacity="0.23"
fill="#FFFFFF"
d="M432.2,459H180.8c4.3-90,49.8-165,108.7-175.2c6.1-1,10.3-5.2,10.3-8.8c0-3-4.2-7.8-10.3-8.8C230.6,256,185.2,180.5,180.8,91h251.3c-4.3,89.6-49.7,166.3-108.8,175.2c-6,0.9-10.2,6.1-10.2,8.8c0,2.7,4.3,7.9,10.2,8.8C382.5,292.7,427.8,369,432.2,459z"
></path>
<path
class="topShadow"
fill="#121212"
opacity="0.12"
d="M432.5,91h-252c0.3,4.1,0.8,8.8,1.4,14h249.3C432,98.3,432.2,95,432.5,91z"
style="opacity: 0.12"
></path>
<path
class="botShadow"
fill="#121212"
opacity="0"
d="M432.5,459h-252c0.3-4.1,0.8-8.8,1.4-14h249.3C432,451.7,432.2,455,432.5,459z"
style="opacity: 0"
></path>
<path
class="rightShine"
opacity="0.10"
fill="#FFFFFF"
d="M316.6,283.8c-5.2-1.2-8-6.1-8-8.8c0-2.7,2.8-7.5,8-8.8c58.6-14,105.6-87,106.5-175.2h-22.8c-3.6,85.6-38.3,168.8-102.8,177.2c0,0,8,0.7,8,6.8c0,6.2-8,6.8-8,6.8c64.5,8.3,99.2,91.6,102.8,177.2h22.8C422.3,370.8,375.3,297.8,316.6,283.8z"
style="opacity: 0.1"
></path>
<path
class="leftShine"
opacity="0.28"
fill="#FFFFFF"
d="M297,283.8c5.2-1.2,8-6.1,8-8.8c0-2.7-2.8-7.5-8-8.8c-58.6-14-105.6-87-106.5-175.2h22.8c3.6,85.6,38.3,168.8,102.8,177.2c0,0-8,0.7-8,6.8c0,6.2,8,6.8,8,6.8c-64.5,8.3-99.2,91.6-102.8,177.2h-22.8C191.4,370.8,238.4,297.8,297,283.8z"
style="opacity: 0.28"
></path>
<rect
class="bottom"
x="175"
y="459"
fill="#F1AF31"
width="263"
height="21"
></rect>
</g>
</svg>一般来说，我会更具体地说明这个问题。
沙子飞溅，像codepen脚本的作者，我什至不尝试做。但是一粒沙粒，应该掉下来的，对我来说，有时悬在空中，有时又飞起来……
我想做一个低速下落的点射流。为此，我扭曲了 CSS 中的两个属性：stroke-dasharray和stroke-dashoffset. 该物业stroke-dasharray按其应有的方式工作。而on stroke-dashoffset，应该负责点的向下移动，图片完全没有反应。
为什么？
SMIL SVG
根据 TS 的逻辑，回答主要问题：
使用标签
<animate>和属性，attributeName可以设置属性动画stroke-dashoffset（虚线笔画相对于原始位置的偏移量）和stroke-dasharray（虚线笔画类型）。指定属性的值和其他属性一样，也会以一定的间隔从起始值变为结束值。为了重现真正的沙尘坠落，动画中不仅需要包含上面列出的属性，还需要包含元素垂直轴的坐标（属性
y1和y2），其值会发生变化无论是在通过颈部倒沙的初始阶段，还是在最后阶段。计划在时间上尽可能地完全改变逻辑，并额外使用 CSS 来实现任务。但仅在计划中，因为问题中未指定此类要求。
更新/
修复了小错误。也：
可以使用属性
transform和属性播放“沙子飞溅”动画translate。下面是一个仅用于演示目的的快速示例。对于这个实现，只使用了上述属性之一，没有变得更复杂，主要目标是传达这个想法。