笔记：css3 transition 实现div宽度以中心为原点向两边伸长

来源：互联网发布：使命召唤知乎编辑：程序博客网时间：2024/04/29 22:02

参考原文章（问答）：
css3 transition width在变长的时候能以中心为原点，向两边伸长吗？

我在项目中用来作为导航菜单的鼠标悬停交互 :
这里写图片描述

核心代码(CSS)：

.container {        text-align: center;    }.bar {        width: 100px;        display: inline-block;        transition: 1s all cubic-bezier(.46, 1, .23, 1.52);    }

1、需要使目标元素（.bar）位置居中，除了对其自身设置“display: inline-block;”且父元素设置“text-align: center;”，还可以对目标元素设置“margin: 0 auto;”
2、cubic-bezier(.46, 1, .23, 1.52) 为贝塞尔曲线函数，详情请自行查找参考文档。

以下为参考文章后修改过的示例代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>hoverSlideout Demo</title>    <style type="text/css">     .container {        text-align: center;    }    .bar {        width: 100px;        display: inline-block;        transition: 1s all cubic-bezier(.46, 1, .23, 1.52);        border: 1px solid #e3e3e3;        border-radius: 4px;        background-color: #ef5621;        padding: 10px 20px;        box-sizing: border-box;    }    .bar.active {        width: 200px;    } </style></head><body><h3>css3 transition 实现div宽度以中心为原点向两边伸长</h3><div class="container">    <div class="bar"></div></div><script src="js/jquery-1.11.3.min.js"></script><script type="text/javascript"> $('.bar').hover(function () {    $('.bar').toggleClass('active');}); </script></body></html>

阅读全文

0 0