我找到了this pacman 动画的代码,它可以工作,但我无法理解那里发生了什么。
因此,我尝试使用以下代码创建更简单的动画以获得相同的效果:
function name2(){
$('.pacman').addClass('left');
function name(){
$('.pacman').removeClass('left');
}
setTimeout(name,1000);
}
setInterval(name2,100);
它有效,但结果看起来很难看。如何以更简单的方式创建相同的动画?
最佳答案
我认为更简单的方法是使用 css:
.pacman{
position: absolute;
top: 2px;
left: 0;
border-radius: 50%;
border: 49px solid yellow;
animation: pacman .5s ease-in-out infinite;|
}
@keyframes pacman {
0% {
border-left: 49px solid transparent;
}
50% {
border-left: 49px solid yellow;
}
100% {
border-left: 49px solid transparent;
}
}
Demo
关于javascript - 为 pacman 创建动画的更简单方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25645064/