关于页面淡入淡出,可用JS或者CSS3控制

html-css08

关于页面淡入淡出,可用JS或者CSS3控制,第1张

@keyframes anim

{

from {opacity: 1}

to {opacity: 0}

}

.anim-welcome

{

animation: anim 3s

}

执行时,为需要淡出的节点添加样式anim-welcome,兼容其他浏览器请自查;

该法为css3实现,不管如何兼容IE9-是无效的,全兼容需脚本支持:

$('#node').fadeout()

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>CSS3</title> 

<style>

*{ padding:0margin:0font-size:12px }

    .open{ width:100pxheight:100pxtext-align:centerline-height:100pxbackground-color:pinkcolor:#000border-radius:50%margin:50px autobox-shadow:0 0 10px,0 0 10px #ff0000 }

    .fade{ 

        animation:fade 2s infinite -webkit-animation:fade 2s infinite

        -moz-animation:fade 2s infinite-o-animation:fade 2s infinite-ms-animation:fade 2s infinite 

        animation-fill-mode:both

    }

    @keyframes fade{

        0%,100%{

            opacity:0transform:scale(0)

        }

        50%{

            opacity:1transform:scale(1)

        }

    }

</style>

</head>

<body>

<div class="open fade"> Test </div>

</body>

</html>