css实现大风车旋转景色动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现大风车旋转景色动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .mill, .near, .landscape, body { display: flex; flex-flow: row wrap; } .mill { justify-content: flex-end; } .near, body { justify-content: center; } .mill, body { align-items: center; } .mill-shell { display: flex; justify-content: center; align-items: center; } .star:nth-of-type(1) { left: calc( 50 * 1px); animation-duration: 1 1s; } .star:nth-of-type(2) { left: calc( 50 * 2px); animation-duration: 1 2s; } .star:nth-of-type(3) { left: calc( 50 * 3px); animation-duration: 1 3s; } .star:nth-of-type(4) { left: calc( 50 * 4px); animation-duration: 1 4s; } .star:nth-of-type(5) { left: calc( 50 * 5px); animation-duration: 1 5s; } .star:nth-of-type(6) { left: calc( 50 * 6px); animation-duration: 1 6s; } .star:nth-of-type(7) { left: calc( 50 * 7px); animation-duration: 1 7s; } .star:nth-of-type(8) { left: calc( 50 * 8px); animation-duration: 1 8s; } .star:nth-of-type(9) { left: calc( 50 * 9px); animation-duration: 1 9s; } .star:nth-of-type(10) { left: calc( 50 * 10px); animation-duration: 1 10s; } body { background: #2a3e4b; height: 100vh; } .landscape { position: relative; background: #00adcc; width: 600px; height: 400px; min-width: 600px; } .near { position: relative; z-index: 20; border-radius: 50%/100% 100% 0 0; align-self: flex-end; background-color: #036e81; width: 600px; height: 100px; } .far { position: relative; bottom: -100px; z-index: 10; border-radius: 0% 100% 0% 0%; align-self: flex-end; background-color: #068099; width: 500px; height: 130px; } .mountains { position: absolute; width: 150px; height: 150px; top: 150px; bottom: auto; left: auto; right: 100px; background: linear-gradient(135deg, white 10%, transparent 40%); transform: rotate(45deg); } .mountains::after { content: ""; position: absolute; width: 100px; height: 100px; top: -60px; bottom: auto; left: 100px; right: auto; background: linear-gradient(135deg, white 10%, transparent 40%); } .sky { position: relative; background: radial-gradient(white 2%, transparent 0) repeat center/100px 100px, radial-gradient(white 2%, transparent 0) repeat top left/100px 100px; width: 100%; height: 150px; } .star { position: absolute; width: 5px; height: 5px; top: 0; bottom: auto; left: 100px; right: auto; border-radius: 50%; background: white; animation: starFall 3s linear infinite; box-shadow: 0px 0px 5px white; } .mill { width: 60px; height: 150px; position: relative; flex-direction: column; margin-top: -145px; } .mill > div { z-index: 10; } .mill__roof { width: 60px; height: 60px; background: linear-gradient(45deg, #036e81 50%, transparent 0) no-repeat right bottom/50% 60%, linear-gradient(-45deg, #036e81 50%, transparent 0) no-repeat left bottom/50% 60%; } .mill-shell { width: 40px; height: 90px; background: #036e81; } .mill-shell__window { position: relative; width: 15px; height: 15px; background: #88eafc; } .mill-shell__window::after, .mill-shell__window::before { content: ""; position: absolute; width: 2px; height: 100%; top: auto; bottom: auto; left: calc(50% - 1px); right: auto; background: #036e81; } .mill-shell__window::before { position: absolute; width: 100%; height: 2px; top: calc(50% - 1px); bottom: auto; left: 0; right: auto; } .mill::after, .mill::before { content: ""; position: absolute; width: 110px; height: 20px; top: 50px; bottom: auto; left: auto; right: auto; background: #0490a9; z-index: 5; animation: millRun 2s linear inf.........完整代码请登录后点击上方下载按钮下载查看
网友评论0