DIV+CSS如何让字体自动变颜色？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DIV+CSS如何让字体自动变颜色？相关的知识，希望对你有一定的参考价值。
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：。
body
animation: change 3s linear 0s infinite;
@keyframes change
0% color: #333;
50% color: #f60;
100% color: #f00;
3、浏览器运行index.html页面，此时字体颜色会随着时间的变化而自动变化。
可以用CSS3中的动画来做，详细代码如下：
<style>#testanimation:change 10s linear 0s infinite;font-size:30px;font-weight:700;
@keyframes change0% color:#333;25%color:#ff0;50%color:#f60;75%color:#cf0;100% color:#f00;
</style>
<div id="test">这里是内容</div>
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
参考技术B DIV+CSS做不了。
js吧
在<head>区加入JS
<Script language="javascript">
var someText = "Welcome to my Website!!"; // the text
var aChar;
var aSentence;
var i=0; // a counter
var colors = new Array("FF0000","FFFF66","FF3399","00FFFF","FF9900","00FF00"); // the colors
var aColor; // the chosen color
function loadText()
// randomly choose color
aColor = colors[Math.floor(Math.random()*colors.length)];
aChar = someText.charAt(i);
if (i == 0)
aSentence = aChar;
else
aSentence += aChar;
// 50 iterations max.
if (i < 50) i++;
// For IE
if (document.all)
textDiv.innerHTML= "<font color='#"+aColor+"' face='Tahoma' size='5'><i>"+aSentence+"</i></font>";
setTimeout("loadText()",100);
// For Netscape Navigator 4
else if (document.layers)
document.textDiv.document.write("<font color='#"+aColor+"' face='Tahoma' size='5'><i>"+aSentence+"</i></font>");
document.textDiv.document.close();
setTimeout("loadText()",100);
// For other
else if (document.getElementById)
document.getElementById("textDiv").innerHTML = "<font color='#"+aColor+"' face='Tahoma'size='5'><i>"+aSentence+"</i></font>";
setTimeout("loadText()",100);
</SCRIPT>
第二步：
为<body>添加OnLoad事件，当页面加载的时候便可以执行脚本函数
<body bgcolor="#000000" text="#ffffff" onLoad="loadText()">
第三步：
在需要显示效果的地方加上定义，系统会查找ID为textDiv的标签
<div id="textDiv"></div>追问
如果按你的做，他字体的颜色是随机的吗？
追答var colors = new Array("FF0000","FFFF66","FF3399","00FFFF","FF9900","00FF00"); // the colors
这一行，你预定几个进去
OK，可以了！谢谢！
本回答被提问者采纳 参考技术C 得用js。css定义了文字是什么颜色就是什么颜色，不能自己变色 参考技术D jquery 或者 js 判断或者随机修改字体颜色！怎么让html字体变大
变大 红色 加粗 以下字
请点击广告下载附件 感谢您对琼易论坛的支持
求代码
完整代码
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*推荐通过css设置样式*/
#s1
/*#s1 表示找到id为s1的标签,对他设置样式*/
color: red;
/*字体颜色*/
font-size: 30px;
/*字体大小*/
font-weight: 900;
/*100,200,300...900越大越粗*/
</style>
</head>
<body>
<span id="s1">
感谢您的支持 这里是通过css设置样式实现
</span><br />
<span id="s2" style="color:red;font-size:35px;font-weight: bold;">
非常感谢 ,这里是通过style设置样式实现
</span>
</body>
</html>
效果
“div”标签中的文字都会变红,font-size:是控制字体大小的！数字可以更改 参考技术B 楼主可以采用以下方法的：
使html页面的内容字体变大的方法有两种：
1、使用hml中的font标签中size属性进行字体的设置。
2、使用css样式中的font-size进行字体字号的设置。
工具原料：编辑器、浏览器
方法一：使用html中的size属性
1、使用一个size属性改变字体的大小：
1
<p><font size="5">This is some text!</font></p>
2、运行的结果如下：
方法二：使用css中的font-size来设置字体的大小
1、使用该属性的设置字体的大小的代码如下：
1
<p style="font-size:20px">This is some text!</p>
2、运行的结果如下图： 参考技术C 使html页面的内容字体变大的方法有两种：
1、使用hml中的font标签中size属性进行字体的设置。
2、使用css样式中的font-size进行字体字号的设置。
工具原料：编辑器、浏览器
方法一：使用html中的size属性
1、使用一个size属性改变字体的大小：
<p><font size="5">This is some text!</font></p>
2、运行的结果如下：
方法二：使用css中的font-size来设置字体的大小
1、使用该属性的设置字体的大小的代码如下：
<p style="font-size:20px">This is some text!</p> 参考技术D 代码如下:
<div class="quote">请点击广告下载附件 感谢您对琼易论坛的支持</div>
css:
.quote
font-size:16px;//字体大小16px
color:red;//字体红色
font-weight:bolder;//字体加粗
希望我的回答可以帮到你，有什么不懂可以追问。
以上是关于DIV+CSS如何让字体自动变颜色？的主要内容，如果未能解决你的问题，请参考以下文章