css - 在悬停 CSS 变换时防止闪烁
问题描述
如果鼠标不在图像中心附近,则悬停垂直旋转的锚点时,动画变换会使用以下代码闪烁:
@keyframes spin {0% {transform: rotateX(0deg);} 100% {transform: rotateX(360deg);}}
a:focus, a:hover {animation: spin 0.9s 1 linear;}
如何在不更改 HTML 的情况下防止闪烁?
解决方案
为了避免:hover
离开a
和闪烁,你可能会:hover
从a
它的父级移动:
@keyframes spin {
100% {
transform: rotateX(360deg);
}
}
ul {
display: flex;
flex-direction: column;
align-items: flex-start;
}
li:hover {
cursor: pointer;
}
a:focus,
li:hover a {
animation: spin 0.9s 1 linear;
}
ul a {
color: #000;
display: inline-block;
height: 50px;
}
ul a:focus,
ul li:hover a {
background-image: radial-gradient(ellipse at center, #777 0%, #222 100%);
color: #fff;
}
<ul>
<li><a href="admin/">Admin</a></li>
<li><a href="appointments/">Appointments</a></li>
<li><a href="blog/">Blog</a></li>
<li><a href="calendar/">Calendar</a></li>
<li><a href="contact/">Contact</a></li>
<li><a href="events/">Events</a></li>
<li><a href="forms/">Forms</a></li>
<li><a href="forums/">Forums</a></li>
<li><a href="guestbook/">Guestbook</a></li>
<li><a href="mail/">Mail</a></li>
<li><a href="members/">Members</a></li>
<li><a href="newsletter/">Newsletter</a></li>
<li><a href="notifications/">Notifications</a></li>
<li><a href="search/">Search</a></li>
</ul>
推荐阅读
- r - 使用 ggplot 绘图时地图放置国家
- performance - Intel Advisor - 在本地 Windows GUI 上查看 Linux 云的结果
- verilog - 更改为自动时钟会导致输出变为空白
- c++ - 使用 std::forward 与 RefRefCast 完美转发
- android - 如何让应用程序 UI 在所有设备上 100% 相同?
- python - Graphene 中提供的 GraphQLError() 有多大用处?
- python - 如何保存 matplotlib imshow() 的结果数据?
- android - 动态功能模块导航 IllegalStateException:包含
的 id 与目标 id 不同 - asp.net - 使用 SSRS 报告参数接受来自 ASP.NET Web 应用程序的逗号分隔整数
- uniqueidentifier - 从调查中获取所有 responseId