gt;gt;我要做特工系列 之 CSS 3_animation_向右滑出后下滑并停止


!DOCTYPE html
html
head
meta charset="utf-8" 
titleCSS3/title 
style 
div{
    width:10px;
    height:2px;
    background:red;
}
 
div:hover{/*这里绑定一个选择器,把cssSplit绑定到div:hover*/
    /*animation:cssSplit 5s infinite;*/
    /*animation-direction:alternate;*//*播放后反向播放一遍*/
    animation:cssSplit 5s alternate;
    animation-fill-mode:forwards;/*播放后停止在最后一帧*/
    }
@keyframes cssSplit /* Firefox -moz-没加,csshack自己做呗*/
{
    0% {background:red;width:10px;height:2px;}
    10% {background:yellow;width:500px;height:2px;}
    30% {background:yellow;width:500px;height:200px;}
    100% {background:yellow;width:500px;height:200px;}
}
/style
/head
body

div/div

pb注意:/b 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。/p
/body
/html

Ps:布局和着色应该还会重新规制吧。。发一下试试,错位的感觉很强烈啊。。

-----

Ps:果然是着色还是得一次成功啊,不会自己重新绘制。。插个代码改了三次格式也是没谁了。。。

我要做特工系列 之 CSS 3_animation_向右滑出后下滑并停止

原文地址:http://www.cnblogs.com/logicmind/p/7252905.html


最新回复(0)
/jishuqHBahGgvj8AEBllsr2BmHP_2Fb2_2BZtxtlgs1FLxg_3D_3D4719418
8 简首页