是否可以沿父元素(div)的边界悬停动画html元素(div)?实际上,我已经回答了该问题的第一部分,但是我无法使动画从某个点开始发生,然后在鼠标关闭时动画回到起点。我可能试图将CSS推得太远。但这有可能吗?如果您在示例代码中注意到,将鼠标悬停在该小框上时,该小框会跳到拐角处并开始平滑地进行动画处理,然后将鼠标移开后,它会突然捕捉回到原始位置。我也尝试过对位置属性进行动画处理,但仍然行不通。这是我所能获得的最接近的。
html, body {
height: 100%;
background-color: #000000;
color: #ffffff; }
.container {
height: 100%;
display: flex;
border: 1px solid green;
align-items: center;
justify-content: center; }
.container > div {
position: relative;
text-align: center; }
.sqwr-orbit {
height: 10px;
width: 10px;
background: #ffffff;
margin: 0 auto; }
.ignite:hover #square {
animation-duration: 12s;
animation-name: squareorbit;
animation-timing-function: linear;
animation-iteration-count: infinite; }
@keyframes squareorbit {
0% {
margin: 0 50% 0 0; }
25% {
margin: 90% 0 0 0; }
50% {
margin: 90% 0 0 90%; }
75% {
margin: 0 0 0 90%; }
100% {
margin: 0;
transform: rotateZ(1800deg); } }
<div class="container">
<div>
<div class="ignite" style="padding: 5px;height: 100px; width: 100px; position: relative;">
<div class="sqwr-orbit" id="square"></div>
<div style="position: absolute; border: 1px solid #fff; top: 8px; left: 10px; width: 80%; height: 84%;">
</div>
</div>
</div>
</div>