css绘制一个小黄人效果代码
代码语言:html
所属分类:布局界面
代码描述:css绘制一个小黄人效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :before, :after { content: ""; position: absolute; } .container { max-width: 550px; padding: 0; margin: 0 auto; min-height: 450px; display: inline; -webkit-perspective: 800px; perspective: 800px; -webkit-perspective-origin: 50% 50%; 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) { -webkit-transform: rotate(-70deg); transform: rotate(-70deg); margin-top: 36px; } .minion .hair.back li:nth-of-type(2) { -webkit-transform: rotate(-50deg); transform: rotate(-50deg); margin-top: 19px; } .minion .hair.back li:nth-of-type(3) { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); margin-top: 12px; } .minion .hair.back li:nth-of-type(4) { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); margin-top: 3px; } .minion .hair.back li:nth-of-type(5) { -webkit-transform: rotate(2deg); transform: rotate(2deg); border-left: 1px solid #333333; border-radius: 80% 0 0 0; } .minion .hair.back li:nth-of-type(6) { -webkit-transform: rotate(10deg); transform: rotate(10deg); margin-top: 3px; } .minion .hair.back li:nth-of-type(7) { -webkit-transform: rotate(30deg); transform: rotate(30deg); margin-top: 12px; } .minion .hair.back li:nth-of-type(8) { -webkit-transform: rotate(50deg); transform: rotate(50deg); margin-top: 19px; } .minion .hair.back li:nth-of-type(9) { -webkit-transform: rotate(70deg); transform: rotate(70deg); margin-top: 36px; } .minion .hair.front { margin-top: 3px; z-index: 4; } .minion .hair.front li:nth-of-type(1) { -webkit-transform: rotate(-60deg); transform: rotate(-60deg); margin-top: 21px; } .minion .hair.front li:nth-of-type(2) { -webkit-transform: rotate(-46deg); transform: rotate(-46deg); margin-top: 12px; } .minion .hair.front li:nth-of-type(3) { -webkit-transform: rotate(-28deg); transform: rotate(-28deg); margin-top: 7px; } .minion .hair.front li:nth-of-type(4) { -webkit-transform: rotate(-12deg); transform: rotate(-12deg); margin-top: 5px; } .minion .hair.front li:nth-of-type(5) { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); border-right: 1px solid #333333; border-radius: 0 80% 0 0; margin-top: 3px; } .minion .hair.front li:nth-of-type(6) { -webkit-transform: rotate(12deg); transform: rotate(12deg); margin-top: 6px; } .minion .hair.front li:nth-of-type(7) { -webkit-transform: rotate(28deg); transform: rotate(28deg); margin-top: 7px; } .minion .hair.front li:nth-of-type(8) { -webkit-transform: rotate(46deg); transform: rotate(46deg); margin-top: 12px; } .minion .hair.front li:nth-of-type(9) { -webkit-transform: rotate(60deg); transform: rotate(60deg); margin-top: 21px; } .minion .hair li { list-style: none; height: 30px; width: 10px; float: left; } .m.........完整代码请登录后点击上方下载按钮下载查看
网友评论0