纯css布局实现一个卡通娃娃脸效果代码
代码语言:html
所属分类:布局界面
代码描述:纯css布局实现一个卡通娃娃脸效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /* Temp */ body { margin: 0; padding: 0; } div { box-sizing: border-box; } /* Helpers */ .oval { border-radius: 50%; width: 100px; height: 100px; box-sizing: border-box; } /* Specific classes */ .villager { position: absolute; opacity: 1; left: 28px; top: -82px; } .head { position: absolute; z-index: 10; width: 202.92px; height: 219.42px; left: 134px; top: 111.14px; background: radial-gradient(ellipse at center, #f8e3c3 0%, #f9e2cc 100%); border-radius: 90px 90px 90px 80px; transform: rotate(-16.92deg); box-shadow: inset -5px -10px 20px 0px rgba(147, 105, 86, 0.5); } .left-ear { position: absolute; z-index: 1; width: 10px; height: 10px; left: 118px; top: 252px; transform: rotate(-24.6deg) scale(0.3159, 0.4407); } .left-ear .oval { background: radial-gradient(ellipse at center, #f0c2ae 0%, #fdf1dd 100%); border-left: 10px solid #f2e8de; } .mouth { position: absolute; left: 54.5px; top: 165px; width: 66px; height: 21.57px; overflow: hidden; } .mouth .lip { width: 58.17px; height: 42.08px; border-radius: 50%; background: linear-gradient(to bottom, #735238 0%, #735238 50%, #826346 100%); position: relative; top: -24px; } .mouth .lip:after { content: ''; display: block; position: absolute; top: 13px; left: 24px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(ellipse at center, #d2bfa2 0%, #fce7cb 50%); transform: scale(4.624, 3.707); } .right-ear { position: absolute; z-index: 1; width: 43.06px; height: 47.94px; left: 326px; top: 188px; border-radius: 0 19px 26px 0; border-right: 2px solid rgba(210, 159, 132, 0.2); border-bottom: 2px solid rgba(210, 159, 132, 0.5); background: radial-gradient(ellipse at center, #ddad94 0%, #fad6c3 100%); transform: rotate(-19.13deg); } .hair-back { position: absolute; z-index: 2; width: 219.3px; height: 181.76px; left: 121px; top: 108px; border-radius: 97px 106px 70px 77px; background: #473a2d; transform: rotate(-23.52deg); } .left-eye { position: absolute; width: 42.16px; height: 54px; left: 18px; top: 99px; border-radius: 32px 32px 32px 16px; overflow: hidden; background: linear-gradient(to bottom, #74594c 0%, #74594c 50%, #b09071 100%); } .left-eye-background { position: absolute; top: 0px; left: 0px; } .left-eye-background .oval { position: absolute; left: -30px; top: -26px; background-color: white; transform: scale(0.3405, 0.41); } .left-eye-background .rect { position: absolute; left: 3px; top: 20px; background-color: white; width: 34.05px; height: 50px; } .left-eye-eyeball { position: absolute; z-index: 2; top: 0px; left: 0px; width: 38px; height: 80px; border-radius: 0 26px 0 0; overflow: hidden; } .left-eye-eyeball .oval { position: absolute; top: -24px; left: -22px; background-color: #3e3e3e; transform: scale(0.3024, 0.398); } .right-eye { position: absolute; width: 48.13px; height: 54px; left: 110px; top: 99px; border-radius: 32px 28px 18px 14px; overflow: hidden; background: linear-gradient(to bottom, #6a554d 0%, #6a554d 50%, #b08f72 100%); } .right-eye-background { position: absolute; top: 5px; left: 5px; background-color: white; width: 39px; height: 52.38px; border-radius: 25px 23px 0 0; } .right-eye-eyeball { position: absolute; z-index: 2; top: 0p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0