黑马前端——days10_html_css

胆怯与勇敢

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

阅读量25

点赞数 1

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

本文链接：https://blog.csdn.net/qq_52652401/article/details/141278191

版权

黑马前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

页面框架文件

<!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%;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

胆怯与勇敢

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
黑马前端——days10_html_css

页面框架文件<!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>
复制链接

扫一扫