css实现卡通火车行驶动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现卡通火车行驶动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Ubuntu:400,400i,700,700i"); *, *:before, *:after { margin: 0; padding: 0; word-break: break-all; box-sizing: border-box; } html { font-size: 10px; } body { font-family: 'Ubuntu', sans-serif; color: #6e6e6e; font-size: 1.6rem; } header, footer { display: block; } a, a:link, a:visited { color: #4d4d4d; text-decoration: none; } img { border: 0; } ul { list-style: none; } .center { background: #000c18; background: -webkit-linear-gradient(#013971, #000c18 60%); background: -moz-linear-gradient(#013971, #000c18 60%); background: -o-linear-gradient(#013971, #000c18 60%); background: -ms-linear-gradient(#013971, #000c18 60%); background: linear-gradient(#013971, #000c18 60%); height: 40rem; margin: auto; overflow: hidden; position: relative; width: 110rem; } .center::before, .center::after { content: ""; position: absolute; } .center::before { background: rgba(255, 250, 175, 0.8); border-radius: 50%; box-shadow: 0 0 3rem 0 rgba(255, 250, 175, 0.5); height: 16rem; left: 20%; top: -4rem; width: 16rem; } .center::after { background: -moz-radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 5%) left/14rem 15rem, radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 3%) left/10rem 9rem; background: -webkit-radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 5%) left/14rem 15rem, radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 3%) left/10rem 9rem; background: -o-radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 5%) left/14rem 15rem, radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 3%) left/10rem 9rem; background: -ms-radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 5%) left/14rem 15rem, radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 3%) left/10rem 9rem; background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 5%) left/14rem 15rem, radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 3%) left/10rem 9rem; height: 100%; width: 100%; } .mountains { height: 100%; position: absolute; width: 100%; z-index: 1; } .mountains::before, .mountains::after { background: #000c18; background: -moz-linear-gradient(#012a53, #000c18 50%); background: -webkit-linear-gradient(#012a53, #000c18 50%); background: -o-linear-gradient(#012a53, #000c18 50%); background: -ms-linear-gradient(#012a53, #000c18 50%); background: linear-gradient(#012a53, #000c18 50%); content: ""; height: 100%; position: absolute; } .mountains::before { border-radius: 100% 300% 0 0; left: -20%; width: 57%; } .mountains::after { border-radius: 300% 100% 0 0; right: -20%; width: 80%; } .bridge { border-bottom: 0.3rem solid white; border-top: 0.3rem solid white; background: black; background: -webkit-linear-gradient(55deg, transparent 46%, white 46%, white 54%, transparent 54%) left/1.6rem 2.2rem, -webkit-linear-gradient(-55deg, transparent 46%, white 46%, white 54%, transparent 54%) left/1.6rem 2.2rem; background: -moz-linear-gradient(55deg, transparent 46%, white 46%, white 54%, transparent 54%) left/1.6rem 2.2rem, -moz-linear-gradient(-55deg, transparent 46%, white 46%, white 54%, transparent 54%) left/1.6rem 2.2rem; background: -o-linear-gradient(55deg, transparent 46%, white 46%, white 54%, transparent 54%) left/1.6rem 2.2rem, -o-linear-gradient(-55deg, transparent 46%, white 46%, white 54%, transparent 54%) left/1.6rem 2.2rem; background: -ms-linear-gradient(55deg, transparent 46%, white 46%, white 54%, transparent 54%) left/1.6rem 2.2rem, -ms-linear-gradient(-55deg, transparent 46%, white 46%, white 54%, transparent 54%) left/1.6rem 2.2rem; background: linear-gradient(55deg, transparent 46%, white 46%, white 54%, transparent 54%) left/1.6rem 2.2rem, linear-gradient(-55deg, transparent 46%, white 46%, white 54%, transparent 54%) left/1.6rem 2.2rem; bottom: 10rem; height: 2.6rem; position: absolute; width: 100%; z-index: 1; } .train { animation: move-train 24s linear infinite; bottom: 12.6rem; height: 10rem; position: absolute; left: calc(100% + 1.3rem); width: 44rem; z-index: 1; } .engine-front, .engine-front::before, .engine-front::after { background: #0f0f0f; background: linear-gradient(0deg, #0f0f0f, #262626, #0f0f0f); border: 0.1rem solid rgba(255, 255, 255, 0.15); border-radius: 50% 0 0 50%; border-right: none; } .engine-front { animation: body-upDown 0.3s infinite; border-radius: 0.5rem 0 0 0.5rem; bottom: 1.4rem; height: 4.6rem; left: 0; position: absolute; width: 8rem; } .engine-front::before, .engine-front::after { content: ""; position: absolute; height: 70%; left: -0.9rem; top: 50%; transform: translate(0, -50%); width: 0.8rem; } .engine-front::after { height: 40%; left: -1.4rem; width: 0.5rem; } .chimney { background: #990000; height: 2.2rem; left: 2.5rem; position: absolute; top: -2.3rem; width: 1.7rem; } .chimney::before, .chimney::after { content: ""; position: absolute; } .chimney::before { animation: up-down 0.3s infinite; border-bottom: none; border-left: 0.5rem solid transparent; border-right: 0.5rem solid transparent; border-top: 0.8rem solid orange; left: 50%; top: -0.9rem; transform: translate(-50%, 0); width: 160%; } .smoke { animation: move-smoke 0.4s linear infinite; background: rgba(255, 255, 255, 0.8); border-radius: 50%; height: 1.4rem; left: 0.2rem; position: absolute; top: -1.5rem; width: 0.8rem; z-index: -1; } .smoke-2 { animation-delay: 0.1s; left: 0.4rem; } .smoke-3 { animation-delay: 0.2s; left: 0.6rem; } .smoke-4 { left: 0.8rem; } .engine-body { animation: body-upDown 0.3s 0.1s infinite; background: #b30000; background: linear-gradient(0deg, #330000, red, #990000); border-radius: 0 0 0.4rem 0; bottom: 1.4rem; height: 7rem; left: 8rem; position: absolute; width: 5rem; } .engine-body::before, .engine-body::after { content: ""; left: 50%; position: absolute; transform: translate(-50%, 0); } .engine-body::before { animation: up-down 0.3s 0.2s infinite; background: #660000; background: linear-gradient(0deg, #660000, #990000, #660000); border-radius: 50% 50% 0 0; height: 1.2rem; top: -1.2rem; width: 130%; } .engine-body::after { background: #b3e0f2; border-radius: 0.2rem; height: 40%; top: 1rem; width: 45%; } .wheel::before, .wheel::after { left: 50%; top: 50%; transform: translate(-50%, -50%); } .wheel-holder { height: 2.8rem; bottom: 0; position: absolute; width: 100%; } .wheel { animation: rotate 2s linear infinite; background: orange; border: 0.3rem solid rgba(0, 0, 0, 0.6); border-radius: 50%; height: 2.8rem;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0