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: translateX(100vw); transform: translateX(100vw); } 100% { -webkit-transform: translateX(-630px); transform: translateX(-630px); } } /* Slow down the animation when the train has to travel further */ @media only screen and (min-width: 600px) { .box-canvas { -webkit-animation: moveLeft 10s infinite linear; animation: moveLeft 10s infinite linear; } } @media only screen and (min-width: 900px) { .box-canvas { -webkit-animation: moveLeft 13s infinite linear; animation: moveLeft 13s infinite linear; } } .front-car { position: relative; width: 200px; height: 200px; } .cabin { position: absolute; width: 100px; height: 150px; background: var(--purple); right: 0; } .cabin::before { content: ''; position: absolute; width: 120px; height: 10px; background: var(--yellow); left: -20px; } .cabin::after { content: ''; position: absolute; width: 50px; height: 50px; background: linear-gradient(-45deg, aliceblue, 60%, #65BFF7); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 30px; } .front { width: 100px; height: 75px; position: absolute; background: var(--pink); top: 75px; border-radius: 40% 0 0 20% / 50%; } /* Chimney */ .front::before { content: ''; width: 40px; height: 40px; background: var(--yellow); position: absolute; top: -40px; left: 25px; -webkit-clip-path: polygon(20% 100%, 80% 100%, 100% 0, 0 0); clip-path: polygon(20% 100%, 80% 100%, 100% 0, 0 0); } .smoke { position: absolute; left: 10px; top: -20px; width: 80px; height: 50px; border-radius: 50%; background: rgba(255,255,255,0.6); -webkit-animation: smokeOne 1.5s infinite; animation: smokeOne 1.5s infinite; } .smoke::before { content: ''; position: absolute; top: -40px; right: 0; width: 50px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.4); -webkit-animation: smokeTwo 1.5s infinite; animation: smokeTwo 1.5s infinite; } .smoke::after { content: ''; position: absolute; top: -68px; right: 0; width: 35px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0