css+div实现弹簧狗狗效果代码
代码语言:html
所属分类:布局界面
代码描述:css+div实现弹簧狗狗效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Space+Mono:400,400i,700,700i" rel="stylesheet"> <style> body { background: #81D2F6; } h1 { position: absolute; top: 20px; width: 99%; text-align: center; font-weight: normal; font-family: "Space Mono", monospace; font-size: 2rem; } .wrap { width: 520px; margin: 200px auto; position: relative; display: flex; } .front, .rear, .middle { position: relative; } .slink-connector { background-color: #CE7829; height: 100px; width: 70px; border-radius: 90px 20px 20px 90px; position: absolute; z-index: 2; } .leg { background-color: #832319; width: 15px; height: 90px; transform: rotate(-8deg); transform-origin: top left; position: absolute; border-top-left-radius: 15px; border-top-right-radius: 15px; bottom: -60px; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); } .mouth { position: absolute; background-color: #F8E896; width: 80px; height: 40px; right: -50px; top: 45px; border-radius: 100% 50%; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); } .mouth.top { transform-origin: left; } .mouth.top:after { position: absolute; content: ""; width: 15px; height: 15px; right: -3px; border-radius: 50%; background-color: #000; z-inddex: 10; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); } .mouth.bottom { transform-origin: left; } .foot { background-color: #F8E896; width: 50px; height: 16px; position: absolute; z-index: 6; bottom: -5px; left: 0px; border-radius: 10px; transform: rotate(7deg); box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); } .foot:before { content: ""; z-index: -1; background-color: #F8E896; width: 50px; height: 16px; position: absolute; z-index: 6; bottom: 0; left: -7px; border-radius: 10px; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); } .front { width: 30%; } .front .leg { z-index: 5; } .front .slink-connector { border-radius: 20px 90px 90px 20px; left: -13px; } .front .neck { background-color: #832319; width: 15px; height: 90px; position: absolute; top: -20px; left: 40px; z-index: 1; transform: rotate(50deg); box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); } .front .collar { background-color: #13321B; content: ""; z-index: 7; width: 40px; height: 15px; position: absolute; top: 15px; left: 30px; transform: rotate(50deg); border-radius: 5px; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); } .front .head { background-color: #CE7829; position: absolute; height: 100px; width: 100px; border-radius: 50%; top: -80px; left: 66px; z-index: 3; } .front .head .eye { background-color: #fff; width: 20px; height: 35px; position: absolute; right: 4px; transform: rotate(-30deg); top: 10px; border-radius: 50%; overflow: hidden; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); } .front .head .eye:before { content: ""; position: absolute; width: 10px; height: 13px; background-color: #000; border-radius: 50%; z-index: 5; bottom: 4px; right: 2px; } .front .head .eye:after { content: ""; position: absolute; background-color: #CE7829; height: 40px; width: 40px; z-index: 5; left: -16px; top: -29px; transform: rotate(-30deg); } .front .head .ear { background-color: #43232F; position: absolute; width: 40px; border-radius: 80% 0 55% 50%/55% 0 80% 50%; height: 140px; top: 20px; left: 15px; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); } .rear { width: 30%; } .rear .slink-connector { right: -7px; z-index: 2; } .rear .leg { right: 10px; z-index: 3; } .rear .rear-leg { background-color: #CE7829; position: absolute; width: 35px; height: 80px; right: -3px; bottom: -30px; z-index: 5; border-radius: 50px 50px 100px 100px; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); transform: rotate(-8deg); } .middle { max-width: 60%; width: 60%; } .middle .slinky-wrap { margin-top: 10px; overflow: hidden; } .middle .slinky { display: inline-block; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); width: 4px; background: #544451; height: 80px; margin-left: -8px; } .middle .slinky:nth-of-type(odd) { transform: rotate(10deg); transform-origin: top right; margin-left: 6px; } .tail-start { background-color: #CE7829; width: 30px; height: 10px; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); left: 60px; top: 20px; border-radius: 20px; position: absolute; z-index: 7; transform: rotate(-60deg); } .tail { position: absolute; width: 79px; transform: rotate(45deg); right: 47px; top: -16px; } .tail:before { content: ""; position: absolute; background-color: #832319; width: 9px; height: 14px; transform: rotate(-12deg); border-radius: 10px; left: -19px; top: -.........完整代码请登录后点击上方下载按钮下载查看
网友评论0