css布局实现一个忍者神龟效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现一个忍者神龟效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap"); * { box-sizing: border-box; line-height: 1; margin: 0; } main { align-items: center; background-image: radial-gradient(#abc19f 10%, #81ff00 100%); display: grid; justify-content: center; grid-auto-flow: column dense; height: 100vh; width: 100vw; } article { display: flex; height: 325px; width: 325px; position: relative; margin: auto; } article::before { content: ""; position: absolute; left: 0; right: 0; margin: auto; background-color: transparent; width: 0; height: 0; border-top: 320px transparent; border-right: 160px solid transparent; border-left: 160px solid transparent; z-index: 0; mix-blend-mode: soft-light; } article::after { content: ""; text-shadow: -2px 0 15px white; font-family: "Bebas Neue", cursive; font-size: 30px; display: flex; align-items: center; justify-content: center; position: absolute; left: 0; right: 0; top: 0px; margin: auto; width: 100%; height: 40px; } .turtle { position: relative; height: 190px; width: 100%; top: 20px; left: 0px; } .head, .eye { border-radius: 50%; } .head { box-shadow: inset 17px 1px 6px 0px rgba(30, 31, 38, 0.25); border: 3px solid #446b4f; background-color: #8db95d; height: 100px; left: 0; margin: auto; right: 0; top: 35px; width: 100px; position: relative; z-index: 3; } .head::after { box-shadow: inset -12px 1px 6px -4px rgba(166, 214, 140, 0.8); content: ""; position: absolute; top: 0; mix-blend-mode: screen; right: 0px; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; transform: rotate(-20deg); } .stiches { border: 2px solid #446b4f; width: 18px; left: 15px; position: absolute; top: 6px; height: 20px; transform: rotate(45deg); border-left: 0; } .stiches .stich { width: 1px; height: 6px; background-color: #446b4f; display: block; position: absolute; } .stiches .stich:nth-of-type(1), .stiches .stich:nth-of-type(2) { transform: rotate(-180deg); top: -3px; } .stiches .stich:nth-of-type(1) { left: 9px; } .stiches .stich:nth-of-type(2) { left: 12px; } .stiches .stich:nth-of-type(3), .stiches .stich:nth-of-type(4), .stiches .stich:nth-of-type(5) { left: 17px; transform: rotate(85deg); } .stiches .stich:nth-of-type(3) { top: 0px; } .stiches .stich:nth-of-type(4) { top: 5px; } .stiches .stich:nth-of-type(5) { top: 10px; } .stiches .stich:nth-of-type(6), .stiches .stich:nth-of-type(7) { top: 15px; } .stiches .stich:nth-of-type(6) { left: 9px; } .stiches .stich:nth-of-type(7) { left: 12px; } .bandana { border-top-right-radius: 6px; border-bottom-right-radius: 9px; border-bottom-left-radius: 9px; border-radius: 9px; position: absolute; height: 33px; top: 33px; left: 0px; width: 94px; } .eyes { display: flex; left: 0; margin: auto; justify-content: space-between; position: relative; top: 40px; width: 70%; z-index: 1; } .eye { background-color: #fff; height: 20px; width: 20px; display: flex; } .eye::before { color: #739c46; content: "✖"; left: 0; right: 0; margin: auto; font-size: 9px; } .mouth { border-radius: 120px; position: absolute; bottom: 15px; right: 30px; border: 2px solid #446b4f; width: 20px; } .body-frame { -webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); height: 70px; width: 70px; margin: auto; position: relative; z-index: 2; } .body-frame::before { box-shadow: inset -18px 1px 6px -4px rgba(166, 214, 140, 0.6); content: ""; position: absolute; left: 0; height: 68px; width: 68px; background-color: #5b7b3b; display: block; position: absolute; top: 1px; left: 1px; -webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); } .arm { border: 3px solid #446b4f; position: absolute; background-color: #678c44; left: 0; right: 0; margin: auto; top: 120px; width: 15px; height: 45px; z-index: 2; } .arm.left { left: -80px; transform: rotate(-145deg); border-top-right-radius: 15px; border-bottom-left-radius: 0px; border-top-left-radius: 15px; border-bottom-color: transparent; } .arm.right { right: -80px; box-shadow: inset 8px -2px 3px -4px rgba(166, 214, 140, 0.9); border-top-right-radius: 15px; border-bottom-left-radius: 0px; border-top-left-radius: 15px; transform: rotate(145deg); border-bottom-color: transparent; } .arm span { position: absolute; bottom: 25px; height: 6px; width: 100%; z-index: 4; } .chest { overflow: hidden; border-radius: 20px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; position: absolute; left: 5px; height: 40px; top: 26px; width: 60px; -webkit-clip-path: polygon(50% 0%, 100% 5%, 75% 100%, 25% 100%, 0% 5%); clip-path: polygon(50% 0%, 100% 5%, 75% 100%, 25% 100%, 0% 5%); } .shell { background-color: #ffdd40; border-radius: 18px; border: 4px solid #c1921f; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: re.........完整代码请登录后点击上方下载按钮下载查看
网友评论0