纯css实现红唇效果
代码语言:html
所属分类:布局界面
代码描述:纯css实现红唇效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --main-lip-color: #8e0e0e; --main-teeth-color: #bbbbbb; --main-background-color: #f7a4ac; } body{ background-color: var(--main-background-color); } .box { width: 80vh; height: 80vh; margin: auto; position: relative; display: block; } .circle-group-pos { position: absolute; top: 30%; left: 40%; } .circle-left { height: 50px; width: 50px; background-color: var(--main-lip-color); border-radius: 50%; position: absolute; top: 15px; } .circle-right { height: 50px; width: 50px; background-color: var(--main-lip-color); border-radius: 50%; position: absolute; left: 45px; top: 18px; } .triangle-left { width: 0; height: 0; border-top: 60px solid transparent; border-right: 92px solid var(--main-lip-color); border-bottom: 60px solid transparent; position: absolute; right: 31px; } .triangle-right { width: 0; height: 0; border-top: 100px solid transparent; border-left: 54px solid var(--main-lip-color); border-bottom: 40px solid transparent; position: absolute; left: 44px; top: 8px; } .triangle-down { width: 0; height: 0; border-left: 195px solid transparent; border-right: 38px solid transparent; border-top: 61px solid var(--main-lip-color); position: absolute; top: 87px; left: -88px; transform: rotate(14deg); } .oval-t-down-edge { height: 30px; width: 205px; background-color: var(--main-lip-color); border-radius: 50%; position: absolute; top: 99px; transform: rotate(30deg); left: -95px; } .oval-t-right-bottom-edge { height: 30px; width: 75px; background-color: var(--main-lip-color); border-radius: 50%; position: absolute; left: 33px; transform: rotate(-30deg); top: 111px; z-index: 1; } .oval-t-right-top-edge { height: 30px; width: 125px; background-color: var(--main-lip-color); border-radius: 50%; position: absolute; left: 3px; transform: rotate(55deg); top: 39px; } .oval-t-left-edge { height: 30px; width: 119px; background-color: var(--main-lip-color); border-radius: 50%; position: absolute; right: 17px; top: 13px; transform: rotate(-23deg); z-index: 2; } .inner-group-pos { position: absolute; top: 10px; left: 10px; } .rectangle-1-left { height: 35px; width: 150px; background-color: black; position: absolute; top: 55px; left: -30px; transform: rotate(18deg); z-index: 1; } .square-top-left-1 { height: 35px; width: 25px; background-color: var(--main-teeth-color); position: absolute; border-radius: 15%; transform: rotate(8deg); z-index: 1; } .square-top-left-2 { height: 35px; width: 36px; background-color: var(--main-teeth-color); position: absolute; border-radius: 20%; transform: rotate(-6deg); top: -2px; left: 22px; z-index: 1; } .square-top-right-1 { height: 35px; width: 40px; background-color: var(--main-teeth-color); position: absolute; border-radius: 20%; transform: rotate(-10deg); top: -6px; left: 56px; z-index: 1; } .square-top-right-2 { height: 26px; width: 40px; background-color: var(--main-teeth-color); position: absolute; border-radius: 15%; transform: rotate(-15deg); top: -11px; left: 95px; } .square-bottom-right-1 { height: 20px; width: 25px; background-color: var(--main-teeth-color); position: absolute; border-radius: 15%; transform: rotate(-10deg); top: 27px; left: 83px; } .square-bottom-right-2 { height: 20px; width: 35px; background-color: var(--main-teeth-color); position: absolute; border-radius: 30%; transform: rotate(-13deg); top: 21px; left: 108px; } .square-bottom-right-3 { height: 28px; width: 20px; background-color: var(--main-teeth-color); position: absolute; border-radius: 30%; transform: rotate(-10deg); top: 10px; left: 142px; } .inner-background { height: 65px; width: 184px; background-color: var(--main-lip-color); position: absolute; border-radius: 50%; transform: rotate(20deg); top: 41px; left: -49px; } .inner-extra-bg { height: 45px; width: 80px; background-color: var(--main-lip-color); position: absolute; border-radius: 50%; top: 30px; left: 17px; transform: rotate(20deg); } .oval-1 { height: 35px; width: 68px; background-color: var(--main-lip-color); position: absolute; border-radius: 50%; top: -2px; left: -37px; transform: rotate(-37deg); z-index: 2; } .oval-2 { height: 30px; width: 40px; background-color: var(--main-lip-color); position: absolute; border-radius: 30%; top: -15px; left: 13px; transform: rotate(-1deg); z-index: 2; } .oval-3 { height: 30px; width: 25px; background-color: var(--main-lip-color); position: absolute; border-radius: 35%; top: -20px; left: 44px; transform: rotate(-12deg); z-index: 2; } .oval-4 { height: 30px; width: 20px; background-color: var(--main-lip-color); position: absolute; border-radius: 35%; top: -25px; left: 65px; transform: rotate(6deg); z-index: 2; } .oval-5 { height: 30px; width: 15px; background-color: var(--main-lip-color); position: absolute; border-radius: 31%; top: -24px; left: 81px; transform: rotate(16deg); z-index: 2; } .oval-6 { height: 7px; width: 0px; position: absolute; top: 12px; left: 82px; transform: rotate(-71deg); z-index: 1; } .oval-6:before { content: ''; position: absolute; height: 50px; width: 10px; background: none; box-shadow: 5px 0px 0px 0px var(--main-lip-color); top: 1px; left: 3px; border-radius: 50%; } .oval-6:after { content: ''; position: absolute; height: 53px; width: 10px; background: none; box-shadow: -5px 0px 0px 0px var(--main-lip-color); top: 40px; left: 17px; transform: rotate(-8deg); border-radius: 50%; } .oval-7 { height: 0px; width: 0px; position: absolute; top: 1px; left: 1px; z-index: 1; } .oval-7:before { content: ''; position: absolute; height: 110px; width: 15px; background: none; box-shadow: -5px 0px 0px 0px var(--main-lip-color); top: -34px; left: 111px; transform: rotate(-89deg); border-radius:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0