css+div布局生成鸡生蛋卡通效果代码
代码语言:html
所属分类:布局界面
代码描述:css+div布局生成鸡生蛋卡通效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html,body,.container{ margin:0; padding:0; height:100vh; } body{ background:#FFD780; } *{ margin:0; padding:0; } .container{ display:grid; place-items:center; } .birth-container{ display:grid; place-items:center; height:368px; width:766px; } .fence-container{ display:flex; justify-content:space-between; height:208px; width:766px; } .fence{ display:block; height:208px; width:59px; background:#FFCE65; clip-path: polygon(0 12%, 50% 0, 100% 12%, 100% 100%, 0 100%); } .fence:after{ content:""; display:flex; height:10px; width:10px; background:#FFD780; border-radius:50%; transform:translate(8px,42px); box-shadow: 32px 3px #FFD780 ; } /*------------------------*/ .birds-container{ display:flex; z-index:2; justify-content:space-between; align-items:end; height:269px; width:664px; transform:translate(-24px,-131px); } .rooster-container{ display:grid; justify-content:center; height:269px; width:229px; } /*------------------------*/ .rooster-crest-container{ display:flex; justify-content:center; height:40px; width:60px; transform:translate(136px,0px); } .rooster-crest{ display:grid; height:40px; width:20px; background:#F54748; border-radius:20px 0 0 0; } .rooster-crest:before{ content:""; display:grid; height:40px; width:20px; background:#F54748; border-radius:20px 0 0 0; transform:translate(-16px,10px) rotate(-30deg); } .rooster-crest:after{ content:""; display:grid; height:40px; width:20px; background:#F54748; border-radius:20px 0px 0 0; transform:translate(12px,-30px) rotate(30deg); } /*------------------------*/ .rooster-body-container{ display:grid; height:216px; width:185px; /* background:crimson; */ transform:translate(10px,-124px); } .rooster-head{ display:flex; justify-self:end; justify-content:center; height:134px; width:60px; background:white; border-radius:30px 30px 0 0; } .rooster-eye{ display:block; height:12px; width:12px; background:#414141; border-radius:50%; transform:translate(18px,14px); } .rooster-beak{ transform:translate(23px,26px); } .rooster-body{ display:flex; z-index:2; height:82px; width:185px; background:white; border-radius:0 0 82px 82px; } .rooster-wing{ display:block; height:80px; width:138px; background:#DCDCDC; border-radius:0 50px 50px 68px; transform:translate(28px,-49px); } /*------------------------*/ .feather-container{ display:flex; height:110px; width:74px; transform:translate(-22px,10px); } .rooster-feather{ display:grid; height:126px; width:18px; background:#F54748; border-radius:22px 0 0 0; transform:translate(24px,-4px) rotate(-30deg); box-shadow:-16px 28px #F65C5C; } /*------------------------*/ .rooster-paw-container{ display:flex; justify-self:center; height:56px; width:80px; /* background:red; */ transform:translate(12px,-153px); } .rooster-front-paw{ display:grid; z-index:3; height:56px; width:47px; } .rooster-f-paw{ display:grid; height:56px; width:14px; background:#FFA83E; border-radius: 7px 7px 0 0; transform:translate(10px); } .rooster-f-paw:after{ content:""; display:grid; align-self:end; height:10px; width:47px; background:#FFA83E; border-radius:7px; transform:translate(-10px); } .rooster-behind-paw{ display:grid; height:56px; width:34px; } .rooster-b-paw{ display:grid; height:56px; width:14px; background:#FF9714; border-radius: 7px 7px 0 0; transform:translate(0px); } .rooster-b-paw:before{ content:""; display:block; height:28.8px; width:20px; border-radius: 0 0 10px 0; background:white; } .rooster-b-paw:after{ content:""; display:grid; align-self:end; height:10px; width:47px; background:#FF9714; border-radius: 7px; transform:translate(-12px); } /*------------------------*/ .chicken-container{ display:grid; justify-content:end; height:252px; width:196px; } .chicken-crest-container{ display:grid; justify-content:center; height:40px; width:50px; transform:translate(4px); } .chicken-crest{ display:grid; height:40px; width:20px; background:#F54748; border-radius:10px 10px 0 0; } .chicken-crest:before{ content:""; display:grid; height:40px; width:20px; background:#F54748; border-radius:10px 10px 0 0; transform:rotate(-15deg) translate(-14px,2px); } .chicken-crest:after{ content:""; display:grid; height:40px; width:20px; background:#F54748; border-radius:10px 10px 0 0; transform:rotate(15deg) translate(3px,-36px); } /*------------------------*/ .chicken-body-container{ display:grid; height:199px; width:184px; transform:translateY(-17px); } .chicken-head{ display:grid; height:118px; width:59px; background:white; border-radius: 30px 30px 0 0; } .chicken-feather-container{ display:flex; height:74px; width:59px; border-radius:32px 32px 0 0; overflow:hidden; } .chicken-feather{ display:flex; height:74px; width:20px; background:#DCDCDC; border-radius:0px 0px 10px 10px; box-shadow: 20px 0 #DCDCDC,40px 0 #DCDCDC; } .chicken-eye{ display:grid; height:12px; width:12px; border-radius:50%; background:#414141; transform:translate(17px,-62px); } .chicken-beak{ transform:scaleX(-1) translate(45px,-65px); } .chicken-body{ display:grid; height:82px; width:184px; background:white; border-radius:0 0 82px 82px; } .chicken-wing{ display:block; height:80px; width:138px; background:#DCDCDC; border-radius:50px 0px 68px 50px; transform:translate(28px,-42px) rotate(-30deg); } /*------------------------*/ .chicken-paw-container{ display:flex; justify-self:center; height:56px; width:80px; transform:rotateY(180deg) translate(0px,-43px); /* background:red; */ } .chicken-front-paw{ display:grid; z-index:3; height:56px; width:47px; } .chicken-f-paw{ display:grid; height:56px; width:14px; background:#FFA83E; border-radius: 7px 7px 0 0; transform:translate(10px); } .chicken-f-paw:after{ content:""; display:grid; align-self:end; height:10px; width:47px; background:#FFA83E; border-radius:7px; transform:translate(-10px); } .chicken-behind-paw{ display:grid; height:56px; width:34px; } .chicken-b-paw{ display:grid; height:56px; width:14px; background:#FF9714; border-radius: 7px 7px 0 0; transform:translate(0px); } .chicken-b-paw:before{ content:""; display:block; height:27px; width:20px; border-radius: 0 0 10px 0; background:white; } .chicken-b-paw:after{ content:""; display:grid; align-self:end; height:10px; width:47px; background:#FF9714; border-radius: 7px; transform:translate(-12px); } /*------------------------*/ .chick-container{ display:block; position:static; height:103px; width:156px; } .chick-body-container{ display:grid; z-index:10; justify-content:center; height:78px; width:91px; transform:translate(10px,-53px); } .chick-body{ display:grid; justify-self:center; height:69px; width:55px; border-radius:28px; backgro.........完整代码请登录后点击上方下载按钮下载查看
网友评论0