加林森 发表于 2022-3-13 22:57
这个有点厉害，特别是改变颜色怎么变呢。
还行啊
马黑黑 发表于 2022-3-13 22:58
还行啊
惭愧惭愧
马黑黑 发表于 2022-3-12 20:55
这个纯属原创哈
黑黑太佩服你了，原创厉害的{:4_178:}
小辣椒 发表于 2022-3-13 23:04
黑黑太佩服你了，原创厉害的
感谢支持
马黑黑 发表于 2022-3-13 23:09
感谢支持
我被窝里面手机看看，感觉这个要电脑看，一面看，一面预览效果。感觉特别好{:4_173:}
小辣椒 发表于 2022-3-13 23:11
我被窝里面手机看看，感觉这个要电脑看，一面看，一面预览效果。感觉特别好
那么用功
马黑黑 发表于 2022-3-13 23:14
那么用功
继续学习
加林森 发表于 2022-3-13 23:22
继续学习
{:4_190:}
马黑黑 发表于 2022-3-14 12:02
谢谢老黑。
加林森 发表于 2022-3-14 12:25
谢谢老黑。
不客气的
马黑黑 发表于 2022-3-14 12:41
不客气的
嗯嗯，中午好。
加林森 发表于 2022-3-14 12:42
嗯嗯，中午好。
{:4_190:}
<style type="text/css">
/* 文本层 */
.txtCeng {
margin: 10px auto 0;
width: 400px;
height: 200px;
line-height: 200px;
font-family: Arial, '微软雅黑';
font-size: 4em;
color: #eee;
text-align: center;
text-shadow: 1px 1px 1px #ffcc00, 2px 2px 2px #aaa;
background: rgba(255, 255, 255, .1);
animation: chgColor 5s ease-in-out infinite alternate;
}
/* 文本层变色 */
@keyframes chgColor {
0% { color: navy; }
20% { color: green; }
40% { color: red; }
60% { color: olive; }
80% { color: olive; }
100% { color: tomato; }
}
</style>
<div class="txtCeng">HELLO CSS!</div>
纯CSS文本自动变色代码：
<style>
/* 文本层 */
.txtCeng {
margin: 10px auto 0;
width: 400px;
height: 200px;
line-height: 200px;
font-family: Arial, '微软雅黑';
font-size: 4em;
color: #eee;
text-align: center;
text-shadow: 1px 1px 1px #ffcc00, 2px 2px 2px #aaa;
background: rgba(255, 255, 255, .1);
animation: chgColor 5s ease-in-out infinite alternate;
}
/* 文本层变色 */
@keyframes chgColor {
0% { color: navy; }
20% { color: green; }
40% { color: red; }
60% { color: olive; }
80% { color: olive; }
100% { color: tomato; }
}
</style>
<div class="txtCeng">HELLO CSS!</div>
本帖最后由 加林森 于 2022-3-14 13:09 编辑 <br /><br />马黑黑 发表于 2022-3-14 12:54
谢谢。
<div class="txtCeng" style="width: 760px;">老黑的教程真好！</div>
本帖最后由 马黑黑 于 2022-3-14 13:10 编辑
加林森 发表于 2022-3-14 13:02
本帖最后由 加林森 于 2022-3-14 13:05 编辑
谢谢。
你可以把盒子的宽度改大一点，760是论坛的支持下限
马黑黑 发表于 2022-3-14 13:07
你可以吧盒子的宽度改大一点，760是论坛的支持下限
哦，好的好的，知道了。谢谢！
加林森 发表于 2022-3-14 13:09
哦，好的好的，知道了。谢谢！
我帮你改了，你看一下代码，体会一下
加林森 发表于 2022-3-14 13:09
哦，好的好的，知道了。谢谢！
凡用 .xxx 命名的CSS选择器，同一页里不要复制一份，没必要，也会在后面的有改动的情况下干扰前面的。你只需要在HTML代码中引用 .xxx 名称：
<div class="xxx">文字</div>
然后，有需要改动的，用style追加其他属性，如宽度、文字大小什么的：
<div class="xxx" style="width: 700px; font-size: 4em;">文字</div>
马黑黑 发表于 2022-3-14 13:14
凡用 .xxx 命名的CSS选择器，同一页里不要复制一份，没必要，也会在后面的有改动的情况下干扰前面的。你 ...
嗯嗯，明白了。{:5_108:}