文本幻灯片显示动画-解网

问：

我正在尝试为我的个人饮食应用程序项目创建这个很酷的按钮 - 当鼠标悬停在它上面时，一个小文本会从右边滑出。它几乎完成了，只有一个问题我无法解决：我不希望文本漂浮在什么都没有，我希望它出现在一个带有黑色背景和黄色边框的盒子里......但是我的文本宽度为 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);
}

<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</head>

<div id="create-meal">
    <div>
        <button id="create-meal-button" class="btn">
            <svg xmlns="http://www.w3.org/2000/svg" height="50" viewBox="0 -960 960 960" width="50">
                <path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/>
            </svg>
        </button>
        <span id="create-meal-tooltip" class="bg-black p-1 rounded">Create meal</span>
    </div>
</div>

HTML CSS 推特引导

#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;
}

<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</head>

<div id="create-meal">
    <div>
        <button id="create-meal-button" class="btn">
            <svg xmlns="http://www.w3.org/2000/svg" height="50" viewBox="0 -960 960 960" width="50">
                <path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/>
            </svg>
        </button>
        <span id="create-meal-tooltip" class="bg-black p-1 rounded">Create meal</span>
    </div>
</div>

我习惯于改变原来的，这样它才能显得更光滑。另外，我用来实现“从右边滑出”。opacity:0;transform: translateX(-20px);

1赞 Kevin 11/2/2023 #2

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

#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 */
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div id="create-meal">
    <button id="create-meal-button" class="btn">
        <svg xmlns="http://www.w3.org/2000/svg" height="50" viewBox="0 -960 960 960" width="50">
            <path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/>
        </svg>
        <span id="create-meal-tooltip" class="bg-black p-1 rounded">Create meal</span>
    </button>
</div>

上一个：居中元素的文本

下一个：隐藏其中一个按钮，是个好方法吗？[关闭]

文本幻灯片显示动画

Text slide reveal animation

评论