悬停在按钮上时的动画

Question

我试图通过添加一个矩形来制作一些动画效果，当按钮（不是矩形，因为它设置为width: 0px; ）被用户悬停在按钮上时，该矩形在按钮上展开。 虽然，我真的不知道该怎么做，所以我被阻止了。

所以：

• 有一个按钮。
• 某处有一个矩形。
• 矩形的宽度为 0px。
• 当按钮悬停时，我希望矩形的宽度从 0 增加到 200 像素。 不是按钮。

我接受 javascript 解决方案，但只喜欢真正的基本解决方案，因为我是初学者，如果不向我解释，我将不会理解 javascript。

目前，这是我的代码：

HTML：

<div class="flex-container">
   
    <div class="sidebar">

        <button style="margin-top: 100px;" onclick="Accueil()"><div style="z-index: 2;">Accueil</div></button>
            <div class="rectangle" name="acc" style="top: 100px;"></div>

        <button onclick="Thés()"><div style="z-index: 2;">Thés</div></button> 
            <div class="rectangle" name="the" style="top: 100px;"></div>
        
        <button onclick="Tisanes()"><div style="z-index: 2;">Tisanes</div></button>
            <div class="rectangle" name="tis" style="top: 100px;"></div> 

        <button onclick="Théières()"><div style="z-index: 2;">Théières</div></button>
            <div class="rectangle" name="thei" style="top: 100px;"></div>

    </div>

CSS：

    .sidebar > button {
   margin: 20px; /* marge de 30px entre les boutons */
   width: 200px;
   height: 60px;
   max-height: 60px !important;
   max-width: 200px !important; 
   background-color: #F5FAD2;
   text-align: center;
   font-size: 24px;
   border-radius: 7%;
   border: none;
   transition-duration: 0.4s;
   cursor: pointer;
   color: #404040;
   position: relative;
   
}

.rectangle {
   width: 0px;
   height: 60px;
   color: rgba(255, 255, 255, 0.144);
   border-radius: 7%;
   border: none;
   transition: width 1.1s ease 0s;
   transition-timing-function: ease;
   transition-delay: 0s;
   position: absolute;
   z-index: 1;
}

.rectangle button:hover {
   width: 200px;
}

谢谢。

Answer 1

<button> Button </button>


button{
  transition:0.2s;
}

button:hover{
  width:200px
}

Answer 2

您可以在按钮 CSS 类中添加转换属性。 这将有助于增加矩形的大小。 悬停时，您可以调整刻度内的值以获得所需的大小。 复制下面的 CSS 和 HTML 代码以使其正常工作。

CSS：

.sidebar>button {
            margin: 20px;
            /* marge de 30px entre les boutons */
            width: 200px;
            height: 60px;
            max-height: 60px !important;
            max-width: 200px !important;
            background-color: #F5FAD2;
            text-align: center;
            font-size: 24px;
            border-radius: 7%;
            border: none;
            transition-duration: 0.4s;
            cursor: pointer;
            color: #404040;
            position: relative;

        }

        .btn:hover {
            width: 300px;
            transform: scale(1.3) perspective(0.4px);
        }

        .rectangle {
            color: rgba(255, 255, 255, 0.144);
            border-radius: 7%;
            border: none;
            position: absolute;
            z-index: 1;
        }

HTML：

<div class="flex-container">

        <div class="sidebar">

            <button style="margin-top: 100px;" class="btn">
                <div style="z-index: 2;">Accueil</div>
            </button>
            <div class="rectangle" name="acc" style="top: 100px;"></div>

            <button class="btn">
                <div style="z-index: 2;">Thés</div>
            </button>
            <div class="rectangle" name="the" style="top: 100px;"></div>

            <button class="btn">
                <div style="z-index: 2;">Tisanes</div>
            </button>
            <div class="rectangle" name="tis" style="top: 100px;"></div>
            <button class="btn">
                <div style="z-index: 2;">Théières</div>
            </button>
            <div class="rectangle" name="thei" style="top: 100px;"></div>

        </div>
    </div>

希望这个解决方案能帮到你！

Answer 3

也许它对你有用

 .rectangle-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: #e1e1e1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; padding:20px; color:#000; text-decoration: none; } .rectangle-out:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .rectangle-out:hover, .rectangle-out:focus, .rectangle-out:active { color: white; } .rectangle-out:hover:before, .rectangle-out:focus:before, .rectangle-out:active:before { -webkit-transform: scale(1); transform: scale(1); }

 <a class="rectangle-out" href="#">Rectangle Out</a>

Answer 4

我想我有你现在要找的东西

 .flex-container { display: flex; flex-direction: row; justify-content: center; } .rectangle { display: none; } .button { width: 200px; height: 60px; background-color: #F5FAD2; text-align: center; font-size: 24px; border-radius: 7%; border: none; transition-duration: 0.4s; cursor: pointer; color: #404040; position: relative; margin-right: 20px; } .button:hover + .rectangle { display: block; width: 200px; }

 <div style="text-align:center" class="flex-container"> <div class = "button">Accueil</div> <div class="rectangle">test</div> <div class = "button">Thés</div> <div class="rectangle">test</div> <div class = "button">Tisanes</div> <div class="rectangle">test</div> <div class = "button">Théières</div> <div class="rectangle">test</div> </div>

您可以在此处查看我使用此信息制作的小提琴： https : //jsfiddle.net/mbmarketing4you/j92mgsy6/46/

您必须使“矩形”成为按钮的子项，才能使悬停效果起作用。

Answer 5

也许它会对你有用。

访问我的 GitHub 页面。 我的网站总源代码在这里。 将鼠标悬停在此处的按钮上时会出现许多动画。

https://github.com/jacksonkasi0/mhibuddy

（或）访问我的网站： https : //mahibuddy.me

（或者）

HTML：

 <div class="lo">
    <ul>
  
  <li>
    <a href="./love/love.html" target="_blank">
      <i class="fa fa-heart"></i>
    </a> 
  </li>
  </ul>
</div>

CSS：

 .lo ul {
margin: 0;
padding: 0;
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);}

.lo > ul > li {
list-style: none;
margin: 0 15px;}

.lo > ul > li > a {
position: relative; 
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 63px;
background: #333;
border-radius: 50%;
font-size: 30px;
color: #666;
transition: 0.5s;}

.lo>ul>li>a :hover{
position: relative; 
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 63px;
background: rgb(255, 255, 255);
border-radius: 50%;
font-size: 30px;
/* color: #666; */
transition: 0.3s;}

.lo > ul > li > a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: #ff05de;
transition: .5s;
transform: scale(.9);
z-index: -1;}

.lo > ul > li > a:hover::before {
transform: scale(1.1);
box-shadow: 0 0 15px #ff6e9e;}

.lo > ul > li > a:hover {
color: #ff1058;
box-shadow: 0 0 5px #ff1088;
text-shadow: 0 0 5px #ff1044;}