html里图片上鼠标悬停就会有文字属于什么特效

动画特效。html里图片上鼠标悬停就会有文字属于动画特效。鼠标悬停的意思是指当鼠标在网页的部分图标、文字或者图片上停留的时候，会有部分内容d出，档从这个图标、文字或者图片上移开鼠标后，d出的内容自动缩回。

javasript代码

<divid="blink">闪烁的文字</div>

<scriptlanguage="javascript">

functionchangeColor(){

varcolor="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"

color=color.split("|")

document.getElementById("blink").style.color=color[parseInt(Math.random()*color.length)]

}

setInterval("changeColor()",200)

</script>

css代码就是文字闪烁text-decoration:blink不过很可惜，IE、Chrome或Safari不支持"blink"属性值，所以只有在Firefox和Opera下支持这CSS实现在闪动效果。加上js代码就可以了。

首先是HTML代码，非常简单，列出我们需要渲染的文字：

<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)

}

---