div+css布局实现科幻卡通潜水艇动画交互效果代码
代码语言:html
所属分类:动画
代码描述:div+css布局实现科幻卡通潜水艇动画交互效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { padding: 0; margin: 0; box-sizing: border-box; } body { width: 100vw; height: 100vh; background-color: #6835AC; display: grid; place-items: center; overflow: hidden; } #root { width: 100vw; height: 100vh; background-color: #6835AC; display: grid; place-items: center; } .container { width: 327px; height: 327px; position: relative; } .kurzgesagt { transform: scale(0.7); } .hull { width: 327px; height: 327px; border-radius: 50%; background-color: #20E9FD; border: 18px solid #4E37FD; overflow: hidden; position: relative; z-index: 1; transition: 1s ease-in-out; } .hull__reflection { border-radius: 20px; background-color: #FEFEFE; width: 24px; height: 52px; position: absolute; top: 15%; right: 33px; transform: rotate(-45deg); } .hull__shadow { width: 327px; height: 327px; border-radius: 50%; background-color: #398DFE; transform: translate(-62%, 40%); } .hull__person { position: absolute; bottom: -50px; right: 60px; height: 80%; width: 80px; border-radius: 50px; background-color: #040404; z-index: 2; } .hull__person__eye { width: 43px; height: 43px; border-radius: 50%; background-color: #FEFEFE; position: absolute; top: 30px; left: 50%; transform: translateX(-50%); } .hull__person__eye:before { width: inherit; height: inherit; border-radius: 50%; content: ""; display: block; position: absolute; background-color: #040404; top: 100%; transform: translateY(-40%); transition: 0.6s; } .hull__person__nose { position: absolute; left: 100%; top: 56px; width: 35px; height: 32px; background-color: #EF7E50; border-top-right-radius: 50px; border-bottom-right-radius: 50px; z-index: -1; } .motor__protector { background-color: #FEA001; position: absolute; bottom: 0; width: 350px; height: 66px; border-radius: 50px; z-index: 2; } .motor__protector div { border-radius: 10px; background-color: #FEDE02; position: absolute; top: 10px; height: 10px; } .motor__protector__line-1 { width: 117px; left: 140px; } .motor__protector__line-2 { width: 40px; left: 270px; } .motor__machine { border-radius: 43px; position: absolute; left: -100px; bottom: 0; background-color: #FF6820; width: 190px; height: 130px; z-index: 2; } .motor__machine__line-1 { border-radius: 10px; background-color: #F5A57F; position: absolute; top: 10px; height: 14px; width: 80px; left: 50%; transform: translateX(-50%); } .motor__machine__inner { border-radius: 16px; background-color: #A02A7D; position: absolute; top: 52%; left: 40px; width: 70px; height: 70px; transform: translateY(-50%) skewX(-10deg); display: grid; place-items: center; padding: 7px; } .motor__machine__inner div { border-radius: 10px; background-color: #4C077F; width: 80%; height: 10px; } .motor__machine__inner-shadow { border-radius: 16px; width: 70px; height: 70px; background-color: #FEA001; content: ""; position: absolute; top: 52%; left: 28px; z-index: -2; transform: translateY(-50%) skewX(-10deg); } .motor__cooler { background-color: #360183; width: 80%; height: 60px; border-bottom-left-radius: 70px; border-bottom-right-radius: 70px; position: absolute; top: 100%; right: 20px; z-index: 2; } .motor__cooler__line-1 { border-radius: 20px; position: absolute; top: 10px; right: 30px; height: 22px; width: 100px; background-color: #854FCB; } .legs { position: relative; } .legs__leg { position: absolute; width: 20px; height: 150px; z-index: 1; } .legs__leg::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 20px; height: 162px; background-color: #2C0050; transform-origin: bottom center; transition: 1s; } .legs__leg--left { left: 20%; } .legs__leg--left div { left: 10px; } .legs__leg--left::before { transform: rotate(15deg) scaleY(1.1); } .legs__leg--right { right: 20%; } .legs__leg--right::before { transform: rotate(-15deg) scaleY(1.1); } .legs__leg--right div { right: 10px; } .legs__leg__foot { border-radius: 20px; position: absolute; top: 100%; transform: translateX(-50%); left: 50%; background-color: #2C0050; width: 100px; height: 20px; } .legs__leg__foot__line-1 { border-radius: 20px; position: absolute; top: 6px; height: 6px; width: 70%; background-color: #854FCB; } .legs__shadow { border-radius: 50%; position: absolute; top: 150px; left: 0; width: 100%; height: 30px; background-color: #472572; transform: scale(1.2); -webkit-animation: legs-shadow 2s alternate infinite; animation: legs-shadow 2s alternate infinite; } .propeller { position: absolute; bottom: -86px; left: -30px; z-index: 3; } .propeller--left { left: 220px; z-index: 0; opacity: 0.4; } .propeller__front { border-radius: 50px; box-shadow: inset 0 -10px #E13349; background-color: #FD3F5B; width: 190px; height: 100px; position: relative; z-index: 2; display: flex; justify-content: flex-end; align-items: center; padding-right: 14px; } .propeller__front__line-1 { border-radius: 10px; background-color: #FE8295; position: absolute; top: 7px; height: 8px; width: 77px; left: 34px; } .propeller__front__fan-hole { border-radius: 50%; width: 80px; height: 80px; background-color: #4C077F; box-shadow: inset -16px 0px 0px 0 #841C62; display: grid; place-items: center; } .propeller__front__fan-hole__spinner { position: relative; -webkit-animation: fans 0.7s forwards linear infinite; animation: fans 0.7s forwards linear infinite; } .propeller__front__fan-hole__spinner:after { border-radius: 50%; width: 25px; height: 25px; content: ""; display: block; background-color: #A5A1FE; box-shadow: 0 0 0px 4px #4C077F; position: relative; } .propeller__front__fan-hole__spinner div { border-radius: 15px; background-color: #953BFE; position: absolute; width: 22px; height: 36px; top: 50%; left: 50%; transform-origin: top center; } .propeller__front__fan-hole__spinner__line-1 { transform: translateX(-50%) rotate(180deg); } .propeller__front__fan-hole__spinner__line-2 { transform: translateX(-50%) rotate(55deg); } .propeller__front__fan-hole__spinner__line-3 { transform: translateX(-50%) rotate(-55deg); } .propeller__front__bubble { border-radius: 50%; width: 16px; height: 16px; border: 2px solid #398DFE; background-color: #1459B6; position: absolute; top: 30px; right: 22px; -webkit-animation: bubble 4s linear forwards infinite; animation: bubble 4s linear forwards infinite; opacity: 0; } .propeller__front__bubble::before { border-radius: 50%; width: 6px; height: 6px; content: ""; background-color: #20E9FD; position: absolute; top: 0; right: 0; } .propeller__front__bubble__2 { -webkit-animation-delay: 1s; animation-delay: 1s; } .propeller__front__bubble__3 { -webkit-animation-delay: 2s; animation-delay: 2s; } .propeller__front__bubble__2 { -webkit-animation-delay: 3s; animation-delay: 3s; } .propeller__middle { border-radius: 50px; background-color: #A02A7D; box-shadow: inset 14px 0px 0px 0 #841C62; width: 130px; right: 100px; height: 90px; position: absolute; top: 5px; left: -60px; z-index: 1; } .propeller__back { border-radius: 50px; position: absolute; top: 0; left: -128px; box-shadow: inset 0 -10px #E13349; background-color: #FD3F5B; width: 160px; height: 100px; } .back { border-radius: 300px; background-color: #A02A7D; position: absolute; top: 94px; right: 48%; width: 400px; height: 220px; box-shadow: inset 0 -37px #4C077F; } .back__line-1 { border-radius: 10px; background-color: #D857AD; position: absolute; top: 10px; height: 10px; width: 80px; left: 190px; transform: translateX(-50%); } .back__antena-back { border-radius: 300px; background-color: #FD3F5B; box-shadow: inset 0 -37px #4C077F; position: absolute; top: -10px; right: 48%; width: 400px; height: 220px; } .antenna__back { border-radius: 300px; background-color: #FD3F5B; box-shadow: inset 0 -37px #4C077F; position: absolute; top: 52px; right: 60%; width: 290px; height: 140px; } .antenna__back__line-1 { border-radius: 10px; background-color: #FE8295; position: absolute; top: 10px; height: 10px; width: 80px; left: 44px; } .antenna__top { border-radius: 40px; background-color: #A02A7D; position: absolute; top: -16px; right: 44%; width: 140px; height: 90px; } .light { border-radius: 50px; background-color: #FD3F5B; width: 200px; height: 80px; position: relative; display: flex; position: absolute; top: 20px; left: -64px; z-index: 1; } .light__line-1 { border-radius: 10px; background-color: #FE8295; position: absolute; top: 10px; height: 10px; width: 70px; left: 24px; } .light__bulb { width: 55px; height: 55px; border-radius: 50%; background-color: #FEFEFE; box-shadow: inset 16px -14px #FEDE02; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); } .light__bulb__beam { width: 0; height: 470px; border-top: 220px solid transparent; border-right: 660px solid #FEFEFE; border-bottom: 220px solid transparent; position: absolute; top: -205px; left: 25px; opacity: 0.2; transition: 1s; transform-origin: left center; -webkit-animation: light-bulb-beam 2s ease-in-out alternate infinite; animation: light-bulb-beam 2s ease-in-out alternate infinite; } .light--back { top: 5px; left: 119px; z-index: 0; } .light--back .light__bulb__beam { border-right: 478px solid #FEFEFE; top: -190px; opacity: 0.1; } .passenger { border-radius: 50%; width: 110px; height: 110px; border: 10px solid #7D2AD6; background-color: #360183; box-shadow: 8px 8px 0 6px #4C077F; position: absolute; left: 0; top: 0; overflow: hidden; } .passenger__person { background-color: #01E0C3; position: absolute; bottom: -8px; right: 24px; height: 80px; width: 40px; border-radius: 50px; z-index: 2; transition: 0.8s; } .passenger__person__body { content: ""; width: 107px; height: 60px; position: absolute; top: 50%; left: 0; overflow: hidden; } .passenger__person__body::before { border-radius: 50%; width: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0