css3动画从底部向上升

最新推荐文章于 2024-05-30 11:43:16 发布

weixin_30839881

最新推荐文章于 2024-05-30 11:43:16 发布

阅读量4.6k

点赞数 1

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/yuanyuan-1994/p/8781862.html

版权

animation-fill-mode: forwards;/*当动画完成时，动画会停留在最后一帧。*/

升起来前

升起来后


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
        body{font:14px"微软雅黑","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
        li{list-style:none}
        li{
            float: left;
            width: 25%;
            height: 200px;
            text-align: center;
        }
        img{
            width: 200px;
            height: 200px;
        }
        .head{
            width: 100%;
            height: 200px;
            position:absolute;
            animation:myfirst 2s;
            -webkit-animation:myfirst 2s;
            animation-fill-mode: forwards;/*当动画完成时，动画会停留在最后一帧。*/
            overflow: hidden;
        }
        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
            0%   {height: 10px}
            25%  {height:50px;bottom:50%;}
            50%  {height:100px;bottom:50%;}
            75%  {height:160px; bottom:50%;}
            100% {height:200px;bottom:50%;
        }
        }
    </style>
</head>
<body>
<div class="head">
    <ul>
        <li>
            <img src="image/hb.png">
        </li>
        <li>
            <img src="image/jiang.png">
        </li>
        <li>
            <img src="image/kf.png">
        </li>
        <li>
            <img src="image/tubiao1.png">
        </li>
    </ul>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/yuanyuan-1994/p/8781862.html

weixin_30839881

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css3动画从底部向上升

animation-fill-mode: forwards;/*当动画完成时，动画会停留在最后一帧。*/升起来前升起来后<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <...
复制链接

扫一扫