关于marquee：跑马灯标签和iframe：浮动框架的应用

最新推荐文章于 2023-09-02 11:25:04 发布

自然醒L

最新推荐文章于 2023-09-02 11:25:04 发布

阅读量144

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_62981580/article/details/132302736

版权

跑马灯效果

在这个示例中，使用了CSS动画和颜色类来创建一个跑马灯效果。在<div>元素中添加了三个<span>元素，每个元素都有一个颜色类。然后使用CSS样式将它们放在一个容器中，并使用overflow: hidden;属性来隐藏超过容器宽度的内容。每个<span>元素都使用display: inline-block;来使它们在同一行显示，并使用animation属性来创建无限循环的动画效果。@keyframes规则定义了动画如何运动。该示例中使用了一个平滑的线性动画，持续15秒。最后，用CSS定义了三个颜色类，分别对应于红色、绿色和蓝色的文本颜色

<!DOCTYPE html>
<html>
<head>
	<title>彩色跑马灯</title>
	<style>
		.marquee {
			padding: 10px;
			background-color: #f5f5f5;
			overflow: hidden;
			box-sizing: border-box;
		}

		.marquee span {
			display: inline-block;
			padding-right: 50px;
			animation: marquee 15s linear infinite;
			box-sizing: border-box;
		}

		@keyframes marquee {
			0% { transform: translateX(0); }
			100% { transform: translateX(-100%); }
		}

		.red { color: red; }
		.green { color: green; }
		.blue { color: blue; }
	</style>
</head>
<body>
	<div class="marquee">
		<span class="red">红色文字</span>
		<span class="green">绿色文字</span>
		<span class="blue">蓝色文字</span>
	</div>
</body>
</html>

iframe 浮动框架

HTML浮动框架（float layout）是一种网站布局方式，通过将网页分割成多个区域，让内容在页面布局中自由地移动。

浮动布局的基本原理是通过设置CSS的float属性，让HTML元素浮动在页面上。当一个元素浮动后，它的周围的元素会自动围绕它排列，这样就可以实现一些比较复杂的网页布局效果。

浮动布局的优点是能够实现多列布局，适用于大多数网站。但是，它也有一些缺点，比如在元素高度不同时，会出现空隙。此外，浮动元素还可能会导致文档流混乱和排版问题。

在实际应用中，我们可以通过使用CSS框架或者自定义CSS样式来实现浮动布局。一些常用的CSS框架如Bootstrap、Foundation、Semantic UI等。同时，我们也可以使用CSS网格布局或者Flex布局来完成网页布局。

自然醒L

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于marquee：跑马灯标签和iframe：浮动框架的应用

在这个示例中，使用了CSS动画和颜色类来创建一个跑马灯效果。在元素中添加了三个元素，每个元素都有一个颜色类。然后使用CSS样式将它们放在一个容器中，并使用属性来隐藏超过容器宽度的内容。每个元素都使用来使它们在同一行显示，并使用属性来创建无限循环的动画效果。规则定义了动画如何运动。该示例中使用了一个平滑的线性动画，持续15秒。最后，用CSS定义了三个颜色类，分别对应于红色、绿色和蓝色的文本颜色iframe 浮动框架HTML浮动框架（float layout）是一种网站布局方式，通过将网页分割成多个区
复制链接

扫一扫