css布局实现鹈鹕进食效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现鹈鹕进食效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --grey: #e1e9f5; /* background */ --lightgrey: #fafbfa; /* background */ --white: #ffffff; /* pelican */ --darkgrey: #9a9ba8; /* body stripe */ --mediumgrey: #d7d7dc; /* body shadow */ --orange: #d66138; /* beak */ --darkorange: #aa563f; /* mouth */ --mediumorange: #b7593d; /* mouth */ --mediumorange2: #c65d3b; /* mouth */ --lightorange: #d66e4a; /* mouth */ --greyish: #e8eaf9; /* eye */ --darkblue: #363a64; /* eye */ --mediumorange3: #d56a44; /* fish head */ --blackish: #383951; /* fish eye */ --verylightgrey: #eff3f5; /* trim */ } * { margin: 0; padding: 0; box-sizing: border-box; } .container { position: relative; display: flex; justify-content: center; align-items: center; background: var(--lightbiege); width: 100%; height: 100vh; } .canvas { position: relative; display: flex; justify-content: center; align-content: center; width: 80vmin; height: 80vmin; } .trim { position: absolute; width: 7vmin; height: 4vmin; background: var(--mediumgrey); top: 71vmin; left: 17vmin; border-bottom-left-radius: 100% 200%; border-bottom-right-radius: 100% 200%; float: left; } .trimline { position: absolute; width: 60vmin; height: 0.5vmin; background: var(--mediumgrey); bottom: 9vmin; left: 15vmin; } .trimline:after { content: ""; position: absolute; width: 60vmin; height: 0.5vmin; background: var(--mediumgrey); bottom: -5vmin; } .t1, .t9 { left: 24vmin; } .t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0