纯css实现羊驼动画效果自适应
代码语言:html
所属分类:布局界面
代码描述:纯css实现羊驼动画效果自适应
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; background: #f5e9c7; background: linear-gradient(#f5e9c7, #f1e1b1, #f1e1b1 92vmin, #e87e70 calc( 92vmin + 1px ), #e46a5a); min-height: 100vh; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; overflow: hidden; } .flex { display: -webkit-box; display: flex; } .clouds { position: absolute; width: 100%; height: 100%; top: 0; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } .clouds div, .clouds div::before, .clouds div::after { border-radius: 50% 50% 0 0 / 100% 100% 0 0; bottom: 0; } .clouds div { background-color: #f0aea5; position: absolute; } .clouds div:first-child { width: 20vmin; height: 10vmin; top: 5%; left: 10%; } .clouds div:first-child::before { content: ''; width: 50%; height: 50%; position: absolute; background-color: #f3bdb6; left: -20%; } .clouds div:first-child::after { content: ''; width: 30%; height: 30%; position: absolute; background-color: #f2b5ae; right: -15%; } .clouds div:last-child { width: 30vmin; height: 15vmin; top: 15%; right: 15%; } .clouds div:last-child::before { content: ''; width: 40%; height: 40%; position: absolute; background-color: #f4c1bb; left: -15%; } .clouds div:last-child::after { content: ''; width: 70%; height: 70%; position: absolute; background-color: #f3b9b2; right: -25%; } .alpaca { width: 50vmin; height: 80vmin; } .alpaca__top, .alpaca__btm { width: 100%; height: 50%; position: relative; } .alpaca__top { -webkit-box-pack: justify; justify-content: space-between; } .head { width: 40%; height: 100%; position: relative; -webkit-box-align: end; align-items: flex-end; } .head__ears { width: 100%; height: 28%; -webkit-box-pack: justify; justify-content: space-between; position: absolute; top: 0; left: 0; } .head__ears div { background-color: #75c9b1; width: 25%; height: 100%; width: 25%; position: relative; } .head__ears div::after { content: ''; width: 62%; height: 72%; position: absolute; background-color: #23646f; bottom: 5%; } .head__ears div:first-child, .head__ears div:first-child::after { border-radius: 100% 0 0 100% / 50% 0 0 50%; } .head__ears div:first-child { -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: rotate(0); transform: rotate(0); -webkit-animation: twitch-ear-left 10s 3s infinite ease-in-out; animation: twitch-ear-left 10s 3s infinite ease-in-out; } .head__ears div:first-child::after { right: 10%; } .head__ears div:last-child, .head__ears div:last-child::after { border-radius: 0 100% 100% 0 / 0 50% 50% 0; } .head__ears div:last-child { -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation: twitch-ear-right 10s 3.1s infinite ease-in-out; animation: twitch-ear-right 10s 3.1s infinite ease-in-out; } .head__ears div:last-child::after { left: 10%; } .head__face-neck { width: 100%; height: 75%; background-color: #75c9b1; border-radius: 50% 50% 0 0 / 30% 30% 0 0; } .head__face-neck .face { position: relative; width: 100%; height: 40%; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; margin-top: 36%; } .head__face-neck .face::before { content: ''; width: 70%; height: 100%; position: absolute; background-color: #9ad7c6; border-radius: 50%; } .head__face-neck .eyes, .head__face-neck .cheeks, .head__face-neck .nose, .head__face-neck .mouth { z-index: 10; } .head__face-neck .eyes { width: 76%; height: 45%; -webkit-box-pack: justify; justify-content: space-between; margin-top: -5%; } .head__face-neck .eyes div { width: 35%; height: 100%; background-color: #fff; border-radius: 50%; position: relative; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } .head__face-neck .eyes div::after { content: ''; width: 45%; height: 45%; position: absolute; background-color: #23646f; border-radius: 50%; -webkit-animation: blink 5s infinite ease-in-out; animation: blink 5s infinite ease-in-out; } .head__face-neck .cheeks { width: 90%; height: 25%; -webkit-box-pack: justify; justify-content: space-between; margin-top: 3%; } .head__face-neck .cheeks div { width: 18%; height: 100%; background-color: #e87e70; border-radius: 50%; } .head__face-neck .snout { position: absolute; width: 77%; height: 70%; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; bottom: -4%; } .head__face-neck .snout::before { content: ''; width: 70%; height: 100%; position: absolute; background-color: #b7e3d6; border-radius: 50%; } .head__face-neck .nose { width: 20%; height: 15%; background-color: #23646f; border-radius: 0 0 50% 50% / 0 0 100% 100%; margin-top: 5%; } .head__face-neck .mouth { width: 50%; height: 25%; background-color: #23646f; border-radius: 0 0 50% 50% / 0 0 100% 100%; margin-top: 5%; -webkit-animation: smile 4s 0.5s infinite ease-in-out; animation: smile 4s 0.5s infinite ease-in-out; } .tail { border-radius: 0 100% 100% 0 / 0 50% 50% 0; background-color: #75c9b1; width: 10%; height: 30%; align-self: flex-end; -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: rotate(0); transform: rotate(0); -webkit-animation: flick-tail 8s 1.5s infinite ease-in-out; animation: flick-tail 8s 1.5s infinite ease-in-out; } .body { background-color: #75c9b1; width: 90%; height: 55%; position: absolute; top: 0; left: 0; border-radius: 0 0 50% 50% / 0 0 60% 60%; -webkit-box-align: center; align-items: center; -webkit-box-pack: end; justify-content: flex-end; } .body .spots, .body .spots::after, .body .spots::before { border-radius: 50%; } .body .spots { width: 0; height: 0; position: relative; right: 16%; bottom: 13%; border-top: 6.5vmin solid #acdfd0; border-right: 2.5vmin solid transparent; border-left: 2.5vmin solid transparent; } .body .spots::before, .body .spots::after { content: ''; width: 0; height: 0; position: absolute; background-color: transparent; border-top: 5vmin solid #acdfd0; border-right:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0