纯css布局实现一个恳求的表情
代码语言:html
所属分类:布局界面
代码描述:纯css布局实现一个恳求的表情
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; /* 🥺Variable and @mixin 🥺 */ /* 🥺Selector 🥺 */ * { margin: auto; } body { align-items: center; background: #a9d9ee; min-height: 100vh; display: flex; justify-content: center; height: 400px; transition: .8s; } body:hover { background: #baeaff; } .container { transform: scale(0.8); transition: .5s; } .container:hover { transform: scale(0.5); } .emoji--face { background: #ffcb4c; border-radius: 50%; height: 300px; position: relative; width: 300px; z-index: -100; } .eomoji__left-eye { background: #111; border-radius: 50% 50% 50% 50%; height: 100px; position: absolute; top: 100px; left: 160px; width: 100px; } .eomoji__left-eye:before { background: #fff; border-radius: 50%; content: ""; height: 50px; position: absolute; top: 8px; transform: rotate(-40deg); width: 70px; } .eomoji__left-eye:after { background: #fff; border-radius: 50% 50% 50% 50%; height: 100px; position: absolute; top: 100px; left: 0; width: 100px; content: ""; top: 2px; position: absolute; z-index: -9; } .emoji__left-eye-light-small { background: #fff; border-radius: 50%; height: 15px; left: 215px; position: absolute; top: 160px; transform: rotate(-45deg); width: 20px; z-index: 10; } .eomoji__right-eye { background: #111; border-radius: 50% 50% 50% 50%; height: 100px; position: absolute; top: 100px; left: 40px; width: 100px; } .eomoji__right-eye:before { background: #fff; border-radius: 50%; content: ""; height: 50px; position: absolute; top: 8px; transform: rotate(-40deg); width: 70px; } .eomoji__right-eye:after { background: #fff; border-radius: 50% 50% 50% 50%; height: 100px; position: absolute; top: 100px; left: 0; width: 100px; content: ""; top: 2px; position: absolute; z-index: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0