css实现小孩坐在书上看书插画效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现小孩坐在书上看书插画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { min-height: 100vh; display: flex; align-items: center; justify-content: center; margin: 0; background-color: #FFF; font-family: "Helvetica", sans-serif; } .container { position: relative; height: 500px; width: 450px; } .container * { position: absolute; } *::before, *::after { content: ''; position: absolute; } /* one */ .one { height: 35px; width: 55px; background-color: #da0243; left: 150px; bottom: 70px; border-style: solid; border-width: 5px 5px 5px 120px; border-color: #fb0b4c; } .one::before { height: 25px; width: 95px; background-color: #FFF; top: 2px; left: -120px; border-style: solid; border-width: 3px 7px 3px 7px; border-color: #ebebeb; } .one::after { height: 17px; width: 8px; background-color: #fdb002; top: 8px; left: -40px; box-shadow: 1px 2px 0 rgba(0, 0, 0, .15); } /* two */ .two { height: 45px; width: 110px; background-color: #1f305e; left: 160px; bottom: 115px; border-style: solid; border-width: 5px 80px 5px 5px; border-color: #0d1a4f; } .two::before { height: 35px; width: 60px; background-color: #FFF; top: 3px; left: 116px; border-style: solid; border-width: 3px 7px 3px 7px; border-color: #ebebeb; } .two::after { height: 32px; width: 15px; background-color: #FFF; border-radius: 50%; top: 6px; left: 80px; } .two span { height: 25px; width: 10px; background-color: #ff0a4a; top: 10px; left: 130px; } .two span::before { border-style: solid; border-width: 0px 5px 8px 5px; border-color: transparent transparent #fff transparent; bottom: 0; } /* three */ .three { height: 35px; width: 150px; background-color: #da0243; left: 180px; bottom: 170px; border-style: solid; border-width: 5px 8px 5px 8px; border-color: #fb0b4c; } .three::before { height: 25px; width: 15px; border-radius: 50%; background-color: #ffb207; top: 5px; right: 15px; } /* four */ .four { height: 15px; width: 130px; background-color: #0b1b4f; left: 150px; bottom: 215px; border-style: solid; border-width: 10px 25px 10px 8px; border-color: #feb101; } /* five */ .five { height: 30px; width: 200px; background-color: #0b1b4f; left: 135px; bottom: 250px; } .five::before { height: 20px; width: 140px; background-color: #FFF; top: 2px; border-style: solid; border-width: 3px 7px 3px 7px; border-color: #ebebeb; } /* child */ .child { height: 125px; width: 95px; top: 95px; left: 270px; } /* body */ .body { width: 40px; height: 65px; background-color: blue; border-radius: 54% 26% 50% 3% / 31% 16% 60% 12%; background-color: #feb101; top: 50px; } .body::before { left: 20px; border-style: solid; border-width: 15px 7px 0 7px; border-color: #FFF transparent transparent transparent; } .body::after { top: -16px; left: 27px; width: 6px; height: 25px; background-color: #ffbc83; transform: skewY(35deg) rotate(25deg); } /* head */ .head { left: 23px; top: 18px; height: 30px; width: 25px; background-color: #ffbc83; border-radius: 33% 17% 31% 71% / 31% 37% 44% 65%; } /* hair */ .hair { top: -21px; left: -8px; height: 23px; width: 31px; background-color: #0f1956; border-radius: 52% 46% 31% 0% / 72% 67% 3% 35%; } .hair::before { top: 19px; left: 0px; width: 15px; height: 25px; background-color: #0f1956; border-radius: 0% 0% 0% 100% / 1% 0% 0% 100% } .hair::after { top: 1px; left: -6px; height: 11px; width: 25px; background-color: #FFF; border-radius: 10px; transform: rotate(-12deg); } /* */ .rtch { width: 20px; height: 15px; background-color: #ffbc83; top: 2px; right: 0; border-radius: 11% 23% 0% 28% / 27% 39% 0% 100% } .rtch::before { height: 12px; width: 7px; border-radius: 50%; background-color: #ffbc83; transform: rotate(-25deg); left: -5px; top: 10px } /* glasses */ .glasses, .glasses::before { height: 14px; width: 8px; box-sizing: border-box; border-radius: 50%; border: 1px solid #0b1b4f; } .glasses { top: 6px; left: 13px; } .glasses::before { top: -1px; left: 8.5px } /* hand.........完整代码请登录后点击上方下载按钮下载查看
网友评论0