纯css文字无限滚动效果 垂直 和 水平的公告效果

 狼丶宇先生   2018-11-16 10:29   942 人阅读  0 条评论

 垂直滚动效果


<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>纯css实现文字循环滚动效果</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.content .winner-list-thead-row {
				font-size: 0.75rem;
				display: flex;
				flex-direction: row;
			}
			
			.content .winner-list-thead-row .winner-list-td {
				padding: 0.5rem 0.25rem;
				font-size: inherit;
				display: flex;
				flex: 2;
				min-width: 1px;
				color: #000;
			}
			
			.content .winner-list-thead-row .winner-list-td:first-child {
				flex: 1;
			}
			
			.content .winner-list-thead-row .winner-list-td:not(:first-child) {
				justify-content: flex-end;
			}
			
			.content .winner-list-table {
				flex-direction: column;
				width: 100%;
				height: 247px;
				overflow: hidden;
				display: flex;
			}
			
			.content .winner-list-table .winner-list-tbody {
				position: relative;
				animation: scrollChild 20s linear infinite;
			}
			
			.content .winner-list-table .winner-list-tbody:hover {
				animation-play-state: paused;
			}
			
			.content .winner-list-table .winner-list-tbody .winner-list-cover-up-list {
				z-index: 1;
				position: relative;
				background-color: #fff;
			}
			
			.content .winner-list-table .winner-list-tbody .winner-list-cover-up-list .winner-list-tbody-row {
				font-size: 12px;
				display: flex;
				flex-direction: row;
			}
			
			.content .winner-list-table .winner-list-tbody .winner-list-cover-up-list .winner-list-tbody-row .winner-list-td {
				padding: 8px 4px;
				font-size: inherit;
				display: flex;
				flex: 2;
				min-width: 1px;
				color: #000;
			}
			
			.content .winner-list-table .winner-list-tbody .winner-list-cover-up-list .winner-list-tbody-row .winner-list-td:first-child {
				flex: 1;
			}
			
			.content .winner-list-table .winner-list-tbody .winner-list-cover-up-list .winner-list-tbody-row .winner-list-td:not(:first-child) {
				justify-content: flex-end;
			}
			
			.content .winner-list-table .winner-list-tbody .winner-list-cover-up-list .winner-list-tbody-row:nth-child(2n) {
				background-color: #f2f2f2;
			}
			
			@keyframes scrollChild {
				0% {
					transform: translateY(0);
				}
				to {
					transform: translateY(-100%);
				}
			}
		</style>
	</head>

	<body>
		<div class="content">
			<div class="winner-list-thead-row">
				<div>
					<div>用户名</div>
					<div>奖金</div>
					<div>彩种</div>
				</div>
			</div>
			<div class="winner-list-table">
				<div class="winner-list-tbody">
					<div class="winner-list-cover-up-list">
						<div class="winner-list-tbody-row">
							<div>shu***</div>
							<div>328.68元</div>
							<div>极速3D</div>
						</div>
						<div>
							<div>shu***</div>
							<div>328.68元</div>
							<div>极速3D</div>
						</div>
						<div>
							<div>shu***</div>
							<div>328.68元</div>
							<div>极速3D</div>
						</div>
						<div>
							<div>shu***</div>
							<div>328.68元</div>
							<div>极速3D</div>
						</div>
						<div>
							<div>shu***</div>
							<div>328.68元</div>
							<div>极速3D</div>
						</div>
						<div>
							<div>shu***</div>
							<div>328.68元</div>
							<div>极速3D</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>



横向滚动效果


<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>纯css实现文字循环滚动效果</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.notice-container {
				padding: 0 10px;
				align-items: center;
				margin: 0 auto;
				display: flex;
				flex-direction: row;
				flex: 1;
			}
			
			.notice-container .header-notice-marquee {
				margin: 0 10px;
				position: relative;
				width: 100%;
				overflow: hidden;
				height: 30px;
				animation: marquee 30s linear infinite;
			}
			
			.notice-container .header-notice-marquee:hover {
				animation-play-state: paused;
			}
			
			.notice-container .header-notice-marquee .header-marquee-item {
				position: absolute;
				top: 0;
				left: 0;
				white-space: nowrap;
			}
			/* Make it move */
			
			@keyframes marquee {
				0% {
					text-indent: 27.5em;
				}
				100% {
					text-indent: -105em;
				}
			}
		</style>
	</head>

	<body>
		<div class="notice-container">
			<div class="header-notice-marquee">
				<div class="header-marquee-item">
					<i class="horn fa fa-bullhorn"></i>
					<div id="notice-marquee">
						<span>尊敬的会员您好,如您遇到无法充值问题,我们强烈建议使用银联支付充值,成功率高,单笔充值额度大,支付成功火速到账,并还有几率获得公司重磅推出的神秘彩金一份哦,赶快尝试使用银联支付充值吧!下一个幸运会员就是您~~</span>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>



本文地址:http://hao2013.cn/?id=57
版权声明:本文为原创文章,版权归 狼丶宇先生 所有,欢迎分享本文,转载请保留出处!
NEXT:已经是最新一篇了