【发布时间】：2023-04-22 02:42:01
【问题描述】：
我使用代码块和 HTML 代码向我的 Squarespace 网站添加了打字机动画。它适用于谷歌浏览器，但不适用于 Safari。我读到“转换”需要额外的代码才能在 Squarespace 中工作，但我没有使用该功能。我尝试在论坛上阅读有关如何解决此问题的信息，但从未找到。 我能做些什么不同的事情？如果有人有一个链接到有人以前如何解决这个问题，那会很有帮助。
另外，如果您对如何改进代码有任何建议，我将不胜感激，因为我是一名初级网页设计师。
.typewriter {
align-items: center;
font-size: 350%;
font-family: "DIN Bold", sans-serif;
text-align: center;
}
.typewriter:after {
content: " " ;
color: #ea746a;
animation: write 15s infinite linear;
animation-fill-mode: forwards;
}
@keyframes write {
1% {
content: "A";
}
2% {
content: "AE";
}
3% {
content: "AES";
}
4% {
content: "AEST";
}
5% {
content: "AESTH";
}
6% {
content: "AESTHE";
}
7% {
content: "AESTHET";
}
8% {
content: "AESTHETI";
}
9% {
content: "AESTHETIC";
}
10% {
content: "AESTHETICS";
}
11% {
content: "AESTHETICS.";
}
14% {
content: "AESTHETICS";
}
14.5% {
content: "AESTHETIC";
}
15% {
content: "AESTHETI";
}
15.5% {
content: "AESTHET";
}
16% {
content: "AESTHE";
}
16.5% {
content: "AESTH";
}
17% {
content: "AEST";
}
17.5% {
content: "AES";
}
18% {
content: "AE";
}
18.5% {
content: "A";
}
19% {
content: "";
}
20% {
content: "D";
}
21% {
content: "DI";
}
22% {
content: "DIG";
}
23% {
content: "DIGI";
}
24% {
content: "DIGIT";
}
25% {
content: "DIGITA";
}
26% {
content: "DIGITAL";
}
27% {
content: "DIGITAL M";
}
28% {
content: "DIGITAL M";
}
29% {
content: "DIGITAL MA";
}
30% {
content: "DIGITAL MAR";
}
31% {
content: "DIGITAL MARK";
}
32% {
content: "DIGITAL MARKE";
}
33% {
content: "DIGITAL MARKET";
}
34% {
content: "DIGITAL MARKETI";
}
35% {
content: "DIGITAL MARKETIN";
}
36% {
content: "DIGITAL MARKETING";
}
37% {
content: "DIGITAL MARKETING.";
}
39% {
content: "DIGITAL MARKETING";
}
39.5% {
content: "DIGITAL MARKETIN";
}
40% {
content: "DIGITAL MARKETI";
}
40.5% {
content: "DIGITAL MARKET";
}
41% {
content: "DIGITAL MARKE";
}
41.5% {
content: "DIGITAL MARK";
}
42% {
content: "DIGITAL MAR";
}
42.5% {
content: "DIGITAL MA";
}
43% {
content: "DIGITAL M";
}
43.5% {
content: "DIGITAL";
}
44% {
content: "DIGITA";
}
44.5% {
content: "DIGIT";
}
45% {
content: "DIGI";
}
45.5% {
content: "DIG";
}
46% {
content: "DI";
}
46.5% {
content: "D";
}
47% {
content: "";
}
48% {
content: "C";
}
49% {
content: "CO";
}
50% {
content: "CON";
}
51% {
content: "CONT";
}
52% {
content: "CONTE";
}
53% {
content: "CONTEN";
}
54% {
content: "CONTENT";
}
55% {
content: "CONTENT ";
}
56% {
content: "CONTENT C";
}
57% {
content: "CONTENT CR";
}
58% {
content: "CONTENT CRE";
}
59% {
content: "CONTENT CREA";
}
60% {
content: "CONTENT CREAT";
}
61% {
content: "CONTENT CREATI";
}
62% {
content: "CONTENT CREATIO";
}
63% {
content: "CONTENT CREATION";
}
64% {
content: "CONTENT CREATION.";
}
66% {
content: "CONTENT CREATION";
}
66.5% {
content: "CONTENT CREATIO";
}
67% {
content: "CONTENT CREATI";
}
67.5% {
content: "CONTENT CREAT";
}
68% {
content: "CONTENT CREA";
}
68.5% {
content: "CONTENT CRE";
}
69% {
content: "CONTENT CR";
}
69.5% {
content: "CONTENT ";
}
70% {
content: "CONTENT";
}
70.5% {
content: "CONTEN";
}
71% {
content: "CONTE";
}
71.5% {
content: "CONT";
}
72% {
content: "CON";
}
72.5% {
content: "CO";
}
73% {
content: "C";
}
73.5% {
content: "";
}
75% {
content: "W";
}
76% {
content: "WE";
}
77% {
content: "WEB";
}
78% {
content: "WEB ";
}
79% {
content: "WEB D";
}
80% {
content: "WEB DE";
}
81% {
content: "WEB DES";
}
82% {
content: "WEB DESI";
}
83% {
content: "WEB DESIG";
}
84% {
content: "WEB DESIGN";
}
85% {
content: "WEB DESIGN.";
}
86% {
content: "WEB DESIGN";
}
86.5% {
content: "WEB DESIG";
}
87% {
content: "WEB DESI";
}
87.5% {
content: "WEB DES";
}
88% {
content: "WEB DE";
}
88.5% {
content: "WEB D";
}
89% {
content: "WEB ";
}
89.5% {
content: "WEB";
}
90% {
content: "WE";
}
90.5% {
content: "W";
}
91% {
content: " ";
}
}<div class="typewriter">
TRANSFORM YOUR BRAND THROUGH
<span>
<br />
</span>
</div>【问题讨论】：
-
可能 safari 不支持您的某些 css。
-
你愿意稍微改变你的 html 吗？如果是这样，我们可能不需要 Javascript 就可以通过为内容以外的东西设置动画来做到这一点，这样 Safari 就会很高兴。
-
问题是 safari ...
标签： html css animation css-animations squarespace