div+css实现卡通可爱万圣节宠物效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现卡通可爱万圣节宠物效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body{ background: radial-gradient( circle, #a08baf 81%, #9076a2 98% ); margin: 5px 0; display: flex; justify-content: center; } div.bat-container{ overflow: hidden; min-height: 300px; max-height: 500px; min-width: 300px; width: 99vw; height: 95vw; display: flex; justify-content: center; align-items: center; } div.bat { width: 90%; height: 90%; max-height: 500px; max-width: 500px; position: relative; display: flex; justify-content: center; animation: spinIn 5s linear 1; } @keyframes spinIn { 0% { transform: rotate(0deg); left: -100% } 100% { transform: rotate(360deg); left: 0%; } } @keyframes spinOut { 0% { transform: rotate(0deg); left: 0% } 100% { transform: rotate(360deg); left: 100%; } } div.body { width: 60%; height: 60%; border-radius: 50%; background-color: #434343; position: relative; top: 25%; overflow: hidden; } div.body > .shading { position: absolute; top: -3%; border-radius: 50%; z-index: 999; left: -3%; width: 104%; height: 104%; box-shadow: inset -9px 0px #555454, inset -9px 0px 12px 12px #555454; mix-blend-mode: overlay; } div.row { display: flex; justify-content: space-between; } div.wing-row{ position: absolute; width: 99%; top: 48%; height: 18%; } div.closed-wing-row { position: absolute; width: 100%; top: 36%; height: 32%; z-index: 9999; } div.wing { width: 45%; height: 100%; border-radius: 100% 100% 0% 0%; clip-path: polygon(1% 0%, 1% 100%, 7% 88%, 12% 100%, 19% 88%, 29% 100%, 34% 88%, 43% 100%, 51% 88%, 58% 99%, 65% 90%, 72% 99%, 82% 89%, 88% 100%, 94% 89%, 100% 100%, 100% 0%); background-color: #434343; box-shadow: inset 2px 6px 20px 6px #2e2e2e; } div.wing.open-wing { display: none } div.wing-row > div.wing:nth-child(1){ animation: leftFlap 0.43s alternate linear infinite } div.wing-row > div.wing:nth-child(2){ animation: rightFlap 0.43s alternate linear infinite } @keyframes leftFlap { 100%{ transform: rotateZ(10deg); } } @keyframes rightFlap { 100%{ transform: rotateZ(-10deg); } } div.ear-row { height: 35%; width: 70%; position: absolute; top: 5%; left: 14.5%; } div.ear { width: 48%; height: 100%; border-radius: 8% 50% 50% 50%; background-color: #434343; transform: rotate(29deg); display: flex; position: relative; overflow: hidden; box-shadow: inset -2px 0px 12px 6px #2e2e2e; } div.ear:nth-child(2) { transform: rotate(58deg); } div.ear > .inner-ear { height: 100%; width: 100%; border-radius: 50%; background-color: #ffb6c1; position: absolute; box-shadow: inset -2px 0px 12px 6px #f8788b; } div.ear:nth-child(1) > .inner-ear{ left: -48%; bottom: -4%; } div.ear:nth-child(2) > .inner-ear{ left: 4%; top: -49%; } div.eye-row { width: 55%; height: 55%; position: absolute; top: 16%; left: 22%; } div.eye { height: 38%; width: 38%; border: 2px solid white; background-color: black; border-radius: 50%; position: relative } div.eye > * { background-color: white; border-radius: 50%; width: 30%; height: 30%; position: absolute; top: 10%; right: 10%; } div.nose { background-color: #ffb6c1; border-radius: 50%; height: 5%; width: 5%; position: absolute; left: 47.5%; top: 34%; } div.mouth { background-color: black; width: 25%; height: 12.5%; position: absolute; border-radius: 25% 25% 120% 120%; display: flex; flex-direction: column; top: 43%; left: 37.5%; overflow: hid.........完整代码请登录后点击上方下载按钮下载查看
网友评论0