纯css实现一个企鹅形象
代码语言:html
所属分类:布局界面
代码描述:纯css实现一个企鹅形象
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --black: black; --white: white; --gray: #E2E2E2; --orange: #EF961E; --background-color: #67B5C6; } body{ background: var(--background-color); } .box-canvas{ position: relative; margin: auto; display: block; margin-top: 8%; margin-bottom: 8%; width: 250px; height:600px; } .head { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: var(--black); width: 120px; height: 120px; border-radius: 50% 50% 0 0; } .mask { position: absolute; width: 100px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .mask::before { content: ''; position: absolute; top: 30px; left: 5px; background: var(--white); width: 50px; height: 80px; border-radius: 50%; -webkit-transform: rotate(-20deg); transform: rotate(-20deg); } .mask::after { content: ''; position: absolute; right: 5px; top: 30px; background: var(--white); width: 50px; height: 80px; border-radius: 50%; -webkit-transform: rotate(20deg); transform: rotate(20deg); } .beak { position: absolute; left: 40px; top: 80px; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid var(--orange); } /* Left eye */ .beak::before { content: ''; top: -45px; left: -30px; position: absolute; background: var(--black); width: 12px; height: 12px; border-radius: 50%; } /* Right eye */ .beak::after { content: ''; top: -45px; right: -30px; position: absolute; background: var(--black); width: 12px; height: 12px; border-radius: 50%; } .body { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0