Question

我正在尝试通过添加一个矩形来制作一些动画效果，当用户将鼠标悬停在按钮上时，该矩形会在按钮上方扩展（而不是矩形，因为它已设置为width: 0px;）。虽然，我真的不知道该怎么做，所以我被封锁了。

所以：

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

我接受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类中添加transform属性。这将有助于增加矩形的大小。您可以调整比例尺内的值，以将其悬停在所需的尺寸上。复制下面的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;}

悬停在按钮上时的动画

5 个答案: