CSS3 滚动新闻

在这里插入图片描述
<marquee>在HTML和HTML5中都属于废弃的特性，建议不要使用这个标签。代替的方案就是使用CSS3中的animation和keyframes来实现跑马灯。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<style>
:root{
	--marquee-width: 15em;
	--marquee-height: 1.5em;
	--marquee-indent: 2em;
	--marquee-horizontal-duration: 5s;
	--marquee-vertical-duration: 0.5s;
	/* 设置font-size用来等比例缩放em和rem单位的值 */
	font-size: 200%;
}
a, a:link, .a:visited, a:hover, a:active {
	text-decoration: none;
	color:inherit;
}
.marquee {
	/* ul和ol默认padding不为0; div的padding默认为0	*/
	padding:0;
	width: var(--marquee-width);
	height: var(--marquee-height);
	overflow: hidden;
	/* 当子元素是absolute的时候，overflow-x: hidden只有当父对象的position=relative的时候才会生效 */
	position: relative;
	
	line-height: var(--marquee-height);
	background-color: #f5f5f5;
	border: 1px solid #DDD;
	border-radius: calc(var(--marquee-height) / 2);
	box-shadow: 1px 1px 3px #333 ;
}
.marquee-horizontal::before {
	/* content 里面只能存储纯文本，如果需要a标签，就不能使用伪元素 */
	content: "This is a test about marquee, hello world...";
	white-space: nowrap;
	animation: anim-marquee-horizontal var(--marquee-horizontal-duration) linear infinite;
	/* indent指的是段落开头留白的宽度，通过该值可以模拟出每轮文字动画的间隔效果 */
	/* 只有当position=absolute的时候，子元素宽度才能超过父元素 */
	position:absolute;
	text-indent: var(--marquee-indent);
}
@keyframes anim-marquee-horizontal {
	from {
		/*
		在left,margin,text-indent中使用"百分比%"符号，指的都是相对父对象的长度
		translate的"百分比%"相对的是自身长度(但要注意，只有子元素为absolute的时候，子元素长度才能超过父元素，否则最大只能占满父元素的内容宽度)
		*/
		transform: translateX(var(--marquee-width));
	}
	to {
		transform: translateX(-100%);
	}
}

.marquee-vertical>ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: center;
	transition: margin-top var(--marquee-vertical-duration) linear;
}
.marquee-vertical-anim {
	/* animation-fill-mode: forwards 用来让动画执行完后保留在最后的位置 */
	animation: anim-marquee-vertical var(--marquee-vertical-duration) forwards;
}
@keyframes anim-marquee-vertical {
	from {
		margin-top: 0;
	}
	to {
		margin-top: calc(var(--marquee-height) * -1);
	}
}
</style>
<script>
let data = [
	["第一条新闻（1）", "#1"],
	["第二条新闻（2）", "#2"],
	["第三条新闻（3）", "#3"]
];

window.onload = () => {
	const marqueeVertical = document.getElementById("marquee-vertical");
	data.forEach((item)=>{
		const li = document.createElement("li");
		const a = document.createElement("a");
		a.setAttribute("href", item[1]);
		a.innerText = item[0];
		li.appendChild(a);
		marqueeVertical.appendChild(li);
	});
	const classList = marqueeVertical.classList;
	const animCls = "marquee-vertical-anim";
	let marqueeIntervalId = setInterval(()=>{
		if(classList.contains(animCls)) {
			classList.remove(animCls);
			//firstChild等价于children[0]
			//const firstChild = marqueeVertical.firstChild;
			const firstChild = marqueeVertical.children[0];
			marqueeVertical.removeChild(firstChild);
			marqueeVertical.appendChild(firstChild);
		} else {
			classList.add(animCls);
		}
		//这里的时间单位为毫秒，设置为动画时间的两倍，可以让文字有停顿的时间
	}, 1000);
}
</script>
</head>
<body>
	<div class="marquee marquee-horizontal"></div>
<br>
	<div class="marquee marquee-vertical">
		<ul id="marquee-vertical" data-duration="1"></ul>
	</div>
</body>
</html>
猜你喜欢
