纯css绘制一个小猪效果
代码语言:html
所属分类:布局界面
代码描述:纯css绘制一个小猪效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --pig-pink: pink; --accent-pink: #F998A8; --background-color: #048877; } body{ background: var(--background-color); } .box-canvas{ position: relative; margin: auto; display: block; margin-top: 8%; margin-bottom: 8%; width: 600px; height:600px; background: var(--background-color); } /* Wrapper to make it easier to position pig */ .pig { position: absolute; left: 50%; transform: translateX(-50%); width: 230px; height: 200px; } .head { position: absolute; width: 100px; height: 100px; border-radius: 30% 30% 50% 50%; background: var(--pig-pink); box-shadow: 0px 1px 0px 0px var(--accent-pink); } /* Left ear */ .head::before { content: ''; position: absolute; left: -5px; top: -5px; width: 50px; height: 40px; background: var(--accent-pink); border-radius: 50%; clip-path: polygon(25% 100%, 0 0, 100% 0); } /* Right ear */ .head::after { content: ''; position: absolute; right: -5px; top: -5px; width: 50px; height: 40px; background: var(--accent-pink); border-radius: 50%; clip-path: polygon(75% 100%, 0 0, 100% 0); } .nose { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -60%); background: var(--accent-pink); width: 25px; height: 20px; border-radius: 40%; } /* Left nostril */ .nose::before { content: ''; position: absolute; left: 5px; top: 5px; height: 10px; width: 5px; background: var(--pig-pink); border-radius: 50%; } /* Right nostril */ .nose::after { content: ''; position: absolute; right: 5px; top: 5px; height: 10px; width: 5px; background: var(--pig-pink); border-radius: 50%; } .eye { position: absolute; width: 15px; height: 15px; background: white; border-radius: 50%; top: 25%; } .eye.left { left: 25%; } .eye.right { right: 25%; } /* Pupils */ .eye::.........完整代码请登录后点击上方下载按钮下载查看
网友评论0