zoukankan      html  css  js  c++  java
  • css静态无间接滚动/动态数据可换另一种方法

    <!DOCTYPE html>
    <!-- saved from url=(0064)https://www.xiabingbao.com/demo/css3-infinite-scroll/simple.html -->
    <html lang="en">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    		<title>CSS3无限滚动</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, -307px, 0);
    					transform: translate3d(0, -307px, 0);
    				}
    			}
    
    			.demo-list {
    				 300px;
    				border: 1px solid #999;
    				margin: 20px auto;
    				position: relative;
    				height: 200px;
    				overflow: hidden;
    			}
    
    			.demo-list .rowup {
    				-webkit-animation: 10s rowup linear infinite normal;
    				animation: 10s rowup linear infinite normal;
    				position: relative;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="demo-list">
    			<div class="cc rowup">

    <div class="item"><span>李先生</span><span>155****1213</span><span>3分钟前</span></div>
    <div class="item"><span>季先生</span><span>155****1213</span><span>3分钟前</span></div>
    <div class="item"><span>方先生</span><span>155****1213</span><span>3分钟前</span></div>
    <div class="item"><span>韦先生</span><span>155****1213</span><span>3分钟前</span></div>
    <div class="item"><span>郑小姐</span><span>155****1213</span><span>3分钟前</span></div>
    <div class="item"><span>张小姐</span><span>155****1213</span><span>3分钟前</span></div>
    <div class="item"><span>郑小姐</span><span>155****1213</span><span>3分钟前</span></div>
    <div class="item"><span>周小姐</span><span>155****1213</span><span>3分钟前</span></div>
    <div class="item"><span>周先生</span><span>155****1213</span><span>3分钟前</span></div>
    <div class="item"><span>李先生</span><span>155****1213</span><span>3分钟前</span></div>
    <div class="item"><span>李先生</span><span>155****1213</span><span>3分钟前</span></div>
    <div class="item"><span>李先生</span><span>155****1213</span><span>3分钟前</span></div>

    			</div>
    		</div>
    
    	</body>
    </html>
    

      

    代码改变了我们,也改变了世界
  • 相关阅读:
    KY2成绩排序
    python 获取list中元素的索引
    pandas 读取指定一列数据
    python 删除列表中的第一位元素
    python 时间戳
    python 除法保留小数点后两位
    python 读取excel表格的一列数据并去重
    python中获取Excel表格sheet页整页内容
    IDEA创建spring boot项目
    servlet一些问题
  • 原文地址:https://www.cnblogs.com/wencaiguagua/p/15692384.html
Copyright © 2011-2022 走看看