CSS纯动画效果类似于

最新推荐文章于 2024-07-18 10:24:18 发布

岚切492

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量405

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_60664977/article/details/121681689

版权

<!DOCTYPE html> 
<html>
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Hello, World</title> 
     <style type="text/css">
                @-webkit-keyframes rowup {
                    0% {
                        -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                    }
                    100% {
                        -webkit-transform: translate3d(0, -307px, 0);
                        transform: translate3d(0, -307px, 0);
                    }
                }
                @keyframes rowup {
                    0% {
                        -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                    }
                    100% {
                        -webkit-transform: translate3d(0, -157px, 0);
                        transform: translate3d(0, -157px, 0);
                    }
                }
         
                .demo-list{
                    width: 100%;
                    position: relative;
                    height: 140px;
                    overflow: hidden;
                }
         
                .demo-list .rowup{
                    -webkit-animation: 3s rowup linear infinite normal;
                    animation: 3s rowup linear infinite normal;
                    position: relative;
                }
            </style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=gfjV8DB7NtffHlg3HHFl1DgvKIyCCq9c">
</script>
</head> 
  
<body> 
 <div class="demo-list">
                                    <div class="rowup">
                                        <div class="item_txt">16号楼首层模板验收记录</div>
                                        <div class="item_txt">18号楼28层模板验收记录</div>
                                        <div class="item_txt">19号楼15层模板验收记录</div>
                                        <div class="item_txt">20号楼20层模板验收记录</div>
                                        <div class="item_txt">21号楼11层模板验收记录</div>
                                        <div class="item_txt">22号楼02层模板验收记录</div>
                                        <div class="item_txt">23号楼02层模板验收记录</div>
                                        <div class="item_txt">24号楼14层模板验收记录</div>
                                        <div class="item_txt">25号楼13层模板验收记录</div>
                                        <div class="item_txt">26号楼17层模板验收记录</div>
                                        <div class="item_txt">27号楼03层模板验收记录</div>
                                        <div class="item_txt">28号楼05层模板验收记录</div>
                                        <div class="item_txt">29号楼06层模板验收记录</div>
                                        <div class="item_txt">30号楼78层模板验收记录</div>
                                        <div class="item_txt">31号楼58层模板验收记录</div>
                                        <div class="item_txt">32号楼46层模板验收记录</div>
                                        <div class="item_txt">33号楼12层模板验收记录</div>
                                        <div class="item_txt">34号楼11层模板验收记录</div>
                                    </div>
                                </div>
                            </div>
</body> 
</html>

岚切492

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS纯动画效果类似于

<!DOCTYPE html> <html><head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello, World</title> <.
复制链接

扫一扫