CSS实现元素width右方向变化、左方向变化、双向变化

最新推荐文章于 2023-08-10 21:45:57 发布

Qlly

最新推荐文章于 2023-08-10 21:45:57 发布

阅读量8.8k

点赞数 5

本文链接：https://blog.csdn.net/qq_29750277/article/details/99311430

版权

前端开发专栏收录该内容

26 篇文章 2 订阅

订阅专栏

改变dom元素的width值，页面上默认是向右变化（向右伸长以及向左缩短）。

以下为实现双向变化和向左变化（向左伸长以及向右缩短）

1、双向变化（实例）

<!DOCTYPE html>
<html lang="zh">
<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>
  <style>
    .parent {
      text-align: center;
    }
    .child {
      display: inline-block;
      width: 80px;
      height: 6px;
      background-color: #01AAED;
      transition: width .5s;
    }
    .child:hover {
      width: 200px;
    }
  </style>
</head>
<body style="margin: 20px 20px">
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

实现双向变化的关键是给要变化的dom元素，加一个父元素，并设置样式text-align: center;

此时width由80px伸长为200px，虽然还是往右伸长，

但由于子元素始终保持居中，所以在视觉上看上去就呈现双向变化了。

2、向左变化（向左伸长以及向右缩短）

类似于双向变化，只要让子元素始终保持右对齐，就可以实现向左变化（向左伸长以及向右缩短）。

.parent {
      text-align: right;
}

注：height往上变化、往下变化，向右变化也是类似的思路（以后会更新）

CSDN主页：https://blog.csdn.net/qq_29750277

Qlly

关注

5
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
CSS实现元素width右方向变化、左方向变化、双向变化

改变dom元素的width值，页面上默认是向右变化（向右伸长以及向左缩短）。以下为实现双向变化和向左变化（向左伸长以及向右缩短）1、双向变化（实例）<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" con...
复制链接

扫一扫