马黑黑 发表于 2022-3-28 23:15
就是就是，何乐不为
那就一起长长久久地活下去吧，直到人类毁灭{:4_189:}
红影 发表于 2022-3-29 19:26
那就一起长长久久地活下去吧，直到人类毁灭
挺好的愿望
<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>
<p>跳舞的文字：<br><br></p>
<pre style="font-size: 12px;">
<style type=<span style='color: magenta'>"text/css"</span>>
<span style='color: red;'>.dText </span>{
<span style='color: blue;'> font</span>: 80px / 80px Sans-serif;
<span style='color: blue;'> color</span>: olive;
<span style='color: blue;'> text-shadow</span>: 2px 2px 4px #888;
<span style='color: blue;'> animation</span>: dance 1s ease-in-out infinite;
}
<span style='color: red;'>@keyframes dance </span>{
<span style='color: blue;'> to { font-weight</span>: 900; font-style: italic; }
}
</style>
<<span style='color:darkred'>div</span> <span style='color: red'>class</span><span style='color: blue'>=</span><span style='color: magenta'>"dText"</span>>
<<span style='color:darkred'>p</span>>HELLO CSS!<<span style='color: darkred'>/p</span>>
<<span style='color: darkred'>/div</span>>
</pre>
323楼实现原理：
利用 @keyframes 动画改变盒子文本的 font-weight 和 font-style 属性达到其摇摆+变粗的来回变化，形同集体跳摇摆舞。
马黑黑 发表于 2022-3-30 18:39
323楼实现原理：
利用 @keyframes 动画改变盒子文本的 font-weight 和 font-style 属性达到其摇摆+变粗 ...
这个好有趣，漂亮{:4_199:}
马黑黑 发表于 2022-3-30 18:37
跳舞的文字：
也可以用汉字的吧？虽然字体可选的较少
红影 发表于 2022-3-30 21:17
也可以用汉字的吧？虽然字体可选的较少
啥字都可以有斜体和粗细，肿么不可以呢{:5_117:}
<div class="quote"><blockquote><font size="2"><a href="forum.php?mod=redirect&goto=findpost&pid=1505090&ptid=57643" target="_blank"><font color="#999999">红影 发表于 2022-3-30 21:16</font></a></font>
这个好有趣，漂亮</blockquote></div>
<div class="dText">
<p>花潮论坛欢迎您</p>
</div>
<style type="text/css">
.mh{
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="mh">
<p>HELLO MAHEIHEI</p>
</div>
以为用alternate可以来回动，貌似不可以{:4_173:}
红影 发表于 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
啥字都可以有斜体和粗细，肿么不可以呢
看到楼下的字了，真漂亮{:4_199:}
马黑黑 发表于 2022-3-30 21:33
这个，font-style: italic;，就是定义文字倾斜。想一想我的JS，有 [ i] 的时候就不会正常执行，原因是 ...
原来是这个命令啊，我还以为是字体原因呢{:4_173:}
马黑黑 发表于 2022-3-30 21:27
它没必要用。单一的两个变换动作不需要alternate
嗯嗯，知道了{:4_187:}
红影 发表于 2022-3-31 11:19
嗯嗯，知道了
来回有路线是，alternate的作用是单向循环的动画变为双向循环
红影 发表于 2022-3-31 11:14
原来是这个命令啊，我还以为是字体原因呢
没有变字体的，是设置了 font-style 字体样式的变化