Bootstrap 文本幻灯片显示动画

velaa5lx 于 7个月前发布在 Bootstrap

关注(0)|答案(2)|浏览(92)

我正在尝试为我的个人饮食应用程序项目创建一个很酷的按钮-当鼠标悬停时，一个小文本从右边滑出。它几乎完成了，只有一个问题我无法解决：我不想让短信内容毫无意义，我希望它出现在一个黑色背景和黄色边框的框内...但我的文本宽度为0，以便在按钮内启动动画，因此，我想要的黑框只是按钮中间的一条黑色竖线-而且，黑框总是可见的，而不是像鼠标悬停之前的文本那样透明。我只是无法让它工作-我尝试过增加宽度，将文本包围在容器中，风格化他们-它所做的只是改变了问题。帮助！

#create-meal-button {
    background-color: #ffc107;
    border-radius: 100%;
    transition: 0.3s;
    display:inline-block; 
}
#create-meal-button:hover {
    transform: scale(1.2);
    background-color: black;
    border: solid 0.1vw #ffc107;
}
#create-meal-button > svg { width: 50px; }
#create-meal-button > svg:hover { fill:#ffc107; }

#create-meal {
    text-align: center;
}

#create-meal > div {
    display: inline-block; 
}
span {
    display: inline-block; /* inline-block so width can be set */
    width: 0;
    white-space: nowrap; /* keep text in one line */
    direction: ltr; /* overflow direction */
    color: rgba(255,255,255,0); /* text transparency before hover */
    transition: .5s;
    transform: translateX(-20px); /* distance the text will move on hover */
    pointer-events: none;
}

#create-meal > div:hover span {
    color: #ffc107;
    border: solid 0.1vw #ffc107;
    transform: translateX(0);
}

个字符

twitter-bootstrap

来源：https://stackoverflow.com/questions/77406774/text-slide-reveal-animation

2条答案

按热度按时间

nzrxty8p1#

您可以对代码进行以下调整，并检查这是否是您想要的。

#create-meal-button {
    background-color: #ffc107;
    border-radius: 100%;
    transition: 0.3s;
    display:inline-block; 
    position: relative; /* Add this line */
    
}
#create-meal-button:hover {
    transform: scale(1.2);
    background-color: black;
    border: solid 0.1vw #ffc107;
}
#create-meal-button > svg { width: 50px; }
#create-meal-button > svg:hover { fill:#ffc107; }

#create-meal {
    text-align: center;
}

#create-meal > div {
    display: inline-block; 
}

#create-meal-tooltip {
overflow: hidden; /* Add this line */
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    color: rgba(255,255,255,0);
    transition: .5s;
    transform: translateX(-20px);
    position: absolute; /* Add this line */
    top: 50%;
    left: 50%;
     transform: translate(-50%, -50%) translateX(0%); /* Modified this line */
opacity:0;
}

#create-meal-button:hover #create-meal-tooltip {
    color: #ffc107;
opacity: 1;
    background-color: black;
    border: solid 0.1vw #ffc107;
    transform: translate(-50%, -50%) translateX(100%); /* Modified this line */
}

个字符

赞(0）回复(0）举报 7个月前

55ooxyrt2#

这是可以使文本出现在按钮周围的代码，而HTML没有变化。

#create-meal-button {
    background-color: #ffc107;
    border-radius: 100%;
    transition: 0.3s;
    display:inline-block; 
}
#create-meal-button:hover {
    transform: scale(1.2);
    background-color: black;
    border: solid 0.1vw #ffc107;
}
#create-meal-button > svg { width: 50px; }
#create-meal-button > svg:hover { fill:#ffc107; }

#create-meal {
    text-align: center;
}
#create-meal-tooltip {
    opacity:0;
    position:relative;
    transform: translateX(-20px);
    transition: opacity .5s, transform .5s;
    pointer-events: none;
    display:inline-block;
}
#create-meal:hover #create-meal-tooltip {
    opacity:1;
    transform: translateX(5px); /*add some space*/
    color: #ffc107;
    border: solid 0.1vw #ffc107;
}

个字符
我用opacity:0;来改变原来的一个，这样它可以显得更光滑。另外，我用transform: translateX(-20px);来实现“从右边滑出”。

赞(0）回复(0）举报 7个月前

我来回答

Bootstrap 文本幻灯片显示动画

2条答案

相关问题

热门标签

最新问答