纯css布局实现小绵羊效果
代码语言:html
所属分类:布局界面
代码描述:纯css布局实现小绵羊效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ background-color: #6cf255; } :root { --fluff-size: 70px; --ear-width: 15px; --ear-height: 20px; } .sheep{ position: relative; margin: auto; display: block; margin-top: 8%; margin-bottom: 8%; width: 180px; height: 180px; } /*MIDDLE FLUFF LEFT*/ .fluff { position: absolute; width: var(--fluff-size); height: var(--fluff-size); border-radius: 50%; background: white; top: 50px; } /*MIDDLE FLUFF RIGHT*/ .fluff.right{ right: 0; } /*UPPER FLUFF*/ .fluff::before { content: ""; position: absolute; width: var(--fluff-size); height: var(--fluff-size); border-radius: 50%; background: white; top: -35px; } /*UPPER FLUFF LEFT*/ .fluff.left::before{ left:35px; } /*UPPER FLUFF RIGHT*/ .fluff.right::before{ left: -35px; } /*LOWER FLUFF*/ .fluff::after{ content: ""; position: absolute; width: var(--fluff-size); height: var(--fluff-size); border-radius: 50%; background: white; top: 35px; } /*LOWER FLUFF LEFT*/ .fluff.left::after{ left:35px; } /*LOWER FLUFF RIGHT*/ .fluff.right::after{ left:-35px; } .head { position: absolute; width: 70px; height: 70px; background: black; border-radius: 50%; left: 50%; top: 30px; transform: translateX(-50%); } /*LEFT EAR*/ .head::before{ content: ""; position: absolute; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0