div+css实现爱心咖啡杯效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现爱心咖啡杯效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin:0; padding:0; } .wrapper { display:flex; align-items:center; justify-content:center; background:#F9D3C0; height:100vh; } .wrapper__content { width:600px; height:600px; position:relative; } .cup-body { position:absolute; width:241px; height:324px; border-radius:18px; background:#4D343F; left:205px; top:179px; } .cup-body:before { content:''; position:absolute; width:175px; height:308px; background:inherit; left:-19px; top:0; background:inherit; -webkit-transform:skew(7deg,0deg); transform:skew(7deg,0deg); } .cup-body:after { content:''; position:absolute; width:175px; height:308px; background:inherit; right:-19px; top:0; background:inherit; -webkit-transform:skew(-7deg,0deg); transform:skew(-7deg,0deg); } .cup-body-shadow { position:absolute; top:215px; left:176px; width:248px; height:38px; border-radius:0 45px 45px 0; background:#5B4049; } .cup-body-shadow:after { content:''; position:absolute; width:50px; height:38px; background:inherit; left:-2px; top:0; background:inherit; -webkit-transform:skew(7deg,0deg); transform:skew(7deg,0deg); } .cup-body-shadow-bottom { position:absolute; top:457px; left:211px; width:184px; height:46px; border-radius:0 45px 45px 27px; background:#5B4049; } .cup-body-shadow-bottom:after { content:''; position:absolute; width:50px; height:46px; left:-7px; top:0; background:inherit; -webkit-transform:skew(7deg,0deg); transform:skew(7deg,0deg); border-radius:0 0 0 20px; } .cup-label { background:#84505B; position:absolute; width:264px; height:192px; border-radius:10px; left:193px; top:251px; } .cup-label:before { content:''; position:absolute; width:175px; height:191px; left:-10px; top:0; background:inherit; -webkit-transform:skew(7deg,0deg); transform:skew(7deg,0deg); border-radius:11px; } .cup-label:after { content:''; position:absolute; width:175px; height:191px; right:-10px; top:0; background:inherit; -webkit-transform:skew(-7deg,0deg); transform:skew(-7deg,0deg); border-radius:11px; } .cup-label-red { background:#CE605A; position:absolute; width:264px; height:145px; left:193px; top:274px; } .cup-label-red:before { content:''; position:absolute; width:175px; height:148px; left:-10px; top:0; background:inherit; -webkit-transform:skew(7deg,0deg); transform:skew(7deg,0deg); } .cup-label-red:after { content:''; position:absolute; width:175px; height:148px; right:-10px; top:0; background:inherit; -webkit-transform:skew(-7deg,0deg); transform:skew(-7deg,0deg); } .cup-label-red-shadow { position:absolute; top:27px; left:-2px; width:230px; height:120px; border-radius:0 111px 183px 33px; z-index:1; -webkit-transform:skew(0deg,-1deg); transform:skew(0deg,-1deg); background:#DD6C65; } .cup-label-red-shadow:after { content:''; position:absolute; width:50px; height:120px; left:-6px; top:0; background:inherit; -webkit-transform:skew(7deg,0deg); transform:skew(7deg,0deg); border-radius:0 0 0; } .cup-upper { background:#784451; position:absolute; top:108px; left:388px; height:25px; width:52px; border-radius:7px 10px 0 0; } .cup-upper:before { content:''; border-bottom:22px solid #784451; border-right:9px solid transparent; position:absolute; right:-7px; top:3px; } .cup-upper:after { content:''; border-bottom:25px solid #84505B; border-left:51px solid transparent; position:absolute; left:-47px; top:0px; } .cup-upper-shadow { position:absolute; top:1px; left:-14px; width:35px; height:23px; border-radius:100%; -webkit-transform:skew(0deg,-15deg) rotate(2deg); transform:skew(0deg,-15deg) rotate(2deg); background:#84505B; } .cup-middle { background:#955C6B; position:absolute; top:133px; left:187px; height:27px; width:279px; border-radius:12px 12px 0 0; } .cup-middle:after { content:''; position:absolute; left:0; width:186px; height:16px; background:#9C6471; bottom:0; border-radius:0 20px 20px 0; } .cup-bottom { background:#784451; position:absolute; top:160px; left:166px; height:41px; width:324px; border-radius:12px; } .cup-bottom:before { content:''; position:absolute; left:-4px; width:40px; height:41px; background:inherit; bottom:0; border-radius:12px; -webkit-transform:skew(-20deg,0deg); transform:skew(-20deg,0deg); } .cup-bottom:after { content:''; position:absolute; right:-4px; width:40px; height:41px; background:inherit; bottom:0; border-radius:12px; -webkit-transform:skew(20deg,0deg); transform:skew(20deg,0deg); } .cup-bottom-shadow { position:absolute; bottom:0; left:1px; width:231px; height:29px; border-radius:0 19px 19px 0; background:#84505B; z-index:1; } .cup-bottom-shadow:after { content:''; position:absolute; left:-7px; width:40px; height:29px; background:#84505B; bottom:0; bo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0