黑马前端——days10_html_css

胆怯与勇敢

于 2024-08-17 11:41:36 发布

阅读量215

点赞数 2

分类专栏：黑马前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_52652401/article/details/141278191

版权

黑马前端专栏收录该内容

24 篇文章

订阅专栏

页面框架文件

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="bar">
    <div class="bar_in"></div>
  </div>
</body>

</html>

样式文件

.bar {
  width: 150px;
  height: 15px;
  border: 1px solid red;
  border-radius: 7px;
  padding: 1px;
}

.bar_in {
  width: 50%;
  height: 100%;
  background-color: red;
  /* 谁做过渡给谁加 */
  transition: all .7s;
}

.bar:hover .bar_in {
  width: 100%;
}