1. 首页
  2. css

交错的CSS转换

假设你想在:hover上移动一个元素以获得有趣的视觉效果。
@media (hover: hover) {.list–item {transition: 0.1s;transform: translateY(10px);}.list–item:hover,.list–item:focus {transform: translateY(0);}}
酷。但是如果您有几个列表项,并且您希望它们都在悬停状态下移动,但是每一个都以错开的时间偏移呢?
诀窍在于transition-delay内,对每个项目应用稍微不同的延迟。让我们分别选择每个列表项并应用不同的延迟。在这种情况下,我们将选择一个内部span,只是为了好玩。
***3**
如果您想给自己多一点编程控制,您可以将延迟设置为一个CSS自定义属性:
@media (hover: hover) {.list {–delay: 0.05s;}.list li a span {transform: translateY(100px);transition: 0.2s;}.list:hover span {transform: translateY(0);}.list li:nth-child(1) span {transition-delay: calc(var(–delay) * 0);}.list li:nth-child(2) span {transition-delay: calc(var(–delay) * 1);}.list li:nth-child(3) span {transition-delay: calc(var(–delay) * 2);}.list li:nth-child(4) span {transition-delay: calc(var(–delay) * 3);}.list li:nth-child(5) span {transition-delay: calc(var(–delay) * 4);}.list li:nth-child(6) span {transition-delay: calc(var(–delay) * 5);}}/pre>
这可能对您的口味有点挑剔。假设你的单子开始增长,可能会增加到七个或更多的项目。令人震惊的是,新的东西突然不起作用了,因为这并不能解释那么多的列表项。
如果你愿意的话,你可以通过HTML传递延迟:

@media (hover: hover) {.list li a span {transform: translateY(100px);transition: 0.2s;}.list:hover span {transform: translateY(0);transition-delay: var(–delay); /* comes from HTML */}}
或者如果你喜欢,你可以创建一个循环,其中包含比你现在需要的更多的项目(知道额外的代码将非常有效地gzip掉):
@media (hover: hover) {/* base hover styles from above */@for $i from 0 through 20 {.list li:nth-child(#{$i + 1}) span {transition-delay: 0.05s * $i;}}}
无论你是否选择循环超过你需要的项目,这都可能很有用

交错的CSS转换 为WP2原创文章,链接:https://www.wp2.cn/css/%e4%ba%a4%e9%94%99%e7%9a%84css%e8%bd%ac%e6%8d%a2/