不可能给一个图像不止一个过渡吗?
Is it not possible to give an image more than one transition?
所以我制作了一个带有复选框的 php 表格,我将其显示为图像。现在我给了他们一个过渡,如果你点击它们, 会从不透明度 0.5 变为 1
现在我想将边框颜色从红色更改为黄色,但如果我将这 2 个过渡组合在一起,似乎只有一个有效。不透明度在那里,但它立即从 0.5 变为 1,而不是在 2 秒的时间跨度内
这是我的 css,有 2 个转换:
img {
width: 100%;
max-width: 390px;
height: 100%;
max-height: 250px;
margin: -3px;
border-radius:15px;
transition:opacity 2s ease;
opacity: 0.5;
transition: border 1s ease;
border: red 3px solid;
}
现在还有一些重要代码我无法显示,因为漂亮的 Whosebug 编辑器不接受它,因为 css
还是希望有人能帮帮我
您可以在同一 transition:
规则中用逗号分隔多个转换。
img {
width: 100%;
max-width: 390px;
height: 100%;
max-height: 250px;
margin: -3px;
border-radius:15px;
transition:opacity 2s ease, border 1s ease;
opacity: 0.5;
border: red 3px solid;
}
如果您有多个转场,所有转场都具有相同的持续时间和计时功能,您可以使用 shorthand all
:
transition: all 2s ease;
所以我制作了一个带有复选框的 php 表格,我将其显示为图像。现在我给了他们一个过渡,如果你点击它们, 会从不透明度 0.5 变为 1 现在我想将边框颜色从红色更改为黄色,但如果我将这 2 个过渡组合在一起,似乎只有一个有效。不透明度在那里,但它立即从 0.5 变为 1,而不是在 2 秒的时间跨度内
这是我的 css,有 2 个转换:
img {
width: 100%;
max-width: 390px;
height: 100%;
max-height: 250px;
margin: -3px;
border-radius:15px;
transition:opacity 2s ease;
opacity: 0.5;
transition: border 1s ease;
border: red 3px solid;
}
现在还有一些重要代码我无法显示,因为漂亮的 Whosebug 编辑器不接受它,因为 css
还是希望有人能帮帮我
您可以在同一 transition:
规则中用逗号分隔多个转换。
img {
width: 100%;
max-width: 390px;
height: 100%;
max-height: 250px;
margin: -3px;
border-radius:15px;
transition:opacity 2s ease, border 1s ease;
opacity: 0.5;
border: red 3px solid;
}
如果您有多个转场,所有转场都具有相同的持续时间和计时功能,您可以使用 shorthand all
:
transition: all 2s ease;