html css3 锚点动画向上

最新推荐文章于 2022-04-13 16:08:17 发布

dengzhajin4337

最新推荐文章于 2022-04-13 16:08:17 发布

阅读量222

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/yutaoyao/p/4225771.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>锚点与内容动画向上显示效果</title>
        <style type="text/css">
        *{margin: 0;padding: 0px;}
            @-webkit-keyframes slideupin {
                0% {-webkit-transform: translateY(100%);}
                100% { -webkit-transform: translateY(0%);}
            }
            @keyframes slideupin {
                0% {transform: translateY(100%); }
                100% { transform: translateY(0%);}
            }
            
            .list{width:100%;height:1000px; background:#ddd; font-size:80px;
                
            }
            .link{position: fixed;top:0;right: 0px;}
            .list:target {
                -webkit-transform: translateY(0%);
                transform: translateY(0%);
                -webkit-animation: slideupin .35s .05s linear forwards;
                animation: slideupin .35s .05s linear forwards;
            }
            
        </style>
    </head>

    <body>
        
            <div class="list" id="one">1</div>
            <div class="list" id="two">2</div>
            <div class="list" id="three">3</div>
            <div class="list" id="four">4</div>
    
        <div class="link">
            <a href="#one">1</a>
            <a  href="#two">2</a>
            <a  href="#three">3</a>
            <a  href="#four">4</a>
        </div>
    </body>

</html>