css布局一个兔子吃萝卜效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局一个兔子吃萝卜效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <style> html,body { width: 100vw; height: 100vh; margin: 0; padding: 0; display: grid; justify-content: center; align-content: center; background-color: #0e1111; font-size: 18px; } @media (min-width: 420px) and (min-height: 350px) { html, body { font-size: 24px; }} @media (min-width: 576px) and (min-height: 400px) { html, body { font-size: 30px; }} @media (min-width: 620px) and (min-height: 450px) { html, body { font-size: 36px; }} @media (min-width: 768px) and (min-height: 530px) { html, body { font-size: 50px; }} .disclaimer { position: absolute; padding: 0.2rem; bottom: 0; right: 0; font-size: 14px; font-family: monospace; color: #eaefe8; opacity: 0.5; } .disclaimer:hover { opacity: 1; } .disclaimer a { text-decoration: none; color: inherit; } .disclaimer a:hover { text-decoration: underline; } .container { background-color: #fff; background: rgba(130, 221, 240, 0.7); width: 10rem; height: 10rem; border-radius: 50%; position: relative; box-shadow: 0.2rem 0.2rem 0.5rem 0 rgba(0, 0, 0, 0.5); } .ear { width: 1rem; height: 2rem; border-radius: 2rem 0% 0% 2rem; background-color: #eaefe8; position: absolute; left: 50%; top: 15%; overflow: hidden; } .ear::before { content: ""; display: block; position: absolute; width: 1rem; height: 2rem; background-color: #e8b9c3; right: -50%; border-radius: 50%; box-shadow: inset 0 0 0.5rem 0 rgba(14, 17, 17, 0.1); } .head { width: 2rem; height: 2rem; position: absolute; top: 35%; left: 60%; background-color: #eaefe8; border-radius: 0 0 100% 0; } .head::before { content: ""; display: block; width: 0.5rem; height: 0.5rem; background-color: #0e1111; position: absolute; top: 20%; left: 20%; border-radius: 50%; } .body { width: 3rem; height: 3rem; background-color: #eaefe8; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0