利用CSS动画使文字滑动展示

利用CSS动画使文字滑动展示

效果展示
思路：两个div嵌套使用，分为外层div，内层div，外层div用来做滑动边框,内层div用来装载滑动展示文字，通过margin,padding属性设置两个div完全重合。
1、外层div设置上下边框，使用animation属性使其边框具有向右滑动显示的效果，鼠标悬浮后停止动画。
2、内层div设置文字溢出隐藏，使用white-space属性设置隐藏方式，鼠标悬浮后使用渐变展示文字。

代码如下：
CSS

.text-border {
	position: absolute;
	left: 38%;
	top: 5%;
	border-top: 1px solid black;
	border-bottom:1px solid black;
	/*使内外层重合，padding一定要设置为0*/
	padding: 0;
	/*外层不设置宽，让其内容撑开*/
	height: 30px;/*内外层高度设置一样*/
	/*使用animation属性使外层边框具有向右滑动显示的效果*/
	-webkit-animation: anim 0.8s infinite ease;
	-moz-animation: anim 0.8s infinite ease;
	animation: anim 0.8s infinite ease;
}
/*鼠标悬浮后外层边框停止动画*/
.text-border:hover {
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	animation-play-state: paused;
}
.text {
	/*使内外层的上下边框重合*/
	margin:-1px 0 0 0;
	/*使内外层重合，padding一定要设置为0*/
	padding: 0;
	border-top: 1px solid black;
	border-bottom:1px solid black;
	width: 100px;
	height: 30px;
	color: black;
	/*文字隐藏方式*/
	white-space: nowrap;
	/*文字末尾显示省略号*/
	text-overflow: ellipsis;
	overflow: hidden;
	/*使用渐变使文字向右滑动，配合伪类元素做改变*/
	-webkit-transition: width 2s;
	-moz-transition: width 2s;
	transition: width 2s;
}
/*鼠标悬浮后，内层div的宽度变长，配合渐变是其有动画效果，渐变展示文字*/
.text:hover {
	width: 650px;
}

/*改变外层div的宽度使其边框有向右滑动的效果*/
@keyframes anim {
	from {
		width: 100px;
	}
	to {
		width: 150px;
	}
}

html

<div class="text-border">
	<div class="text">
			If you miss the train I'm on，
		You will know that I am gone，
		You can hear the whistle blow a hundred miles，
		A hundred miles A hundred miles，
		A hundred miles A hundred miles，
		You can hear the whistle blow a hundred miles，
		Lord I'm one Lord I'm two，
		lord I'm three Lord I'm four，
		Lord I'm five hundred miles away from home，
		away from home away from home，
		away from home away from home，
		Lord I'm five hundred miles away from home，
		Not a shirt on my back，
		Not a penny to my name，
		Lord I can't go back home this a way，
		this a way this a way，
		this a way this a way，
		Lord I can't go back home this a way，
		If you miss the train I'm on，
		You will know that I am gone，
		You can hear the whistle blow a hundred miles，
		A hundred miles A hundred miles，
		A hundred miles A hundred miles，
		You can hear the whistle blow a hundred miles，
		You can hear the whistle blow a hundred miles，
		You can hear the whistle blow a hundred miles
	</div>
</div>