{"html":"

Darth Vader By qpoziomek

","css":"::-moz-selection {\n background: #2D3363;\n color: #FAEECF\n}\n\n::selection {\n background: #2D3363;\n color: #FAEECF\n}\n\n.text {\n position: absolute;\n bottom: 20px;\n left: 25px;\n color: black;\n font-family: Arial,sans-serif;\n text-transform: uppercase;\n font-size: 14px;\n line-height: 28px;\n font-weight: bold;\n letter-spacing: 2px;\n z-index: 99\n}\n\na {\n color: #6172BA;\n text-decoration: none;\n cursor: pointer\n}\n\na:hover {\n text-decoration: underline\n}\n\n.vader {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-block;\n -webkit-transform: translate(-50%,-50%);\n transform: translate(-50%,-50%)\n}\n\n.vader .head {\n position: relative;\n width: 100px;\n height: 100px;\n margin-bottom: -10px;\n z-index: 1\n}\n\n.vader .helmet {\n position: absolute;\n top: 0;\n left: 5px;\n width: 90px;\n height: 80px;\n background: #222222;\n border-radius: 80px 80px 0 0\n}\n\n.vader .helmet::before {\n content: '';\n display: inline-block;\n position: absolute;\n top: 0;\n left: 50%;\n width: 50px;\n height: 8px;\n margin-left: -25px;\n background: #040507;\n border-radius: 25px 25px 0 0 / 8px 8px 0 0\n}\n\n.vader .helmet::after {\n content: '';\n display: inline-block;\n position: absolute;\n top: 8px;\n left: 50%;\n margin-left: -25px;\n height: 0;\n width: 0;\n border-left: 25px solid transparent;\n border-right: 25px solid transparent;\n border-top: 24px solid #040507\n}\n\n.vader .helmet span {\n position: absolute;\n top: 50%;\n width: 35px;\n height: 55px;\n background: #040507\n}\n\n.vader .helmet .left {\n left: -6px;\n -webkit-transform: rotate(25deg);\n transform: rotate(25deg)\n}\n\n.vader .helmet .right {\n right: -6px;\n -webkit-transform: rotate(-25deg);\n transform: rotate(-25deg)\n}\n\n.vader .helmet span::before {\n content: '';\n position: absolute;\n top: -5px;\n width: 8px;\n height: 55px;\n background: #222222\n}\n\n.vader .helmet .left::before {\n left: 0\n}\n\n.vader .helmet .right::before {\n right: 0\n}\n\n.vader .line {\n position: absolute;\n top: -3px;\n left: 50%;\n width: 6px;\n height: 38px;\n margin-left: -3px;\n background: #343434\n}\n\n.vader .line::before {\n content: '';\n display: inline-block;\n position: absolute;\n left: -4px;\n bottom: 0;\n width: 4px;\n height: 12px;\n background: #040507\n}\n\n.vader .line::after {\n content: '';\n display: inline-block;\n position: absolute;\n right: -4px;\n bottom: 0;\n width: 4px;\n height: 12px;\n background: #040507\n}\n\n.vader .mask {\n position: absolute;\n bottom: 19px;\n left: 50%\n}\n\n.vader .mask span {\n position: absolute;\n top: 0;\n width: 4px;\n height: 4px;\n border-radius: 1px;\n background: #C6C6C6\n}\n\n.vader .mask .top {\n left: 50%;\n margin-top: -16px;\n margin-left: -2px\n}\n\n.vader .mask .top::before {\n content: '';\n display: inline-block;\n position: absolute;\n left: -7px;\n top: -2px;\n width: 4px;\n height: 24px;\n background: #040507;\n border-radius: 4px;\n -webkit-transform: rotate(40deg);\n transform: rotate(40deg)\n}\n\n.vader .mask .top::after {\n content: '';\n display: inline-block;\n position: absolute;\n right: -7px;\n top: -2px;\n width: 4px;\n height: 24px;\n background: #040507;\n border-radius: 4px;\n -webkit-transform: rotate(-40deg);\n transform: rotate(-40deg)\n}\n\n.vader .mask .left {\n left: 12px\n}\n\n.vader .mask .center {\n left: 50%;\n margin-top: -16px;\n margin-left: -2px\n}\n\n.vader .mask .right {\n right: 12px\n}\n\n.vader .grill {\n position: absolute;\n bottom: 20px;\n left: 50%;\n width: 20px;\n margin-left: -10px\n}\n\n.vader .grill span {\n position: absolute;\n bottom: -5px;\n width: 2px;\n margin-left: -1px;\n background: #C6C6C6\n}\n\n.vader .grill .left {\n left: 4px;\n height: 10px\n}\n\n.vader .grill .center {\n left: 50%;\n height: 17px\n}\n\n.vader .grill .right {\n right: 2px;\n height: 10px\n}\n\n.vader .eyes {\n position: absolute;\n top: 35px;\n left: 10px;\n width: 80px;\n height: 40px;\n border-radius: 40px;\n background: #343434\n}\n\n.vader .eyes::before {\n content: '';\n display: inline-block;\n position: absolute;\n top: 33px;\n left: 5px;\n height: 0;\n width: 0;\n border-left: 35px solid transparent;\n border-right: 35px solid transparent;\n border-top: 30px solid #343434\n}\n\n.vader .eyes span {\n position: absolute;\n top: 5px;\n width: 30px;\n height: 30px;\n border-radius: 30px;\n background: #010000;\n -webkit-transition: background .3s ease-in-out;\n transition: background .3s ease-in-out\n}\n\n.vader .eyes .left {\n left: 7px\n}\n\n.vader .eyes .right {\n right: 7px\n}\n\n.vader .torso {\n position: relative;\n width: 60px;\n height: 80px;\n border-radius: 50px 50px 0 0;\n margin: 0 auto;\n background: #222222\n}\n\n.vader .torso::before {\n content: '';\n display: inline-block;\n position: absolute;\n left: -20px;\n top: -15px;\n width: 100px;\n height: 115px;\n border-radius: 50px 50px 0 0;\n margin: 0 auto;\n background: #040507;\n z-index: -1\n}\n\n.vader .belt {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 10px;\n background: #040507\n}\n\n.vader .belt span::before {\n content: '';\n position: absolute;\n top: 0;\n left: 50%;\n width: 20px;\n height: 10px;\n border-radius: 10px;\n margin-left: -10px;\n background: #C6C6C6\n}\n\n.vader .neck {\n position: absolute;\n left: 6px;\n top: 3px;\n width: 48px;\n height: 8px;\n background: #010000;\n z-index: 5\n}\n\n.vader .neck::before {\n content: '';\n position: absolute;\n top: -8px;\n left: 8px;\n width: 32px;\n height: 10px;\n background: #222222;\n border-radius: 0 0 4px 4px\n}\n\n.vader .neck::after {\n content: '';\n position: absolute;\n top: -8px;\n left: 8px;\n width: 32px;\n height: 1px;\n background: #666666\n}\n\n.vader .neck span {\n position: absolute;\n top: 0;\n width: 6px;\n height: 125%;\n margin-left: -3px;\n background: #434343\n}\n\n.vader .neck .left {\n left: 6px;\n -webkit-transform: rotate(30deg);\n transform: rotate(30deg);\n border-radius: 5px 0 0 0\n}\n\n.vader .neck .center {\n left: 50%;\n top: 2px\n}\n\n.vader .neck .right {\n right: 3px;\n -webkit-transform: rotate(-30deg);\n transform: rotate(-30deg);\n border-radius: 0 5px 0 0\n}\n\n.vader .neck .bottom {\n position: absolute;\n top: 8px;\n left: 4px;\n width: 46px;\n height: 5px;\n background: #222222\n}\n\n.vader .plate {\n position: absolute;\n left: 15px;\n top: 25px;\n width: 30px;\n height: 32px;\n background: #343434\n}\n\n.vader .plate .red_top {\n position: absolute;\n left: 2px;\n top: 2px;\n width: 12px;\n height: 18px;\n background: #d81f27\n}\n\n.vader .plate .red_top::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 5px;\n background: rgba(0,0,0,0.2)\n}\n\n.vader .plate .red_top::after {\n content: '';\n position: absolute;\n bottom: 5px;\n left: 0;\n width: 100%;\n height: 2px;\n background: #343434\n}\n\n.vader .plate .red_center {\n position: absolute;\n right: 2px;\n top: 12px;\n width: 12px;\n height: 8px;\n background: #d81f27\n}\n\n.vader .plate .red_center::before {\n content: '';\n position: absolute;\n left: 0;\n top: 4px;\n width: 100%;\n height: 4px;\n background: rgba(0,0,0,0.2)\n}\n\n.vader .plate .red_center::after {\n content: '';\n position: absolute;\n left: 5px;\n top: 0;\n width: 2px;\n height: 100%;\n background: #343434\n}\n\n.vader .plate .red_bottom {\n position: absolute;\n right: 2px;\n bottom: 2px;\n width: 4px;\n height: 8px;\n background: #d81f27\n}\n\n.vader .plate .blue {\n position: absolute;\n right: 2px;\n top: 2px;\n width: 12px;\n height: 8px;\n background: #455caa\n}\n\n.vader .plate .blue::before {\n content: '';\n position: absolute;\n top: 3px;\n left: 0;\n width: 100%;\n height: 2px;\n background: #343434\n}\n\n.vader .plate .gray {\n position: absolute;\n left: 2px;\n bottom: 2px;\n width: 20px;\n height: 8px;\n background: #9f9fa1\n}\n\n.vader .plate .gray::before {\n content: '';\n position: absolute;\n left: 5px;\n top: 0;\n width: 2px;\n height: 100%;\n background: #343434\n}\n\n.vader .plate .gray::after {\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n width: 8px;\n height: 100%;\n background: rgba(0,0,0,0.2)\n}\n\n.vader .legs {\n position: relative;\n width: 50px;\n height: 20px;\n margin: 0 auto;\n background: #222222\n}\n\n.vader .legs::before {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n width: 20px;\n height: 100%;\n margin-left: -10px;\n background: #040507\n}\n\n.vader .boots {\n position: absolute;\n bottom: 0;\n left: 50%\n}\n\n.vader .boots span {\n content: '';\n display: inline-block;\n position: absolute;\n top: 0;\n width: 30px;\n height: 10px;\n background: #040507\n}\n\n.vader .boots .left {\n left: 10px;\n border-radius: 0 15px 0 0\n}\n\n.vader .boots .right {\n right: 10px;\n border-radius: 15px 0 0 0\n}\n\n.vader .hand {\n position: absolute;\n top: 60%;\n z-index: 2\n}\n\n.vader .hand.left {\n left: -2px;\n top: 82%\n}\n\n.vader .hand.right {\n right: -20px\n}\n\n.vader .hand .hand {\n position: absolute;\n top: 0;\n width: 11px;\n height: 22px;\n margin-top: -12px;\n margin-left: -12px;\n background: #040507\n}\n\n.vader .hand.left .hand {\n left: 0;\n border-radius: 22px 0 0 22px\n}\n\n.vader .hand.right .hand {\n right: 0;\n width: 22px;\n border-radius: 22px\n}\n\n.vader .sword {\n position: absolute;\n top: 50%;\n left: -20px;\n z-index: 10\n}\n\n.vader .sword .handle {\n position: absolute;\n top: 0;\n left: 0;\n width: 6px;\n height: 30px;\n margin-left: -3px;\n background: #343434\n}\n\n.vader .sword .handle::before {\n content: '';\n position: absolute;\n left: 0;\n top: 5px;\n width: 100%;\n height: 5px;\n background: #888888\n}\n\n.vader .sword .handle::after {\n content: '';\n position: absolute;\n right: 4px;\n top: 5px;\n width: 4px;\n height: 5px;\n background: #343434\n}\n\n.vader .sword .light {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 20px;\n height: 120px;\n margin-left: -10px;\n background: rgba(248,80,50,0);\n background: -moz-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n background: -webkit-gradient(left top, right top, color-stop(10%, rgba(248,80,50,0)), color-stop(20%, rgba(247,67,37,0)), color-stop(40%, rgba(246,41,12,0.67)), color-stop(50%, rgba(255,176,166,1)), color-stop(60%, rgba(246,41,12,0.67)), color-stop(80%, rgba(236,51,30,0)), color-stop(90%, rgba(231,56,39,0)));\n background: -webkit-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n background: -o-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n background: -ms-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n background: linear-gradient(to right, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n}\n\n.vader .sword .light::before {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n width: 3px;\n height: 120px;\n margin-left: -1px;\n background: rgba(248,80,50,1);\n z-index: -1\n}\n\n.vader .shadow {\n position: absolute;\n bottom: -17px;\n left: -25px;\n display: block;\n width: 150px;\n height: 14px;\n background: rgba(0,0,0,0.15);\n border-radius: 50%\n}\n\n.animation-right {\n -webkit-animation: animationHandRight 1.5s linear infinite;\n animation: animationHandRight 1.5s linear infinite\n}\n\n@-webkit-keyframes animationHandRight {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg)\n }\n\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg)\n }\n}\n\n@keyframes animationHandRight {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg)\n }\n\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg)\n }\n}\n\n.animation-left {\n -webkit-animation: animationHandLeft 3s ease-in-out infinite;\n animation: animationHandLeft 3s ease-in-out infinite\n}\n\n@-webkit-keyframes animationHandLeft {\n 0%, 100% {\n -webkit-transform: translateX(0) rotate(-25deg);\n transform: translateX(0) rotate(-25deg)\n }\n\n 50% {\n -webkit-transform: translateX(150px) rotate(25deg);\n transform: translateX(150px) rotate(25deg)\n }\n}\n\n@keyframes animationHandLeft {\n 0%, 100% {\n -webkit-transform: translateX(0) rotate(-25deg);\n transform: translateX(0) rotate(-25deg)\n }\n\n 50% {\n -webkit-transform: translateX(150px) rotate(25deg);\n transform: translateX(150px) rotate(25deg)\n }\n}\n\n.vader:hover .eyes .left {\n background: #d81f27\n}\n\n.vader:hover .eyes .right {\n background: #455caa\n}"}

happy-dog-58

👁 实时预览

📝 源代码