当您将鼠标悬停在它上面时,我正在尝试使用 CSS 关键帧制作 svg img 抖动。
这是我想要达到的效果:https://www.w3schools.com/code/tryit.asp?filename=FZ7CQHXPG42J
有一些 javascript 可以为相同的 svg 设置动画,但它以父 div #ellipse 为目标,当单击汉堡包图标时,它从左向右移动。我看不出它会如何干扰,但我添加它只是为了确保。
我在下面添加了相关代码。有关完整代码,请参阅网站。
// Other unrelated(!?) animations on #ellipse //
function moveEllipseRight() {
ellipse.animate([
// keyframes
{
transform: 'translateX(0px)'
},
{
transform: 'translateX(' + width + 'px)'
}
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});
}
function moveEllipseLeft() {
ellipse.animate([
// keyframes
{
transform: 'translateX(' + width + 'px)'
},
{
transform: 'translateX(0px)'
}
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});
}
#ellipse {
position: absolute;
top: 120px;
z-index: -99;
animation: 3s linear 0s slide 1;
left: -200px;
}
img.shake:hover {
animation: shake 0.5s;
animation-iteration-count: infinite;
}
@keyframes shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
transform: translate(3px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
transform: translate(-3px, 1px) rotate(0deg);
}
70% {
transform: translate(3px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
transform: translate(1px, 2px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
<div id="ellipse">
<img src="https://lh5.googleusercontent.com/-yqttzktPkDY/AAAAAAAAAAI/AAAAAAAABGU/z6CVGRmY-C8/photo.jpg?sz=328" alt="ellipse" class="shake" width="400" height="400" />
</div>
最佳答案
问题出在您的 #ellipse
样式上。
#ellipse {
position: absolute;
top: 120px;
z-index: -99; /* remove this, it is not doing anything useful. */
animation: 3s linear 0s slide 1;
left: -200px;
}
问题是,悬停根本没有被触发,因为它位于 container
元素后面,因为负 z-index
。这个负 z 索引根本没有用,除非您打算将文本放在图像上方,而我在您的站点中看不到这种情况。
关于css - 悬停时的 SVG 摇动动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54181050/