css关键帧中的独立变换效果
代码语言:html
所属分类:动画
代码描述:css关键帧中的独立变换效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div { transform: scale(var(--scaling, 1)) translateX(var(--translation, 0px)) translateY(calc(var(--translation, 0px) / 2)) rotate(var(--rotation, 0deg)); animation: move 2000ms infinite alternate ease-in-out, other 1400ms infinite alternate ease-in-out; } .supported div { --hue: 151; } @keyframes move { 100% { --translation: 75vmin; } } @keyframes other { 50% { --scaling: .8 } 75% { --rotation: 180deg; } 100% { --rotation: 120deg; } } div { width: 25vmin; height: 25vmin; border-radius: 5vmin; background: hsl(var(--hue, 343), 100%, 54%); border: 2vmin solid hsla(0, 0%, 0%, .5); will-change: transform; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0