<div class="foo">
<span class="letter" data-letter="A">A</span>
<span class="letter" data-letter="B">B</span>
<span class="letter" data-letter="C">C</span>
<span class="letter" data-letter="D">D</span>
<span class="letter" data-letter="E">E</span>
<span class="letter" data-letter="F">F</span>
<span class="letter" data-letter="G">G</span>
<span class="letter" data-letter="H">H</span>
<span class="letter" data-letter="I">I</span>
<span class="letter" data-letter="L">L</span>
<span class="letter" data-letter="M">M</span>
<span class="letter" data-letter="N">N</span>
<span class="letter" data-letter="O">O</span>
<span class="letter" data-letter="P">P</span>
<span class="letter" data-letter="Q">Q</span>
<span class="letter" data-letter="R">R</span>
<span class="letter" data-letter="S">S</span>
<span class="letter" data-letter="T">T</span>
<span class="letter" data-letter="U">U</span>
<span class="letter" data-letter="V">V</span>
<span class="letter" data-letter="Z">Z</span>
</div> CSS3
.letter{
display: inline-block
font-weight: 900
font-size: 8em
margin: 0.2em
position: relative
color: #00B4F1
transform-style: preserve-3d
perspective: 400
z-index: 1
} 这样我们就让这些字母安安静静的排列起来，并有了自己的背景颜色，等待强大的CSS3来渲染。
接下来我们要让文字在鼠标滑过的时候产生翻转倾斜的动画。
.letter:before, .letter:after{
position:absolute
content: attr(data-letter)
transform-origin: top left
top:0
left:0
}
.letter, .letter:before, .letter:after{
transition: all 0.3s ease-in-out
}
.letter:before{
color: #fff
text-shadow:
-1px 0px 1px rgba(255,255,255,.8),
1px 0px 1px rgba(0,0,0,.8)
z-index: 3
transform:
rotateX(0deg)
rotateY(-15deg)
rotateZ(0deg)
}
.letter:after{
color: rgba(0,0,0,.11)
z-index:2
transform:
scale(1.08,1)
rotateX(0deg)
rotateY(0deg)
rotateZ(0deg)
skew(0deg,1deg)
}
.letter:hover:before{
color: #fafafa
transform:
rotateX(0deg)
rotateY(-40deg)
rotateZ(0deg)
}
.letter:hover:after{
transform:
scale(1.08,1)
rotateX(0deg)
rotateY(40deg)
rotateZ(0deg)
skew(0deg,22deg)
}
<html><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>
方法/步骤
准备一张图片，新建一个空白html文件
其中html文件内容如下图所示，html中包含了一张图片，及对应的描述段落
给html添加head标签，在标签中定义样式。
<style>
p {border:1px solid red}
img {float:leftmargin:0 5px 5px 0}
</style>
用chrome浏览器打开上面的html文件，可以看到文字绕排效果，如下图所示
由于在引入图片时我们用到的语句是<img src="Penguins.jpg" style="width: 50%height:auto"/>，这表明图片的大小是会随着浏览器窗口的大小调整而自动调整的。所以当放大或缩小浏览器窗口时，环绕效果会跟随着变化。
如果要清除文字绕排效果，只需将float: letf样式定义删除即可。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）