Question

我刚刚开始搞乱转换，我认为它们非常好，可能会为未来的网站带来很多潜力。这是我目前的代码：

我想改变＆＃34;返回＆＃34;圆形/方形的过渡使得文本看起来不可见，因为它在文本上传回而不是文本笨拙地等待消失，直到方块回到原始位置。

我将如何做到这一点？

这是我的HTML：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div class="wrap">
        <div class="box2">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
        </div>
    <div class="box"></div>
    </div>
</body>
</html>

相关的CSS：

.box {
    height: 100px;
    width: 100px;
    background: blue;
    position: absolute;
    -webkit-transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, border-radius 1s linear 0s, background 1s linear 0s;
}
.box2 {
    height: 100px;
    width: 83%;
    padding: 10px;
    position: absolute;
    -webkit-box-sizing: border-box;
    opacity: 0;
    -webkit-transition: opacity .5s cubic-bezier(.5, -.5, .3, 1.3) .75s;
}
.box2 span {
    font-size: .90em;
    margin-right: 10%;
    float: left;
    font-family: 'Georgia', sans-serif;
}

.wrap:hover .box {
    border-radius: 50%;
    margin-left: 73%;
    background: coral;
}

.wrap:hover .box2 {
    opacity: 1;
}

Answer 1

您可以为“悬停在”和“悬停”设置不同的过渡，如下所示：

.box2 {
    height: 100px;
    width: 83%;
    padding: 10px;
    position: absolute;
    -webkit-box-sizing: border-box;
    opacity: 0;
    /* This is the transition for "hover out". Note the shorter delay. */
    -webkit-transition: opacity .5s cubic-bezier(.5, -.5, .3, 1.3) .2s;
}


.wrap:hover .box2 {
    opacity: 1;
    /* This is the transition for "hover". Note the longer delay. */
    -webkit-transition: opacity .5s cubic-bezier(.5, -.5, .3, 1.3) .75s;
}

WORKING EXAMPLE

如何改变＆＃34;返回＆＃34; CSS的过渡？

1 个答案: