CSS 中过渡动画(transition)的使用

原创已于 2023-01-07 09:42:36 修改 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

web前端基础笔记

当前文章被收录于：

web前端基础笔记

10 篇文章 2 人学习

web前端基础笔记

订阅专栏查看详情

当前文章被以下社区和专栏收录：

于 2021-12-27 15:18:31 首次发布

博主分享了一篇易于理解且幽默的教学文章，教授如何使用HTML和CSS创建模仿进度条的过渡动画，适合初学者学习CSS动画技术。

博主前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住也分享一下给大家，
👉点击跳转到网站

前言： 通过模仿进度条进度，来练习使用过渡动画。

HTML代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.bar {
				margin: 0 auto;
				width: 150px;
				height: 15px;
				border: 1px solid red;
				border-radius: 7px;
			}

			.bar_in {
				width: 50%;
				height: 100%;
				background-color: red;
				border-radius: 7px;
				 /* transition:要过渡的属性 花费时间 运动曲线 何时开始 */
				transition: width .5s ease 0s;
			}

			.bar:hover .bar_in {
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="bar">
			<div class="bar_in">

			</div>
		</div>
	</body>
</html>