动画在所有桌面浏览器以及带有iOS 12的iPhone 6或8上都可以很好地工作。
在安装了iOS 13.3的iPhone XS上,观察到周期性闪烁。
<style type="text/css">
@-webkit-keyframes anim_pet {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
}
@keyframes anim_pet {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
}
.anim_pet {
-webkit-animation: anim_pet 120s infinite linear;
animation: anim_pet 120s infinite linear;
}
</style>
<defs>
<symbol id="symbol_pet">
<path d="M0 0 L0.54 0.26 L0.79 1.29 L0.59 2.16 L-0.07 3.25 L-1.4 4.43 L-3.66 5.45 L-7.07 5.87 L-11.73 5.07 L-14.5 3.94 L-17.52 2.15 L-20.71 -0.43 L-23.96 -3.95 L-27.11 -8.57 L-29.97 -14.44 L-32.27 -21.69 L-33.7 -30.44 L-33.87 -40.75 L-32.32 -52.65 L-28.55 -66.09 L-21.95 -80.91 L-11.89 -96.83 L2.34 -113.45 L21.46 -130.14 L46.2 -146.11 L77.24 -160.3 L115.21 -171.39 L160.59 -177.78 L213.65 -177.54 L274.38 -168.44 L342.41 -147.92 L416.87 -113.12 L496.27 -60.93 "/>
</symbol>
</defs>
<radialGradient id = "gra1" cx = "0%" cy = "0%" r = "424px" gradientUnits="userSpaceOnUse">
<stop stop-color = "rgb(176,156,184)" offset = "0.2">
<animate restart="never" attributeName="offset" calcMode="spline" values="0.2; 0.8" keySplines="0.0 0.0 1.0 1.0" dur="8.0s" repeatCount="1" fill="freeze"/>
</stop>
</radialGradient>
<g id="flower" stroke="url(#gra1)">
<g>
<use class="anim_pet" xlink:href="#symbol_pet"/>
<g transform="scale(-1,1)">
<use class="anim_pet" xlink:href="#symbol_pet"/>
</g>
</g>
<g transform="rotate(-30)">
<use class="anim_pet" xlink:href="#symbol_pet"/>
<g transform="scale(-1,1)">
<use class="anim_pet" xlink:href="#symbol_pet"/>
</g>
</g>
...
<g transform="rotate(-330)">
<use class="anim_pet" xlink:href="#symbol_pet"/>
<g transform="scale(-1,1)">
<use class="anim_pet" xlink:href="#symbol_pet"/>
</g>
</g>
</g>
此外,如果我移除渐变并填充路径,则闪烁消失。
... <g id="flower" stroke="blue"> ...
如我所见,这是操作系统中的错误,因为在Chrome和Safari中都可以看到它。
还是我错了?
为什么在最新的iphone中确实会出现这种荒诞的现象?
自2012年以来,没有任何浏览器支持此功能:)至少达到我的支持水平。