<head>
<title>网页特效-文本特效-渐显的文字提示效果</title>
<FCK:meta http-equiv="content-Type" content="text/htmlcharset=gb2312" />
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
.lookMe{
float:left
margin-right:10px
padding:5px
width:90px
color:#0099FF
cursor:pointer
background:#FFFADC
border:1px solid #CC6600
}
.lookMe span{
display:none
position:absolute
padding:5px
width:200px
color:#CC3300
background:#FFFADC
border:1px solid #CC6600
filter:alpha(opacity=0)
}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div onmouseover_fckprotectedatt="%20onmouseover%3D%22lookMe(this)%3B%22" class="lookMe" onmousemove_fckprotectedatt="%20onmousemove%3D%22mouseMove(event)%3B%22">闷战120分钟点球战4:2 西班牙破魔咒淘汰意大利
<span>1、雅虎体育讯 北京时间6月23日，欧洲足球锦标赛在瑞士奥地利继续进行，在一场四分之一决赛中，西班牙队迎来了上届世界杯冠军意大利队，90分钟与加时赛双方均一球未进，在最终的点球大战中，西班牙4:2击败了对手，昂首挺进四强。</span>
</div>
<div onmouseover_fckprotectedatt="%20onmouseover%3D%22lookMe(this)%3B%22" class="lookMe" onmousemove_fckprotectedatt="%20onmousemove%3D%22mouseMove(event)%3B%22">闷战120分钟点球战4:2 西班牙破魔咒淘汰意大利
<span>2、在一场四分之一决赛中……</span>
</div>
<div onmouseover_fckprotectedatt="%20onmouseover%3D%22lookMe(this)%3B%22" class="lookMe" onmousemove_fckprotectedatt="%20onmousemove%3D%22mouseMove(event)%3B%22">闷战120分钟点球战4:2 西班牙破魔咒淘汰意大利
<span>3、欧洲足球锦标赛在瑞士奥地利继续进行，在一场四分之一决赛中，西班牙队迎来了上届世界杯冠军意大利队，90分钟与加时赛双方均一球未进，在最终的点球大战中，西班牙4:2击败了对手，昂首挺进四强。</span>
</div>
<script>
var span,timer1
function lookMe(thisTag){
span = thisTag.getElementsByTagName('span')[0]
span.style.display = 'block'
span.filters[0].opacity=0
timer1=setInterval("showme()",10)
thisTag.onmouseout = function(){
span.style.display = 'none'
}
}
function showme()
{
if(span.filters[0].opacity==80){clearInterval(timer1)}
span.filters[0].opacity++
}
function mouseMove(event){
var xx=event.clientX + 5
var yy=event.clientY + 10
var obj = event.srcElement ? event.srcElement : event.target
var span=obj.getElementsByTagName("span")[0]
span.style.left = xx + 'px'
span.style.top = yy + 'px'
}
</script>
</body>
</html>
这个简单啊，就用CSS3的新属性 过渡 transition 就好了，代码如下：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字渐变效果</title>
<style type="text/css">
div{
width: 100px
height: 30px
color: #000
transition: color 1s
}
div:hover{
color: yellow
}
</style>
</head>
<body>
<div>移入试试看</div>
</body>
</html>
在设置颜色时有多种方法：
采用颜色的英文单词 比如 red 指红色
采用#号，后面跟6位的16进制数字，比如：#ff0000 表示红色 每个数字的取值为0~9，a~f（a表示10，f表示15）。当第1~2位、第3~4位、第5~6位的数字分别相同时，可以缩写为3位，如 #ff0000可以缩写为 #f00， #3399ff可以缩写为#39f。对于#3699ff此类不满足条件的颜色值则不能缩写
采用rgb数值表示法，比如 rgb(255, 0, 0)表示红色，三个数字分别表示红、绿、蓝，取值范围为0~255
采用rgba数值表示法，比如rgba(255, 0, 0, 0.5)表示50%透明度的红色，最后一个数字表示透明度，取值为0~1之间的小数，0表示全透明，1表示不透明。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）