css数字/文字滚动效果

最新推荐文章于 2024-06-19 14:56:38 发布

judy_1118

最新推荐文章于 2024-06-19 14:56:38 发布

阅读量2.5k

点赞数 1

分类专栏： h5 html+css 文章标签： css

本文链接：https://blog.csdn.net/judykang123/article/details/112008051

版权

h5 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

html+css

12 篇文章 1 订阅

订阅专栏

效果：

在这里插入图片描述

原理

利用伪类，开始的时候给本来的内容盖住，然后执行动画。
设置宽高，宽就是单个内容（比如数字中的一位数）的宽，让内容一行一个的排成列。
动画就是让这些内容一个个的往上升，造成一种滚动效果
最后露出原来的内容（原来的内容和伪类里的内容是同样的样式）

代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>数字滚动</title>
	<style>
		/*无关紧要的属性*/
		.txt {
			position: absolute;
			left: 178px;
			font-size: 30px;
			line-height: 30px;
		}

		/*接下来这一段是重点*/
		/*设置内容和伪类的样式*/
		.mod_txt {
			position: relative;
			display: inline-block;
			vertical-align: middle;
			text-align: center;
			float: left;
			overflow: hidden;
			width: 22px;
			height: 30px;
			text-transform: uppercase;
			font-size: 30px;
			color: #333;
		}

		.mod_txt:before {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			word-break: break-all;
			background: #FFFFFF;
			font-size: 30px;
			color: #333;
		}

		/*设置里面第一个数字的动画*/
		.txt11 span:nth-child(1):before {
			content: "03456789";
			-webkit-animation-name: txt1;
			animation-name: txt1;
			-webkit-animation-duration: 1.6s;
			animation-duration: 1.6s;
			/* -webkit-animation-delay: 0.3s;
			animation-delay: 0.3s; */
			-webkit-animation-fill-mode: forwards;
			animation-fill-mode: forwards;
		}

		/*随便写的数，作用就是让这一列数字向上升，形成滚动效果*/
		@-webkit-keyframes txt1 {
			from {
				margin-top: -648px;
			}

			to {
				margin-top: 110px;
			}
		}

		/*设置里面第二个数字的动画*/
		.txt11 span:nth-child(2):before {
			content: "051341989";
			-webkit-animation-name: txt1;
			animation-name: txt1;
			-webkit-animation-duration: 1.8s;
			animation-duration: 1.8s;
			-webkit-animation-fill-mode: forwards;
			animation-fill-mode: forwards;
		}
	</style>
</head>
<body>
	<div class="txt txt11">
		<span class="mod_txt">2</span>
		<span class="mod_txt">0</span>
	</div>
</body>
</html>

唠唠叨叨

想让动画停留的时间不一样，就要让animation-duration不一样
想让动画开始运动的时间不同，就单加animation-delay,但这样会让原来的数字先被看到一会
想先不让动画执行，到一定时间了再执行的话，以上面的demo为例，html里可以先不写class名txt11
，等到了时候再$('.txt').addClass('txt11');就好了

judy_1118

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css数字/文字滚动效果

效果：原理利用伪类，开始的时候给本来的内容盖住，然后执行动画。设置宽高，宽就是单个内容（比如数字中的一位数）的宽，让内容一行一个的排成列。动画就是让这些内容一个个的往上升，造成一种滚动效果最后露出原来的内容（原来的内容和伪类里的内容是同样的样式）代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>数字滚动</title> <style
复制链接

扫一扫