动画化div onHover
动画化div onHover
提问于 2019-04-12 08:52:20
当光标在div上时，我想旋转一个div，就像在这段视频中一样。
我想使用关键帧，因为它们更可定制。
div.myElement {
...
animation: mainMenu 2s infinite;
animation-play-state: initial;
}
div.myElement:hover {
animation-play-state: running;
}
@keyframes mainMenu {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}它不工作，但我不知道我需要把什么放在我的div.myElement和div.myElement:hover。在div.Element中，div.Element:hover为0% ~ 100%，100% ~ 0%。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-04-12 08:58:46
我有一个框的动画，就像你编写示例https://jsfiddle.net/gnox69pv/5/一样
<div class="myElement"></div>
<div class="myElement"></div>
<div class="myElement"></div>CSS
div.myElement {
background-color: red;
height: 100px;
width: 100px;
margin:10px;
animation: change_width_back 0.7s forwards;
}
div.myElement:hover {
animation: change_width 0.7s forwards;
}
@keyframes change_width {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
@keyframes change_width_back {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(0deg);
}
}Stack Overflow用户
发布于 2019-04-12 09:08:21
试试这个：
<!DOCTYPE html>
<html>
<head>
<style>
div.myElement {
width : 100px;
height : 100px;
background-color : red;
transform: rotate(0deg);
animation-play-state: initial;
}
div.myElement:hover {
animation: mainMenu 2s infinite;
animation-play-state: running;
}
@keyframes mainMenu {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
</style>
</head>
<body>
<div class="myElement"></div>
</body>
</html>
如果你想让盒子停留在同一阶段，请使用以下命令：
<!DOCTYPE html>
<html>
<head>
<style>
div.myElement {
width : 100px;
height : 100px;
background-color : red;
animation: mainMenu 2s infinite;
animation-play-state: paused;
}
div.myElement:hover {
animation-play-state: running;
}
@keyframes mainMenu {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
</style>
</head>
<body>
<div class="myElement"></div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55647869
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号