css布局实现一个可爱小黄人效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现一个小黄人效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin:100px; } :before,:after { content:""; position:absolute } .container { max-width:550px; padding:0; margin:0 auto; min-height:450px; display:inline; perspective:800px; perspective-origin:50% 50% } .minion { position:absolute; top:calc(48% -(250px / 2)); left:calc(50% -(140px / 2)); height:250px; width:140px } .minion * { position:absolute } .minion .hair { top:-15px; margin:0; padding:0 } .minion .hair.back li:nth-of-type(1) { transform:rotate(-70deg); margin-top:36px } .minion .hair.back li:nth-of-type(2) { transform:rotate(-50deg); margin-top:19px } .minion .hair.back li:nth-of-type(3) { transform:rotate(-30deg); margin-top:12px } .minion .hair.back li:nth-of-type(4) { transform:rotate(-10deg); margin-top:3px } .minion .hair.back li:nth-of-type(5) { transform:rotate(2deg); border-left:1px solid #333; border-radius:80% 0 0 0 } .minion .hair.back li:nth-of-type(6) { transform:rotate(10deg); margin-top:3px } .minion .hair.back li:nth-of-type(7) { transform:rotate(30deg); margin-top:12px } .minion .hair.back li:nth-of-type(8) { transform:rotate(50deg); margin-top:19px } .minion .hair.back li:nth-of-type(9) { transform:rotate(70deg); margin-top:36px } .minion .hair.front { margin-top:3px; z-index:4 } .minion .hair.front li:nth-of-type(1) { transform:rotate(-60deg); margin-top:21px } .minion .hair.front li:nth-of-type(2) { transform:rotate(-46deg); margin-top:12px } .minion .hair.front li:nth-of-type(3) { transform:rotate(-28deg); margin-top:7px } .minion .hair.front li:nth-of-type(4) { transform:rotate(-12deg); margin-top:5px } .minion .hair.front li:nth-of-type(5) { transform:rotate(-2deg); border-right:1px solid #333; border-radius:0 80% 0 0; margin-top:3px } .minion .hair.front li:nth-of-type(6) { transform:rotate(12deg); margin-top:6px } .minion .hair.front li:nth-of-type(7) { transform:rotate(28deg); margin-top:7px } .minion .hair.front li:nth-of-type(8) { transform:rotate(46deg); margin-top:12px } .minion .hair.front li:nth-of-type(9) { transform:rotate(60deg); margin-top:21px } .minion .hair li { list-style:none; height:30px; width:10px; float:left } .minion .hair li:nth-of-type(1) { transform:rotate(-70deg); position:absolute; left:8px; height:30px } .minion .hair li:nth-of-type(2) { transform:rotate(-50deg); left:18px } .minion .hair li:nth-of-type(3) { transform:rotate(-30deg); left:30px } .minion .hair li:nth-of-type(4) { transform:rotate(-10deg); left:45px } .minion .hair li:nth-of-type(5) { left:60px } .minion .hair li:nth-of-type(6) { transform:rotate(10deg); left:76px } .minion .hair li:nth-of-type(7) { transform:rotate(30deg); left:93px } .minion .hair li:nth-of-type(8) { transform:rotate(50deg); left:107px } .minion .hair li:nth-of-type(9) { transform:rotate(70deg); left:119px; height:30px } .minion .hair li:nth-of-type(n+6) { border-left:1px solid #333; border-radius:80% 0 0 0 } .minion .hair li:nth-of-type(-n+4) { border-right:1px solid #333; border-radius:0 80% 0 0 } .minion .minion-body { position:relative; height:250px; width:140px; border-radius:80px 80px 50px 50px; background:#FFCB4F; overflow:hidden } .minion .minion-body:after,.minion .minion-body:before { top:0; left:0 } .minion .minion-body:before { width:80%; height:100%; border-radius:20px; background-image:radial-gradient(rgba(250,250,250,0.6) 0,rgba(250,250,250,0) 60%); filter:blur(5px); z-index:1; left:-10px } .minion .minion-body:after { height:250px; width:140px; border-radius:80px 80px 50px 50px; background-image:linear-gradient(left,rgba(0,0,0,0) 70%,rgba(0,0,0,0.2) 100%); filter:blur(5px); z-index:1 } .minion .minion-body .dungarees-front { bottom:0; height:90px; width:140px; overflow:hidden; border-top:1px solid #4883b8 } .minion .minion-body .dungarees-front:before { left:-30px; border-radius:0 0 35% 0; box-shadow:40px -40px 30px 40px #6D9CC6 } .minion .minion-body .dungarees-front:after { right:-30px; box-shadow:-40px -40px 30px 40px #6D9CC6; border-radius:0 0 0 35% } .minion .minion-body .dungarees-front:before,.minion .minion-body .dungarees-front:after { width:56px; height:75%; top:0; border:1px solid #4883b8 } .minion .minion-body .dungarees-pocket { bottom:35px; left:50%; margin-left:-17.5px; height:35px; width:35px; border-radius:0 0 15px 15px; border-left:1px solid #4883b8; border-right:1px solid #4883b8; border-bottom:1px solid #4883b8 } .minion .minion-body .dungarees-pocket:before { top:-13px; left:-2px; height:15px; width:37px; border-bottom:1px solid #4883b8; border-left:1px solid transparent; border-right:1px solid transparent; border-radius:20px } .minion .minion-body .dungarees-pocket .logo { top:50%; left:50%; margin-left:-12.5px; margin-top:-10.5px; height:25px; width:25px; background:#333; border-radius:50% } .minion .minion-body .dungarees-pocket .logo:before { top:50%; left:50%; margin-left:-7.5px; margin-top:-7.5px; height:15px; width:15px; background:#6D9CC6; transform:rotate(45deg) } .minion .minion-body .dungarees-pocket .logo:after { top:50%; left:50%; margin-left:-3.5px; margin-top:-3.5px; height:7px; width:7px; background:#333; border-radius:50%; z-index:5 } .minion .minion-body .dungarees-pocket .logo span { height:2px; background:#333; border-bottom:1px solid #6D9CC6; width:12.5px; right:0; top:48%; margin-top:-1px; z-index:6 } .minion .minion-body .dungarees-bottom { bottom:0; height:40px; w.........完整代码请登录后点击上方下载按钮下载查看
网友评论0