用css特性来编写进度条

最新推荐文章于 2024-09-17 22:59:44 发布

asnone0

最新推荐文章于 2024-09-17 22:59:44 发布

阅读量157

点赞数

分类专栏：代码文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_53912756/article/details/128148305

版权

代码专栏收录该内容

6 篇文章 0 订阅

订阅专栏

鼠标移动到bar上就会慢慢过渡100%

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<style type="text/css">
	.bar{
		width: 150px;
		height: 15px;
		border: 1px solid red;
		border-radius: 7px;
		margin: 100px auto;
	}
	.bar_in{
		width: 50%;
		height: 100%;
		background-color: red;
        transition: width 0.5s;
	}
	.bar:hover .bar_in{
		width: 100%;
	}
</style>
<body>
    <div class="bar">
    	<div class="bar_in"></div>
    </div>
</body>
</html>