代码之家 › 专栏 › 技术社区 › A.Copland

无关键帧的立方体贝塞尔CSS动画

css html

A.Copland · 技术社区 · 7 月前

我试图复制此视频中显示的动画,但无法使其工作- https://www.youtube.com/watch?v=aCWeVAu0v2U

我觉得我已经尽了一切努力让它发挥作用,但我所做的一切都不起作用。

我的代码:

<img class="item" src="https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg" alt="">
<img class="item" src="https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg" alt="">
<img class="item" src="https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg" alt="">
<img class="item" src="https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg" alt="">
<img class="item" src="https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg" alt="">

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
}

.item {
  width: 300px;
}

.item:hover {
  transition: width 0.5s cubic-bezier(.87,-1.38,.03,1.54);
}

1 回复 | 直到 7 月前

achille 7 月前

您可以将转换置于item的初始状态,如下所示:

    .item {
      width: 300px;
      transition: width 0.5s cubic-bezier(.87,-1.38,.03,1.54);
    }
    
    .item:hover {
      width: 500px;
    }

如果过渡在:hover中,则仅当元素悬停在上方时才会应用,因此不会有过渡动画

顺便说一句,从视频中截取了500px

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前