animation 相关问题

我需要一个 :hover 元素，当鼠标悬停在该元素上时，会导致背景颜色在五种颜色之间变化。这是我现在正在使用的代码。我需要一个 :hover 元素，当鼠标悬停在该元素上时，会导致背景颜色在五种颜色之间变化。这是我现在正在使用的代码。 <div class="background_changer"> </div> .background_changer :hover { } 我知道这没什么好说的，但是帮助我调整一下就太好了。您需要将 animation 属性添加到 .background_changer:hover 选择器，如下所示：- 下面的代码将背景颜色更改为 5 种不同的颜色，但您也可以通过简单地将百分比均匀分布在 @keyframes 内来将其更改为更多或更少的颜色。 .background_changer{ height:100px; width:100px; background-color: black; cursor:pointer; } .background_changer:hover{ animation: glow linear 2s infinite; } @-webkit-keyframes glow { 0% { background-color:red; } 25% { background-color:orange; } 50% { background-color:green; } 75% { background-color:blue; } 100% { background-color:indigo; } } @keyframes glow { 0% { background-color:red; } 25% { background-color:orange; } 50% { background-color:green; } 75% { background-color:blue; } 100% { background-color:indigo; } } <div class="background_changer"> </div> 您正在寻找的是@keyframes下面的代码应该可以实现您想要的。 .bgchange { width: 300px; height: 300px; background: red; } .bgchange:hover { animation: anim 5s infinite; } @keyframes anim { 0% { background: red;} 20% { background: blue;} 40% { background: green;} 60% { background: orange;} 80% { background: yellow;} 100%{ background: pink;} } } <div class="bgchange"></div> 一种方法是使用 CSS 动画/关键帧。在这种情况下，关键帧被命名为 Change_Colour。然后该动画在类的 hover 状态下切换。按下面的运行代码片段按钮查看结果： .background_changer{ height: 5rem; width: 5rem; background-color: red; } .background_changer:hover{ animation: Change_Colour 1s infinite; } @keyframes Change_Colour { 0% {background-color: red;} 20% {background-color: orange;} 40% {background-color: yellow;} 60% {background-color: green;} 80% {background-color: blue;} 100% {background-color: red;} } <div class="background_changer"></div> 这是一个没有关键帧的想法： .background_changer{ height: 5rem; aspect-ratio: 1; background: linear-gradient(90deg, red 0 20%, blue 0 40%, green 0 60%, yellow 0 80%, purple 0) left/500% 100%; transition: 1s steps(5,jump-none); } .background_changer:hover{ background-position: right; } <div class="background_changer"></div>

html css animation hover

回答 4 投票 0

如何防止输入到跨度过渡动画顺风反应期间文本闪烁

我正在实现一个可扩展的输入字段，在失去焦点时会转换为跨度。输入在焦点上扩展并在转换回跨度时缩小。虽然宽度动画工作正常...

reactjs forms animation tailwind-css

回答 1 投票 0

EmotionCSS 清理生成的类

当使用 EmotionCSS 中的 css prop 时，它会生成一个带有随机哈希名称的 CSS 类，并将其添加到 DOM 的头部（据我所知）以及浏览器兼容性的各种变体...

css animation emotion

回答 1 投票 0

确保 .NET MAUI 中页面平滑过渡的最佳实践

在 dotNET MAUI 中使用 Shell 导航，确保页面转换始终具有动画效果并在不同设备上尽可能平滑地执行的最佳（最可靠）方法是什么？我迪...