用CSS或js如何实现字体渐渐消失

html-css070

用CSS或js如何实现字体渐渐消失,第1张

无论css还是js，都有好多种方法能实现，写个简单的例子给你

jquery写法（需要加载jquery文件），如下：

<h1 class="demo">测试文字，测试文字，测试文字</h1> $(".demo").hover(function(){

  $(this).fadeOut(1000)

})

css写法，如下：

<h1 class="demo">测试文字，测试文字，测试文字</h1> .demo{

    transition: 1s

    -moz-transition: 1s

    -webkit-transition: 1s

    -o-transition: 1s

}

.demo:hover{

    opacity: 0

}

@keyframes fade-in {

0% {opacity: 0}/*初始状态 透明度为0*/

40% {opacity: 0}/*过渡状态 透明度为0*/

100% {opacity: 1}/*结束状态 透明度为1*/

}

@-webkit-keyframes fade-in {/*针对webkit内核*/

0% {opacity: 0}

40% {opacity: 0}

100% {opacity: 1}

}

@keyframes fade-out {

0% {opacity: 1}/*初始状态 透明度为1*/

40% {opacity: 1}/*过渡状态 透明度为1*/

100% {opacity: 0}/*结束状态 透明度为0*/

}

@-webkit-keyframes fade-out {/*针对webkit内核*/

0% {opacity: 1}

40% {opacity: 1}

100% {opacity: 0}

}

.wrapper {

animation: fade-in/*动画名称*/

animation-duration: 1.5s/*动画持续时间*/

-webkit-animation:fade-in 1.5s/*针对webkit内核*/

}

.wrapper1 {

animation: fade-out/*动画名称*/

animation-duration: 1.5s/*动画持续时间*/

-webkit-animation:fade-in 1.5s/*针对webkit内核*/

}

$(.wrapper).click(function(){

removeClass(wrapper)

addClass(wrapper1)

})

使用 return false，将会禁止向上冒泡和禁止默认行为。也就是禁止了元素的默认响应和上层元素的继续响应。

建议先检查上层元素是否有click响应，再尝试先remove后addclass试试。