0 JavaScript，纯 CSS 实现移动、渐显特效

作者：vkvi 来源：ITPOW（原创）日期：2015-1-7

0 JavaScript，纯 CSS 实现移动、渐显特效，其实是利用了 CSS 3 的新特性，CSS 3 推出很久了，现在新版本浏览器都支持，这里就不写多了，直接上代码。

运行代码

<head>
<style type="text/css">
/* 大幅广告 */
#curtain { position:absolute; top:187px; left:50%; margin-left:-500px; width:500px;
animation:curtainEffect 1s;
-moz-animation:curtainEffect 1s; /* Firefox */
-webkit-animation:curtainEffect 1s; /* Safari and Chrome */
-o-animation:curtainEffect 1s; /* Opera */
}
@keyframes curtainEffect
{
from { top:0px; opacity:0;}
to { top:187px; opacity:1;}
}

@-moz-keyframes curtainEffect /* Firefox */
{
from { top:0px; opacity:0;}
to { top:187px; opacity:1;}
}

@-webkit-keyframes curtainEffect /* Safari and Chrome */
{
from { top:0px; opacity:0;}
to { top:187px; opacity:1;}
}

@-o-keyframes curtainEffect /* Opera */
{
from { top:0px; opacity:0;}
to { top:187px; opacity:1;}
}
</style>
</head>

<body>
<div id="curtain" onclick="javascript:this.style.display = 'none';">
    <div><a href="http://www.itpow.com/" target="_blank"><img src="http://www.itpow.com/c/2015/01/6372/RV0NAJFF6N4AS942.jpg" alt="纯 CSS 实现移动、渐显特效演示图" /></a></div>
    <div style="position:absolute; top:0px; right:0px;"><img src="http://www.itpow.com/c/2015/01/6372/7U43HA8TJTPE2QTV.png" alt="关闭" style="cursor:pointer;" /></div>
</div>
</body>

[Ctrl+A 全部选择提示：您可先修改部分代码，再按运行]

查看代码

<head>
<style type="text/css">
/* 大幅广告 */
#curtain { position:absolute; top:187px; left:50%; margin-left:-500px; width:500px;
animation:curtainEffect 1s;
-moz-animation:curtainEffect 1s; /* Firefox */
-webkit-animation:curtainEffect 1s; /* Safari and Chrome */
-o-animation:curtainEffect 1s; /* Opera */
}
@keyframes curtainEffect
{
from { top:0px; opacity:0;}
to { top:187px; opacity:1;}
}

@-moz-keyframes curtainEffect /* Firefox */
{
from { top:0px; opacity:0;}
to { top:187px; opacity:1;}
}

@-webkit-keyframes curtainEffect /* Safari and Chrome */
{
from { top:0px; opacity:0;}
to { top:187px; opacity:1;}
}

@-o-keyframes curtainEffect /* Opera */
{
from { top:0px; opacity:0;}
to { top:187px; opacity:1;}
}
</style>
</head>

<body>
<div id="curtain" onclick="javascript:this.style.display = 'none';">
    <div><a href="http://www.itpow.com/" target="_blank"><img src="http://www.itpow.com/c/2015/01/6372/RV0NAJFF6N4AS942.jpg" alt="纯 CSS 实现移动、渐显特效演示图" /></a></div>
    <div style="position:absolute; top:0px; right:0px;"><img src="http://www.itpow.com/c/2015/01/6372/7U43HA8TJTPE2QTV.png" alt="关闭" style="cursor:pointer;" /></div>
</div>
</body>

电邮：cftea@126.com