css js 图片动画 |css里面的大于是什么意思

一、CSS 动画

/* 使用 keyframes 定义动画 */
@keyframes shake {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-10px);
}
100% {
transform: translateX(10px);
}
}
/* 应用动画效果 */
div {
animation: shake 0.5s infinite;
}

通过使用@keyframes关键字，大家可以定义一些关键帧的样式，以达到想要的动画效果。并通过animation属性将定义好的动画效果应用到元素上。

二、JS 动画

/* 使用 JS 实现移动动画 */
const box = document.querySelector('.box');
let pos = 0;
function move() { 
box.style.left = pos + 'px';
pos += 2;
if (pos< 100) {
requestAnimationFrame(move);
}
}
move();

通过使用 JS 的 DOM 操作，大家可以动态地改变元素的位置、大小、样式等属性，以达到各种动画效果。上述代码中，大家通过不断改变元素的 left 值，实现了一个简单的移动动画。

三、图片动画

/* 帧动画 */
img {
width: 100px;
height: 100px;
animation: playerFrames 0.5s steps(4) infinite;
background: url('player.png') no-repeat;
}
@keyframes playerFrames {
from {
background-position: 0 0;
}
to {
background-position: -400px 0;
}
}

在制作游戏、主题站等方面，大家常常需要使用帧动画来制作人物移动等效果。通过 CSS 的background-position属性，大家可以轻松地将不同的图片拼接成一个动画帧序列，并使用steps函数指定帧数，实现帧动画效果。