css实现小火车动画效果
代码语言:html
所属分类:动画
代码描述:css实现小火车动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --purple: #888ECD; --pink: #D68699; --yellow: #F3FB85; --yellow-dark: #E0E87A; --green: #8BE3AD; } body{ background: #65BFF7; position: relative; } .box-canvas{ position: absolute; display: -webkit-box; display: flex; top: 150px; margin-bottom: 8%; width: 630px; height:200px; background-image: linear-gradient( transparent, transparent 130px, gray 130px, gray 140px, transparent 140px); background-size: 550px 200px; background-repeat: no-repeat; background-position: center; -webkit-box-pack: justify; justify-content: space-between; -webkit-animation: moveLeft 7s infinite linear; animation: moveLeft 7s infinite linear; } @-webkit-keyframes moveLeft { 0% { -webkit-transform: translateX(100vw); transform: translateX(100vw); } 100% { -webkit-transform: translateX(-630px); transform: translateX(-630px); } } @keyframes moveLeft { 0% { -webkit-transform: tr.........完整代码请登录后点击上方下载按钮下载查看
网友评论0