css布局实现一只青蛙效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现一只青蛙效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #48cae4; } .row { display: flex; flex-wrap: wrap; flex-direction: row; margin: 0 auto; } .column { flex: 50%; } .head { background-color: #9dcc1c; border-radius: 50%; height: 8.5rem; width: 14rem; margin: 0 auto; margin-top: 15rem; position: relative; top: 0; } .head:before, .head:after { content: ""; background-color: #9dcc1c; border-radius: 50%; height: 5rem; position: absolute; width: 5rem; } .head:before { top: -1rem; left: 1rem; } .head:after { left: 7.75rem; top: -1rem; } .eye1 { border-radius: 50%; background-color: #333333; width: 2rem; height: 2rem; margin: 0 auto; margin-left: 2rem; position: absolute; } .eye2 { border-radius: 50%; background-color: #333333; width: 2rem; height: 2rem; margin: 0 auto; margin-left: 9.5rem; z-index: 1; position: absolute; } .white_eye{ background-color: #ffffff; border-radius: 50%; width: 0.8rem; height: 0.8rem; margin-left: 1rem; margin-top: 0.2rem; } .blush1{ border-radius: 50%; background-color: #ffcc99; width: 2.5rem; height: 2.5rem; margin: 0 auto; margin-top: 3rem; margin-left: 0.75rem; position: absolute; } .blush2{ border-radius: 50%; background-color: #ffcc99; width: 2.5rem; height: 2.5rem; margin: 0 auto; margin-top: 3rem; margin-left: 10.5rem; position: absolute; z-index: 1; } .smile{ border-radius: 50%; background-color: #9dcc1c; border: 5px solid #000; width: 6.5rem; height: 2.5rem; margin: 0 auto; margin-top: 3rem; margin-left: 3.35rem; clip-path: inset(40% 0% 0% 0%); position: absolute; z-index: 1; } .frog_body { border-radius: 50%; background-color: #9dcc1c; height: 8rem; width: 11rem; margin: 0 auto; margin-top: -3rem; margin-bottom: 3rem; position: relative; } .frog_body:before, .frog_body:after { content: ""; background-color: #9dcc1c; border-radius: 50%; height: 3rem; position: absolute; width: 6rem; clip-path: inset(40% 0% 0% 0%); } .frog_body:before { top: 6.5rem; left: -0.6rem; transform: rotate(170deg) } .frog_body:after { left: 5rem; top: 6.5rem; transform: rotate(-170deg); z-index: -1; } .white_tummy{ border-radius: 50%; background-color: #ffffff; height: 4.5rem; width: 7.5rem; margin-top: 2.5rem; margin-left: 1.75rem; position: absolute; z-index: 2; } .hand1{ background-color: #9dcc1c; height: 6.5rem; width: 1.5rem; margin-top: 1.95rem; margin-left: 2.5rem; position: absolute; transform: rotate(-20deg); clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); z-index: 3; } .hand2{ background-color: #9dcc1c; height: 6.5rem; width: 1.5rem; margin-top: 1.95rem; margin-left: 7rem; position: absolute; transform: rotate(20deg); clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); z-index: 3; } .finger1, .finger2 { background-color: #.........完整代码请登录后点击上方下载按钮下载查看
网友评论0