单个div+css实现棋盘生产过程动画效果代码
代码语言:html
所属分类:动画
代码描述:单个div+css实现棋盘生产过程动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .chess { height: 80vh; aspect-ratio: 1; background: #e6d5bd; display: grid; animation: move 6s linear infinite; transform-style: preserve-3d; } @keyframes move { 0% {transform:translateX(-100vw)} 60% {transform:translate(-12.5vh)} 16.67%, 52%, 66.67%, 83.33%{transform:translate(0)} 100% {transform:translateX(100vw)} } .chess:before { content:""; grid-area: 1/1; margin: .5vh; --_g: conic-gradient(#0000 270deg,#732f06 0); background: var(--_g),var(--_g) 16.5% 16.5%; background-size: 25% 25%; -webkit-mask: linear-gradient(#000 0 0) 0% calc(100% + 12vh) no-repeat; animation: mask 6s linear infinite, fix 6s linear infinite; } @keyframes mask { 0%, 16.67% {-webkit-mask-size: 100% 0vh} 50%, 100% {-webkit-mask-size: 100% 104vh} } @keyframes fix { 0%, 52% {background-position: 0 0,0 16.67%} 60%, 100.........完整代码请登录后点击上方下载按钮下载查看
网友评论0