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>
    

      

    代码改变了我们,也改变了世界
  • 相关阅读:
    视频、图形图像处理之Opencv技术记录(六)、均衡直方图
    视频、图形图像处理之Opencv技术记录(四)、OpenCV教程概述
    视频、图形图像处理之Opencv技术记录(五)、Opencv教程之图像处理(imgproc模块)之平滑图像
    Windows与Linux之间海量文件的传输与Linux下大小写敏感问题
    RedHat7.4 yum配置
    虚拟机网络设置(NAT模式)
    Linux虚拟机安装(rhel 7.4)
    maven安装与基本配置
    安装JDK(Windows)
    VMware虚拟机开机自启动
  • 原文地址:https://www.cnblogs.com/wencaiguagua/p/15692384.html
Copyright © 2011-2022 走看看