div+css实现可爱卡通小恐龙骑单轮车动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现可爱卡通小恐龙骑单轮车动画效果代码
代码标签: div css 可爱 卡通 小恐龙 骑 单轮 车 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* * { animation: none !important; } */ @keyframes move { 0%, 100% { transform: translate(-50%, 0) rotate(0); } 25% { transform: translate(-56%, 0) rotate(2deg); } 75% { transform: translate(-44%, 0) rotate(-2deg); } } article { animation: move 4s infinite; --skin: #8c5; --skin2: #ee5; position: absolute; bottom: 4vmin; left: 50%; transform: translate(-50%, 0%); width: 80vmin; height: 80vmin; transform-origin: 50% 96%; } article *, article *::before, article *::after { position: absolute; box-sizing: border-box; } .head { width: 60%; height: 50%; top: 0; left: 40%; transform: translateX(-50%); filter: drop-shadow(-0.15vmin -0.25vmin) drop-shadow(0.15vmin -0.25vmin) drop-shadow(0 -0.125vmin) drop-shadow(0 0.5vmin) drop-shadow(-0.25vmin 0) drop-shadow(0.35vmin 0) } .face { width: 80%; height: 90%; border-radius: 100% 100% 60% 60%; background: var(--skin); right: 0; } .face::before { content: ""; width: 110%; height: 60%; background: var(--skin); top: 50%; right: 0; border-radius: 100% 0 100% 100%; } .eye { width: 25%; background: /* radial-gradient( at 30% 35%, #fff 20%, #0000 21%), */ /* radial-gradient(circle at 50% 15%, #fff 5%, #0000 5.5%) */ #000; aspect-ratio: 1 / 1.1; border-radius: 50%; top: 45%; left: 5%; } @keyframes moveEye { 0% { transform: scale(1); } 100% { transform: scale(0.94); } } .eye::before { animation: moveEye 1.5s alternate infinite; content: ""; width: 45%; aspect-ratio: 1; background: #fff; top: 17%; left: 9%; border-radius: 50%; } .eye::after { animation: moveEye 1.5s 0.75s alternate infinite; content: ""; width: 15%; aspect-ratio: 1; background: #fff; top: 9%; left: 40%; border-radius: 50%; } .eye + .eye { left: 45%; top: 46%; transform: scale(1.05) } .cheek { width: 25%; height: 18%; background: repeating-linear-gradient(-40deg, #0000 0 17%, #f001 0 21%), #f002; border: 1vmin solid #0000; background-clip: content-box, border-box; border-radius: 50%; top: 67%; left: -4%; filter: blur(0.1vmin); } .cheek + .cheek { left: 55%; top: 69%; } .spike { width: 30%; aspect-ratio: 1; background: conic-gradient(at 50% 0, #0000 160deg, var(--skin2) 0 200deg, #0000 0); top: -25%; left: 45%; } .spike:nth-child(2) { transform: rotate(30deg); left: 65%; top: -20%; } .spike:nth-child(3) { transform: rotate(45deg); left: 80%; top: -8%; } .spike:nth-child(4) { transform: rotate(60deg); left: 85%; top: 11%; } .spike:nth-child(5) { transform: rotate(90deg); left: 85%; top: 29%; } .spike:nth-child(6) { transform: rotate(90deg); left: 81%; top: 42%; } .spike:nth-child(7) { transform: rotate(90deg); left: 77%; top: 51%; } @keyframes drop { 0% { opacity: 0; transform: rotate(45deg) translate(0, 0); } 10%, 20% { opacity: 1; transform: rotate(45deg) translate(0, 0); } 50%, 100% { opacity: 0; transform: rotate(45deg) translate(100%, 100%); } } .drop { animation: drop 5s infinite; width: 18%; aspect-ratio: 1; background: radial-gradient(circle at 40% 70%, #fff 20%, #0000 0), #8ef; border-radius: 0 100% 100% 100%; transform: rotate(45deg); border: 0.65vmin solid; left: 75%; top: 25%; } @keyframes moveMouth { 0%, 100% { transform: rotate(-10deg) scale(1); } 33% { transform: rotate(-10deg) scale(1.1); } 66% { transform: rotate(-10deg) scale(0.9); } } .mouth { animation:moveMouth 2.75s linear infinite; width: 5%; height: 10%; background: black; border-radius: 50%; top: 90%; left: 35%; transform: rotate(-10deg); } /* .mouth { width: 15%; aspect-ratio: 2; background: radial-gradient(farthest-side at 50% 0, #0000 80%, #000 0); top: 80%; left: 29%; border-radius: 50% / 0 0 100% 100%; } */ /* .mouth { width: 40%; height: 9%; background: #000; bottom: 0%; left: 30%; border-radius: 50% / 0 100% 100% 200%; } .mouth::before { content: ""; width: 80%; top: 0.5vmin; left: 5%; height: 2vmin; background: yellow; clip-path: polygon(0 0, 100% 0, 83.333% 100%, 66.66% 0, 50% 100%, 33.33% 0, 16.66% 100%) } */ .body { width: 50%; height: 45%; top: 35%; left: 45%; transform: translateX(-50%); filter: drop-shadow(-0.15vmin -0.25vmin) drop-shadow(0.15vmin -0.25vmin) drop-shadow(0 -0.125vmin) drop-shadow(0 0.5vmin) drop-shadow(-0.25vmin 0) drop-shadow(0.35vmin 0) } .chest { top: 0; left: 0; width: 100%; height: 100%; border-radius: 150% 0 50% 100%; background: radial-gradient(130% 160% at 35% 85%, #0000 29%, #000 29.1% 30%, var(--skin) 30.1%), repeating-radial-gradient(100% 100% at 40% 0, #0000 0 20%, #0002 0 22%), var(--skin2); } @keyframes moveTail { 0% { transform: rotate(0) } 100% { transform: rotate(3deg) } }.........完整代码请登录后点击上方下载按钮下载查看
网友评论0