我今天才开始弄乱转换，我认为它们很棒，并且对 future 的网站有很大的潜力。这是我当前的代码:
我想更改圆圈/正方形的“返回”过渡，以便文本在返回到文本上方时似乎变得不可见，而不是文本笨拙地等待消失，直到正方形回到其原始位置。
我该怎么做呢？
这是我的 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;
}
最佳答案
您可以为“悬停”和“悬停”设置不同的过渡效果，如下所示:
.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;
}
关于css - 如何更改 CSS 中过渡的 "return"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25559764/