css实现可爱小老虎效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现可爱小老虎效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .container, body { display: flex; align-items: center; justify-content: center; } body { height: 100vh; background-color: #d6edf7; } .container { width: 250px; height: 250px; background-color: #e4f1f7; border-radius: 50%; position: relative; } @media screen and (min-width: 640px) { .container { width: 400px; height: 400px; } } .head { width: 60%; height: 60%; border-radius: 50%; background-color: #ffc850; position: relative; } .head-copy { width: 100%; height: 100%; border-radius: 50%; background-color: #ffc850; position: absolute; z-index: 3; } .eye { width: 12%; height: 18%; border-radius: 40%; background-color: #4b3f4e; position: absolute; top: 45%; z-index: 4; } .eye.left { left: 20%; } .eye.rigth { right: 20%; } .inner-eye { width: 45%; height: 40%; border-radius: 50%; background-color: white; position: absolute; left: 27.5%; } .ear { width: 32%; height: 79%; background-color: #ebaf4b; border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; position: absolute; top: -11%; z-index: 1; } .ear.left { left: 6%; transform: rotate(-35deg); animation-name: ear-l; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: linear; } .ear.rigth { right: 6%; transform: rotate(35deg); animation-name: ear-r; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: linear; } @keyframes ear-l { 0% { transform: rotate(-35deg); } 100% { transform: rotate(-45deg); } } @keyframes ear-r { 0% { transform: rotate(35deg); } 100% { transform: rotate(45deg); } } .inner-ear { width: 60%; height: 90%; background-color: #e19c46; border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; position: absolute; z-index: 1; top: 12%; } .inner-ear.left { right: 30%; } .inner-ear.rigth { left: 30%; } .nose { width: 15%; height: 22.5%; background-color: #ff8087; border-radius: 90% 30% 30% 90%/50% 50% 50% 50%; position: absolute; z-index: 5; left: 42.5%; top: 67%; transform: rotate(-90deg); } .mooth { width: 37%; height: 48%; background-color: #faebc8; position: absolute; z-index: 3; border-radius: 90% 30% 30% 90%/50% 50% 50% 50%; transform: rotate(-90deg); left: 31.5%; top: 66%; } .strip { width: 40%; height: 8%; position: absolute; z-index: 4; background-color: #4b3f4e; left: 30%; top: 10%; } .strip:after { content: ""; width: 0; height: 0; border-radius: 50%; border-width: 0 0 12px 12px; border-style: solid; border-color: #4b3f4e; position: absolute; left: -5px; } @media screen and (min-width: 640px) { .strip:after { border-width: 0 0 19px 14px; } } ..........完整代码请登录后点击上方下载按钮下载查看
网友评论0