文字效果集中营

红影

马黑黑 发表于 2022-3-28 23:15
就是就是，何乐不为

那就一起长长久久地活下去吧，直到人类毁灭

马黑黑

红影 发表于 2022-3-29 19:26
那就一起长长久久地活下去吧，直到人类毁灭

挺好的愿望

马黑黑

HELLO CSS!

马黑黑

跳舞的文字：

<style type="text/css">
.dText {
   font: 80px / 80px Sans-serif;
   color: olive;
   text-shadow: 2px 2px 4px #888;
   animation: dance 1s ease-in-out infinite;
}
@keyframes dance {
   to { font-weight: 900; font-style: italic; }
}
</style>

<div class="dText">
   <p>HELLO CSS!</p>
</div>

马黑黑

323楼实现原理：

利用 @keyframes 动画改变盒子文本的 font-weight 和 font-style 属性达到其摇摆+变粗的来回变化，形同集体跳摇摆舞。

红影

马黑黑 发表于 2022-3-30 18:39
323楼实现原理：

利用 @keyframes 动画改变盒子文本的 font-weight 和 font-style 属性达到其摇摆+变粗 ...

这个好有趣，漂亮

红影

马黑黑 发表于 2022-3-30 18:37
跳舞的文字：

也可以用汉字的吧？虽然字体可选的较少

马黑黑

红影 发表于 2022-3-30 21:17
也可以用汉字的吧？虽然字体可选的较少

啥字都可以有斜体和粗细，肿么不可以呢

马黑黑

红影 发表于 2022-3-30 21:16 这个好有趣，漂亮

花潮论坛欢迎您

红影

HELLO MAHEIHEI

红影

以为用alternate可以来回动，貌似不可以

马黑黑

红影 发表于 2022-3-30 21:26
以为用alternate可以来回动，貌似不可以

它没必要用。单一的两个变换动作不需要alternate

红影

马黑黑 发表于 2022-3-30 21:27
它没必要用。单一的两个变换动作不需要alternate

为什么汉字也能倾斜呢，倾斜不是字体变化引起的么？对汉字也有用？

马黑黑

红影 发表于 2022-3-30 21:29
为什么汉字也能倾斜呢，倾斜不是字体变化引起的么？对汉字也有用？

所有的字都有倾斜的样式，做word文档会经常用到

马黑黑

红影 发表于 2022-3-30 21:29
为什么汉字也能倾斜呢，倾斜不是字体变化引起的么？对汉字也有用？

这个，font-style: italic;，就是定义文字倾斜。想一想我的JS，有 [ i  ] 的时候就不会正常执行，原因是论坛中预定义了中括号里有个 i 为文字倾斜样式，i 是 italic 的缩写， italic 是“倾斜”的意思

红影

马黑黑 发表于 2022-3-30 21:20
啥字都可以有斜体和粗细，肿么不可以呢

看到楼下的字了，真漂亮

红影

马黑黑 发表于 2022-3-30 21:33
这个，font-style: italic;，就是定义文字倾斜。想一想我的JS，有 [ i  ] 的时候就不会正常执行，原因是 ...

原来是这个命令啊，我还以为是字体原因呢

红影

马黑黑 发表于 2022-3-30 21:27
它没必要用。单一的两个变换动作不需要alternate

嗯嗯，知道了

马黑黑

红影 发表于 2022-3-31 11:19
嗯嗯，知道了

来回有路线是，alternate的作用是单向循环的动画变为双向循环

马黑黑

红影 发表于 2022-3-31 11:14
原来是这个命令啊，我还以为是字体原因呢

没有变字体的，是设置了 font-style 字体样式的变化