css布局实现一只可爱高尔基狗狗效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现一只可爱高尔基狗狗效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /* colours */ body { background: #f5e3e0; } .clover { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .corgi { left: 0; right: 0; margin: auto; position: relative; width: 200px; height: 300px; } .head { position: absolute; z-index: 1; top: 60px; left: 100px; } .head:after { /* cheeks */ position: absolute; top: 80px; left: -100px; content: ""; border: 100px solid transparent; border-top: 80px solid #ee9837; } .head .forehead { position: absolute; top: 20px; left: -60px; height: 100px; width: 120px; background: #ee9837; border-radius: 40%; } .snout { /* an upside down css heart <3 */ position: relative; z-index: 2; top: 60px; left: -40px; } .snout:before, .snout:after { background: #fff; position: absolute; content: ""; top: 10px; width: 50px; height: 80px; border-top: 1px solid #ddd; border-radius: 60px 60px 0 0; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); transform: rotate(225deg); } .snout:after { left: 30px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg); } .bridge { /* white fur between eyes */ position: absolute; top: -40px; left: 30px; border: 10px solid transparent; border-bottom: 40px solid #ee9837; border-bottom-color: #fff; } .booper { /* nose */ background: black; position: absolute; z-index: 1; top: 35px; left: 20px; height: 30px; width: 40px; border-radius: 50px 50px 70px 70px; } .eyes { position: absolute; top: 60px; } .eyes .left { position: absolute; background: black; margin: auto; height: 13px; width: 13px; border-radius: 50%; left: 25px; } .eyes .right { position: absolute; background: black; margin: auto; height: 13px; width: 13px; border-radius: 50%; right: 25px; } .ears { /* variables provide symmetry */ } .ears .left { background-color: #ee9837; position: absolute; left: -40px; top: 35px; transform: rotate(45deg) skewX(40deg) scale(1, 0.866); } .ears .right { background-color: #ee9837; position: absolute; right: -40px; top: 35px; transform: rotate(-45deg) skewX(-40deg) scale(1, 0.866); } .ears .right, .ears .right:before, .ears .right:after, .ears .left, .ears .left:before, .ears .left:after { width: 7em; height: 6em; } .ears .right, .ears .right:before, .ears .right:after { border-radius: 20% 20% 40% 20%; } .ears .left, .ears .left:before, .ears .left:after { border-radius: 20% 20% 20% 40%; } .tongue { background: #e8b4bc; position: absolute; z-index: 1; top: 30px; left: 15px; width: 30px; height: 40px; border-radius: 0 0 40% 40%; -webkit.........完整代码请登录后点击上方下载按钮下载查看
网友评论0