css布局实现鸟儿太阳下吃鱼效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现鸟儿太阳下吃鱼效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } html { height: 100%; } body { background: radial-gradient(at 76% 28%,#FFA100 -37%,#72FFF6 101%); height: 100%; } /*Colors*/ .grass { background: #7ebc6f; } .rock { background: #b1aaa4; } .head, .wings { background: #11b197; } .container { height: 510px; position: absolute; overflow: hidden; width: 100%; bottom: 0; } .container > .grass { position: absolute; bottom: 0; height: 5px; display: block; width: 100%; border-bottom: 1px solid #67b65a; } #bird-wrapper { height: 510px; width: 765px; position: absolute; /* top: 0; */ left: 50%; bottom: 0; margin-left: -334px; } /*--- Sun ---*/ #sun { position: fixed; right: 20%; top: 20%; height: 137px; width: 137px; background: #e86c48; border-radius: 50%; box-sizing: border-box; padding: 5px; border: 10px solid #efa588; } /*--- Bird ---*/ #bird { position: absolute; bottom: 45px; width: 433px; height: 306px; left: 148px; } .head { position: absolute; top: 7px; left: 110px; height: 80px; width: 107px; transform: rotate(43deg); border-radius: 63% 0 0 40%; } .head .eye { position: absolute; top: 31px; left: 20px; width: 9px; height: 9px; background: #3f2a27; border-radius: 50%; } .crest { position: absolute; top: 4px; left: 139px; height: 26px; width: 74px; border-top-left-radius: 18px; overflow: hidden; } .crest .crest-1, .crest .crest-2 { position: absolute; height: 0; width: 0; border-color: #21957e transparent transparent transparent; border-style: solid; border-width: 14px 27px 0px 37px; z-index: -5; display: block; } .crest .crest-1 { left: 11px; top: 0px; } .crest .crest-2 { left: 11px; top: 12px; } .head .head-lines { position: absolute; top: 31px; left: 29px; height: 31px; width: 57px; transform: rotate(2deg); } .head-lines > span { display: block; width: 100%; height: 50%; border-radius: 60% 0 0 0; transform: skew(-20deg); } .head-lines .head-line-1 { background: white; margin-left: 19px; } .head-lines .head-line-2 { background: #e56d48; border-radius: 49% 0 0 0; margin-left: 3px; } .head .mouth { position: absolute; top: 55px; left: -93px; width: 140px; height: 100px; transform: rotate(-43deg); } .head .mouth .nouse { position: absolute; top: 33px; left: 101px; width: 0; height: 0; border-radius: 29%; border-right: 14px solid #5b4035; border-top: 4px solid transparent; border-bottom: 3px solid transparent; z-index: 10; } .head .mouth .peak-top { position: absolute; border-color: transparent #3e2b24 transparent transparent; border-style: solid; border-width: 16px 124px 4px 0px; transform: skew(24deg); top: 27px; left: 4px; z-index: 5; } .head .mouth .peak-bottom { position: absolute; border-color: transparent #5b4035 transparent transparent; border-style: solid; border-width: 0px 125px 19px 0px; transform: skew(-19deg); top: 46px; left: 4px; z-index: -1; } .head .mouth .fish { position: absolute; top: 37px; left: 47px; width: 47px; height: 67px; } .fish .body-left, .fish .body-right { position: absolute; height: 0; width: 0; border-bottom-width: 0; border-style: solid; } .fish .body-left { border-width: 57px 0px 0px 20px; top: 3px; left: 5px; border-color: #b1aaa4 transparent; } .head .mouth .fish:before, .head .mouth .fish:after { position: absolute; content: ""; width: 0; height: 0; z-index: 20; } .head .mouth .fish:after { height: 11px; width: 34px; background: #412925; transform: rotate(144deg); left: -3px; top: 55px; border-radius: 0 0 100% 0px; } .head .mouth .fish:before { height: 11px; width: 34px; background: #412925; transform: rotate(221deg); left: 17px; top: 56px; border-radius: 0 0 0 100%; } .fish .fin-top { height: 10px; width: 28px; background: #412925; transform: rotate(-99deg); left: 29px; top: 10px; border-radius: 0 0 0 100%; position: absolute; } .fish .fin-bottom { height: 10px; width: 28px; background: #412925; transform: rotate(100deg); left: -9px; top: 10px; border-radius: 0 0 100% 0; position: absolute; z-index: -1; } .fish .body-right { border-width: 57px 20px 0px 0px; top: 3px; left: 24px; border-color: #9f9a94 transparent; } .wings { border-radius: 511px 0 1600px 355px / 511px 0 800px 332px; width: 276px; height: 120px; position: absolute; top: 108px; left: 141px; transform:rotate(51deg) skew(-6deg); border-style:solid; border-color: #21957e; border-width: 0px 10px 13px 0px; } .wings .wing-dots { position: absolute; top: 7px; width: 149px; height: 44px; left: 35px; text-align: center; } .wings .wing-dots span { display: inline-block; border-radius: 50%; background: #20967e; } .wings span.small { width: 8px; height: 8px; margin: 0 11px; } .wings span.big { width: 10px; height: 10px; margin: 0 11px; } .feathers { width: 160px; height: 160px; position: absolute; top: 147px; left: 281px; } .feathers > span { position: absolute; background: #3e2b25; } .feathers .feather-1 { width: 100px; height: 60px; border-bottom-right-radius: 100%; left: 30px; top: 33px; } .feathers .feather-2, .feathers .feather-3 { height: 45px; width: 127px; transform: rotate(54deg); border-radius: 0 0 149% 0px / 0 0 146% 13px; } .feathers .feather-2 { top: 75px; left: 28px; } .feathers .feather-3 { top: 83px; left: -5px; height: 30px; width: 100px; } .legs { position: absolute; top: 161px; height: 92px; width: 100px; background: #cc694a; left: 230px; transform: skewX(-12deg) rotate(43deg); z-index: -2; } .feet { position: absolute; top: 284px; left: 226px; width: 50px; height: 8px; background: #3e2d25; z-index: -5; transform: rotate(-44deg); } .feet .toes { width: 95px; height: 6px; background: #3e2d25; transform: rotate(58deg); position: absolute; top: -5px; left: -52px; } .toes:before { content: ""; position: absolute; left: -8px; height: 10px; width: 10px; top: 4px; b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0