纯css实现小小黑客卡通人物布局效果
代码语言：html
所属分类：布局界面
代码描述：纯css实现小小黑客卡通人物布局效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html,
body {
width: 100%;
height: 100%;
background-color: black;
animation: turnOnTheLights 4s forwards;
}
.container {
width: 450px;
height: 450px;
position: absolute;
transform: translate(-50%, -50%) scale(0.7);
left: 50%;
top: 50%;
}
.sombra {
height: 100%;
width: 300px;
opacity: 0;
animation: hereIAm 4s forwards;
}
.sombra > * {
position: absolute;
display: inline-block;
}
.sombra > *:before, .sombra > *:after {
content: "";
position: absolute;
}
@keyframes hereIAm {
20% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes turnOnTheLights {
20% {
background-color: black;
}
100% {
background-color: #483c4e;
}
}
.shave {
width: 210px;
height: 220px;
background-color: #614b31;
border-radius: 100%;
left: calc(50% - 90px);
top: calc(16% + 0px);
transform: rotate(45deg);
overflow: hidden;
will-change: transform;
animation: headBounce 2s ease infinite;
}
.shave .led {
position: absolute;
width: 20px;
height: 70px;
background-color: #f76aff;
background-color: #f76aff;
background-image: -webkit-linear-gradient(to top, #b4b4b4 30%, #f76aff 30%);
background-image: linear-gradient(to top, #b4b4b4 30%, #f76aff 30%);
transform: scaleX(-1);
}
.shave .top-led {
left: 110px;
}
.shave .top-led:before {
position: absolute;
content: "";
width: 6px;
height: 100px;
border-radius: 100%;
background-color: #ffbe85;
transform: translateX(18px) translateY(-10px);
}
.shave .bottom-led {
height: 90px;
width: 15px;
left: 160px;
transform: rotate(20deg);
}
.shave .bottom-led:before {
position: absolute;
content: "";
width: 5px;
height: 15px;
background-color: #ffbe85;
top: 72px;
left: 20px;
}
.shave .bottom-led:after {
position: absolute;
content: "";
width: 12px;
height: 50px;
top: 20px;
left: 20px;
border: 5px solid #ffbe85;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
}
.shave .shave-decal {
position: absolute;
width: 8px;
height: 55px;
background-color: #ffbe85;
left: 144px;
transform: rotate(10deg);
}
.shave .shave-decal:after {
position: absolute;
content: "";
width: 6px;
height: 6px;
border-radius: 100%;
border: 5px solid #ffbe85;
top: 52px;
left: -5px;
}
.hair-mid {
width: 100px;
height: 90px;
background-color: #312717;
left: calc(50% - 50px);
top: calc(10% - 10px);
transform: rotate(-45deg);
border-radius: 29% 71% 94% 6% / 100% 35% 65% 0%;
border: 2px solid #20190f;
will-change: transform;
animation: hairMidBounce 2s ease infinite;
}
.hair-mid:before, .hair-mid:after {
content: "";
position: absolute;
background-color: #c5ab82;
opacity: 0.7;
}
.hair-mid:before {
left: 55px;
top: 70px;
width: 5px;
height: 5px;
border-radius: 100%;
}
.hair-mid:after {
left: 65px;
top: 60px;
width: 7px;
height: 7px;
border-radius: 100%;
}
.hair-back {
width: 90px;
height: 80px;
background-color: #312717;
left: 50%;
top: 40px;
transform: rotate(-25deg);
border-radius: 29% 71% 94% 6% / 100% 21% 79% 0%;
border-radius: 29% 71% 94% 6% / 100% 35% 65% 0%;
border: 2px solid #20190f;
transform: rotate(-25deg);
will-change: transform;
background-image: radial-gradient(3px 3px at 85% 50%, rgba(197, 171, 130, 0.5) 99%, transparent);
animation: hairBackBounce 2s ease infinite;
}
.hair-back:after {
position: absolute;
content: "";
width: 80px;
height: 80px;
border-radius: 100%;
background-color: #a350f9;
background-image: -webkit-linear-gradient(-45deg, #a350f9, #d7b3fc, #f1e4fe);
background-image: linear-gradient(-45deg, #a350f9, #d7b3fc, #f1e4fe);
top: 170px;
right: 200px;
}
.hair {
width: 115px;
height: 260px;
background-color: #312717;
border-radius: 30% 45% / 60% 50%;
border-left: 2px solid #20190f;
border-top: 3px solid #20190f;
transform-origin: center;
transform: rotate(20deg);
left: 90px;
top: 50px;
will-change: transform;
background-color: #312717;
background-image: -webkit-linear-gradient(to bottom, #312717 40%, 65%, #a350f9, #d7b3fc);
background-image: linear-gradient(to bottom, #312717 40%, 65%, #a350f9, #d7b3fc);
animation: hairBounce 2s ease infinite;
}
.hair > .shine {
position: absolute;
width: 15px;
height: 30px;
left: 20px;
top: 50px;
border-radius: 100%;
opacity: 0.5;
background-color: #c5ab82;
}
.hair > .shine:before {
position: absolute;
content: "";
width: 10px;
height: 10px;
border-radius: 100%;
background-color: #c5ab82;
left: 20px;
}
.hair > .shine:after {
position: absolute;
content: "";
width: 5px;
height: 5px;
border-radius: 100%;
background-color: #c5ab82;
left: 70px;
top: -15px;
}
.curl {
width: 100px;
height: 100px;
border-radius: 100%;
background-color: #a350f9;
background-image: -webkit-linear-gradient(to bottom, #a350f9, #d7b3fc, #f1e4fe);
background-image: linear-gradient(to bottom, #a350f9, #d7b3fc, #f1e4fe);
top: calc(60% + 0px);
left: calc(12% + 0px);
animation: bodyBounce 2s ease infinite;
}
.curl:before {
position: absolute;
content: "";
width: 70px;
height: 70px;
background-color: black;
animation: turnOnTheLights 4s forwards;
border-radius: 100%;
right: 50px;
top: -5px;
}
.head {
width: 155px;
height: 150px;
top: calc(38% + 1px);
left: calc(50% - 90px);
z-index: 2;
will-change: transform;
animation: faceBounce 2s ease infinite;
}
.head:before {
content: "";
position: absolute;
border-bottom: 20px solid #ffbe85;
border-left: 40px solid transparent;
border-right: 32px solid transparent;
top: -20px;
left: 0.4em;
}
.head:after {
content: "";
position: absolute;
border-bottom: 20px solid #ffbe85;
border-left: 50px solid transparent;
border-right: 30px solid transparent;
top: -20px;
left: 4em;
}
.head .forehead {
position: relative;
width: 100%;
height: 50%;
background-color: #ffbe85;
transform: skew(-10deg);
clip-path: polygon(74% 0, 100% 34%, 100% 100%, 0 100%, 0 0);
}
.head .upper-lip {
position: relative;
width: 100%;
height: 18%;
background-color: #ffbe85;
transform: skew(20deg);
left: -2px;
}
.head .lower-lip {
position: relative;
width: 95%;
height: 10%;
background-color: #ffbe85;
transform: skew(-30deg);
border-bottom-left-radius: 3px;
left: -2px;
}
.head .chin-roof {
position: relative;
width: 100%;
height: 12%;
background-color: #ffbe85;
transform: skew(30deg);
border-radius: 10px;
left: -4px;
top: -2px;
}
.head .chin {
position: relative;
width: 0;
height: 0;
border-top: 30px solid #ffbe85;
border-left: 70px solid transparent;
border-right: 90px solid transparent;
left: 0.1em;
top: -5px;
}
.head .chin:before {
position: absolute;
content: "";
width: 30px;
height: 30px;
background-color: #ffbe85;
border-radius: 100%;
bottom: 30px;
left: 50px;
}
.head .face {
position: absolute;
width: 150px;
height: 150px;
top: 0;
transform: rotate(5deg);
}
.head .face .brows {
position: absolute;
width: 80%;
height: 20%;
left: 10px;
top: 15px;
}
.head .face .brows:before {
position: absolute;
content: "";
width: 20px;
height: 10px;
border-top: 5px solid #312717;
border-radius: 100%;
left: 10px;
clip-path: polygon(0 0, 39% 0, 39% 100%, 0 100%);
top: 11px;
left: 6px;
}
.head .face .brows:after {
position: absolute;
content: "";
width: 25px;
height: 10px;
border-top: 6px solid #312717;
border-radius: 100%;
left: 102px;
clip-path: polygon(100% 0, 40% 0, 40% 100%, 100% 100%);
top: 18px;
}
.head .face .brows .left-brow {
position: absolute;
width: 40px;
height: 10px;
top: 12px;
transform: rotate(15deg);
border-top: 5px solid #312717;
border-radius: 100%;
clip-path: polygon(100% 0, 39% 0, 39% 100%, 100% 100%);
}
.head .face .brows .right-brow {
position: absolute;
width: 48px;
height: 10px;
top: 20px;
border-top: 6px solid #312717;
left: 79px;
border-radius: 100%;
transform: rotate(-20deg);
clip-path: polygon(0 0, 65% 0, 65% 100%, 0 100%);
}
.head .face .eyes {
position: relative;
width: 55%;
height: 45%;
left: 30px;
top: 35%;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.head .face .eyes:before, .head .face .eyes:after {
content: "";
height: 70%;
width: 18px;
background-color: #a350f9;
background-image: -webkit-linear-gradient(to bottom, #891ff7, #a350f9, #f76aff);
background-image: linear-gradient(to bottom, #891ff7, #a350f9, #f76aff);
border-radius: 52% 48% 50% 50% / 55% 60% 40% 45%;
animation: blink 3s infinite;
}
.head .face .eyes .lashes {
position: absolute;
width: 100%;
height: 13px;
display: flex;
top: -8px;
left: 3px;
justify-content: space-between;
}
.head .face .eyes .lashes:before, .head .face .eyes .lashes:after {
content: "";
position: absolute;
width: 10px;
height: 12px;
border-radius: 100%;
transform: rotate(-30deg);
box-shadow: -4px 1px #a350f9;
}
.head .face .eyes .lashes:after {
left: 80%;
}
.head .face .smile {
position: absolute;
width: 30px;
height: 30px;
border-radius: 100%;
box-shadow: 3px 8px white, 4px 9px #312717;
left: 70px;
top: 93px;
}
.head .face .smile:after {
position: absolute;
content: "";
width: 5px;
height: 5px;
background-color: #30353b;
border-radius: 100%;
left: 50px;
}
.ear {
position: relative;
width: 65px;
height: 80px;
background-color: #ffbe85;
border-radius: 74% 26% 80% 20% / 82% 21% 79% 18%;
bottom: 110px;
left: 92%;
transform: rotate(-10deg);
background-image: radial-gradient(10px 10px at 30% 80%, #30353b 99%, transparent), radial-gradient(10px 10px at 40% 70%, #ffbe85 99%, transparent), radial-gradient(10px 10px at 45% 70%, #ff9539 99%, transparent);
}
.ear:before {
position: absolute;
content: "";
width: 25px;
height: 40px;
left: 20px;
top: 15px;
transform: rotate(40deg);
border-radius: 100%;
border-left: 2px solid #ff9539;
border-top: 2px solid #ff9539;
}
.ear:after {
position: absolute;
content: "";
width: 80px;
height: 115px;
border-radius: 100%;
background-color: #ffbe85;
top: -83.5px;
right: 32px;
}
.legs {
width: 80px;
height: 130px;
position: absolute;
left: 155px;
top: 455px;
display: flex;
justify-content: space-between;
}
.legs:after {
position: absolute;
content: "";
width: 250px;
height: 50px;
background-image: radial-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
bottom: -40px;
border-radius: 100%;
left: -70px;
z-index: -1;
}
.legs .leg {
width: 26px;
height: 100%;
background-color: #a350f9;
background-image: -webkit-linear-gradient(to top, #00dbde, #a350f9 50%, #4c2377, black);
background-image: linear-gradient(to top, #00dbde, #a350f9 50%, #4c2377, black);
border-radius: 46% 54% 54% 46% / 24% 26% 74% 76%;
}
.legs .leg .leg-decal {
position: absolute;
width: 26px;
height: 50px;
top: 30px;
background-image: linear-gradient(220deg, #30353b 50%, transparent 50% 60%, #30353b 60% 70%, transparent 70%);
}
.legs .right-leg {
transform: rotate(-6deg);
}
.legs .right-leg > .leg-decal {
transform: scaleX(-1);
}
.legs .foot {
position: relative;
background-color: #00dbde;
}
.legs .left-foot {
top: 95%;
width: 30px;
height: 15px;
left: -10px;
transform: rotate(-30deg);
border-radius: 20% 40% / 30% 50%;
}
.legs .right-foot {
top: 92%;
width: 25px;
height: 25px;
left: 2px;
transform: rotate(30deg);
border-radius: 30% 50% 40% / 10% 70% 25%;
}
.sombra-body {
width: 50%;
height: 300px;
top: 305px;
left: 25%;
}
.sombra-body:not(.legs) {
animation: bodyBounce 2s ease infinite;
}
.sombra-body > * {
position: absolute;
}
.sombra-body > *:before, .sombra-body > *:after {
position: absolute;
content: "";
}
.sombra-body .dress {
width: 35%;
height: 80px;
background-color: #3870ab;
background-color: #3870ab;
background-image: -webkit-linear-gradient(to right, #3870ab 35%, #a350f9 35% 50%, #3870ab 50% 55%, #a350f9 55% 70%, #3870ab 70%);
background-image: linear-gradient(to right, #3870ab 35%, #a350f9 35% 50%, #3870ab 50% 55%, #a350f9 55% 70%, #3870ab 70%);
left: 19%;
top: 100px;
transform: rotate(2deg);
border-bottom-left-radius: 35%;
border-bottom-right-radius: 35%;
}
.sombra-body .dress .pleat {
position: absolute;
width: 55px;
height: 55px;
background-color: #3870ab;
border: 5px solid #2b5785;
top: 30px;
left: -15px;
transform: rotate(-45deg);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
background-image: linear-gradient(260deg, silver 20% 40%, #3870ab 40%);
}
.sombra-body .dress .right {
transform: scaleX(-1) rotate(-45deg);
left: 30px;
}
.sombra-body .jacket-left {
position: absolute;
content: "";
width: 45px;
height: 150px;
background-color: #322538;
background-color: #322538;
background-image: -webkit-linear-gradient(-90deg, #322538 75%, #652f9e 75% 90%, #322538 90%);
background-image: linear-gradient(-90deg, #322538 75%, #652f9e 75% 90%, #322538 90%);
border-bottom-left-radius: 20%;
border-bottom-right-radius: 20% 60%;
transform: rotate(-25deg) skewX(10deg) skewY(-40deg);
top: 45px;
left: 100px;
}
.sombra-body .jacket-left:after {
position: absolute;
content: "";
width: 35px;
height: 50px;
background-image: linear-gradient(to bottom, #322538, #322538 8%, #652f9e 8% 22%, #322538 22%, transparent 22%);
transform: rotate(20deg) scaleX(-1);
left: 2px;
top: 30px;
}
.sombra-body .belt {
position: absolute;
width: 70px;
height: 10px;
background-color: black;
transform: rotate(70deg);
top: 55px;
z-index: 2;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.sombra-body .belt .translocator {
height: 30%;
width: 10%;
background-color: #30353b;
border: 2px solid #f76aff;
border-radius: 100%;
}
.sombra-body .arms {
width: 55%;
height: 20px;
left: 30px;
top: 20px;
animation: armBounce 2s ease infinite;
}
.sombra-body .arms .arm-left {
position: absolute;
width: 20px;
height: 80px;
transform: rotate(45deg);
left: -15px;
top: -9px;
border-radius: 100px;
animation: rotateLeftArm 2s ease infinite;
background-color: #f76aff;
background-image: -webkit-linear-gradient(to bottom, #f76aff, #00dbde);
background-image: linear-gradient(to bottom, #f76aff, #00dbde);
}
.sombra-body .arms .arm-left:before {
position: absolute;
content: "";
width: 20px;
height: 20px;
background-color: #322538;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
}
.sombra-body .arms .arm-left:after {
position: absolute;
content: "";
width: 20px;
height: 10px;
background-color: black;
bottom: 0;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
}
.sombra-body .arms .arm-left .hand {
position: absolute;
width: 20px;
bottom: -3px;
z-index: 2;
left: -3px;
border-bottom: 20px solid #30353b;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
transform: rotate(100deg);
border-radius: 20px;
}
.sombra-body .arms .arm-left .hand > .thumb {
position: absolute;
width: 5px;
height: 15px;
background-color: #00dbde;
background-image: -webkit-linear-gradient(to bottom, #00b7ff 60%, #f437ff 60%);
background-image: linear-gradient(to bottom, #00b7ff 60%, #f437ff 60%);
border-radius: 100%;
left: -4px;
top: 3px;
transform: rotate(45deg);
border: 1px solid black;
animation: typeThumb 0.8s ease infinite;
}
.sombra-body .arms .arm-left .hand > .fingers {
position: absolute;
width: 20px;
height: 10px;
bottom: -25px;
display: flex;
justify-content: space-around;
}
.sombra-body .arms .arm-left .hand > .fingers .finger {
background-color: #00dbde;
background-image: -webkit-linear-gradient(to bottom, #00b7ff 60%, #f437ff 60%);
background-image: linear-gradient(to bottom, #00b7ff 60%, #f437ff 60%);
border-radius: 10px;
width: 4px;
border: 1px solid black;
}
.sombra-body .arms .arm-left .hand > .fingers .finger:nth-child(1) {
height: 15px;
transform: rotate(10deg);
animation: typeFinger 0.5s ease infinite;
}
.sombra-body .arms .arm-left .hand > .fingers .finger:nth-child(2) {
height: 17px;
animation: typeFinger3 0.8s 0.1s ease infinite;
}
.sombra-body .arms .arm-left .hand > .fingers .finger:nth-child(3) {
height: 18px;
animation: typeFinger2 0.3s 0.2s ease infinite;
}
.sombra-body .arms .arm-left .hand > .fingers .finger:nth-child(4) {
height: 15px;
transform: rotate(-6deg);
animation: typeFinger 1s ease infinite;
}
@keyframes typeFinger {
50% {
height: 5px;
}
90% {
height: 15px;
}
}
@keyframes typeFinger2 {
50% {
height: 10px;
}
90% {
height: 18px;
}
}
@keyframes typeFinger3 {
50% {
height: 12px;
}
80% {
height: 17px;
}
}
@keyframes typeThumb {
10% {
height: 12px;
}
40% {
height: 17px;
}
50% {
height: 12px;
}
}
.sombra-body .arms .arm-right {
position: absolute;
width: 20px;
height: 60px;
transform: rotate(-45deg);
right: -5px;
top: -5px;
border-radius: 100px;
animation: rotateRightArm 2s ease infinite;
background-color: #f76aff;
background-image: -webkit-linear-gradient(to bottom, #f76aff, #00dbde);
background-image: linear-gradient(to bottom, #f76aff, #00dbde);
}
.sombra-body .arms .arm-right:before {
position: absolute;
content: "";
width: 20px;
height: 20px;
background-color: #322538;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
}
.sombra-body .arms .arm-right .fore-arm {
position: absolute;
z-index: 2;
width: 16px;
height: 50px;
background-color: #00dbde;
left: 18px;
transform: rotate(90deg);
top: 30px;
border-radius: 10px;
}
.sombra-body .arms .arm-right .hand {
position: absolute;
width: 15px;
bottom: -2px;
z-index: 2;
left: 35px;
border-bottom: 15px solid #30353b;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
transform: rotate(-90deg) scaleX(-1);
border-radius: 20px;
}
.sombra-body .arms .arm-right .hand > .thumb {
position: absolute;
width: 3px;
height: 15px;
background-color: #00dbde;
background-image: -webkit-linear-gradient(to bottom, #00b7ff 60%, #f437ff 60%);
background-image: linear-gradient(to bottom, #00b7ff 60%, #f437ff 60%);
left: -4px;
top: 3px;
transform: rotate(30deg);
border: 1px solid black;
border-radius: 100px;
}
.sombra-body .arms .arm-right .hand > .fingers {
position: absolute;
width: 18px;
height: 10px;
bottom: -22px;
display: flex;
justify-content: space-around;
transform: rotate(-15deg);
}
.sombra-body .arms .arm-right .hand > .fingers .finger {
background-color: #00dbde;
background-image: -webkit-linear-gradient(to bottom, #00b7ff 60%, #f437ff 60%);
background-image: linear-gradient(to bottom, #00b7ff 60%, #f437ff 60%);
border-radius: 10px;
width: 2px;
border: 1px solid black;
}
.sombra-body .arms .arm-right .hand > .fingers .finger:nth-child(1) {
height: 15px;
transform: rotate(10deg);
animation: bendFinger 3s ease infinite;
}
.sombra-body .arms .arm-right .hand > .fingers .finger:nth-child(2) {
height: 17px;
animation: bendFinger 3s 0.2s ease infinite;
}
.sombra-body .arms .arm-right .hand > .fingers .finger:nth-child(3) {
height: 18px;
animation: bendFinger 3s 0.4s ease infinite;
}
.sombra-body .arms .arm-right .hand > .fingers .finger:nth-child(4) {
height: 15px;
transform: rotate(-6deg);
animation: bendFinger 3s 0.6s ease infinite;
}
@keyframes bendFinger {
30% {
height: 10px;
}
}
.sombra-body .jacket {
width: 60px;
border-top: 60px solid #322538;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
left: 18%;
top: 20px;
transform: skewX(-5deg);
}
.sombra-body .jacket .silver-accent {
position: absolute;
width: 5px;
height: 5px;
top: -10px;
background-color: silver;
}
.sombra-body .jacket .silver-accent:after {
position: absolute;
content: "";
width: 5px;
height: 5px;
background-color: silver;
z-index: 3;
left: 56px;
}
.sombra-body .jacket:before {
position: absolute;
content: "";
width: 45px;
height: 170px;
background-color: #322538;
background-color: #322538;
background-image: -webkit-linear-gradient(-90deg, #322538 75%, #652f9e 75% 92%, #322538 92%);
background-image: linear-gradient(-90deg, #322538 75%, #652f9e 75% 92%, #322538 92%);
border-bottom-left-radius: 20%;
border-bottom-right-radius: 20% 60%;
transform: rotate(30deg) skewX(-10deg) skewY(40deg) scaleX(-1);
top: -60px;
left: -21px;
}
.sombra-body .jacket:after {
position: absolute;
content: "";
width: 40px;
height: 50px;
background-image: linear-gradient(to bottom, #322538, #322538 8%, #652f9e 8% 22%, #322538 22%, transparent 22%);
transform: rotate(40deg);
left: -24px;
top: 5px;
}
.sombra-body .collar {
width: 100px;
height: 30px;
left: 60px;
top: 10px;
}
.sombra-body .collar .lining {
position: absolute;
width: 65px;
height: 70%;
left: -9px;
top: -7px;
background-color: #a350f9;
background-color: #a350f9;
background-image: -webkit-linear-gradient(to right, #a350f9, #f76aff);
background-image: linear-gradient(to right, #a350f9, #f76aff);
border-radius: 100%;
border: 2px solid #652f9e;
transform: rotate(-5deg);
}
.sombra-body .collar .lining:after {
position: absolute;
content: "";
width: 40px;
height: 20px;
background-color: #a350f9;
border-radius: 100%;
left: 12px;
top: 10px;
}
.sombra-body .collar .neck {
position: absolute;
width: 40px;
height: 30px;
background-color: #451869;
left: 23px;
top: -5px;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 8% 100%);
background-color: #451869;
background-image: -webkit-linear-gradient(to right, #451869 15%, #cecece 15% 30%, #451869 20%);
background-image: linear-gradient(to right, #451869 15%, #cecece 15% 30%, #451869 20%);
}
.sombra-body .collar .jacket-zip {
position: absolute;
width: 65px;
height: 18px;
background-color: #322538;
background-image: -webkit-linear-gradient(to bottom, #322538 70%, #a5a5a5 70%);
background-image: linear-gradient(to bottom, #322538 70%, #a5a5a5 70%);
transform: rotate(-30deg);
left: 25px;
top: 10px;
border-top: 4px solid #a5a5a5;
clip-path: polygon(0 0, 100% 0, 70% 85%, 13% 75%);
}
.sombra-body .collar .jacket-collar {
position: absolute;
width: 60px;
height: 38px;
background-color: #8f8f8f;
background-image: -webkit-linear-gradient(15deg, #8f8f8f 65%, #a5a5a5 65%);
background-image: linear-gradient(15deg, #8f8f8f 65%, #a5a5a5 65%);
clip-path: polygon(0 0, 74% 22%, 100% 48%, 38% 58%);
transform: rotate(15deg);
top: 12px;
left: -17px;
}
.sombra-body .collar .jacket-opening {
position: absolute;
width: 60px;
height: 25px;
background-color: #635868;
background-image: -webkit-linear-gradient(to right, #635868 80%, #c4c4c4 80%);
background-image: linear-gradient(to right, #635868 80%, #c4c4c4 80%);
border-top: 5px solid #8f8f8f;
left: 10px;
top: 31px;
transform: rotate(-20deg);
clip-path: polygon(0 0, 100% 0, 80% 100%, 50% 100%);
}
.screen {
font-family: monospace;
font-size: 0.5em;
color: white;
position: absolute;
background-color: #bd81fb;
opacity: 0.7;
border-radius: 10px;
border: 5px solid #dfbdff;
transform-origin: center;
box-shadow: 0 0 5px lavender;
}
.keurig {
position: absolute;
width: 120px;
height: 40px;
left: 350px;
padding: 10px;
bottom: 0;
transform: skew(-10deg);
animation: scaleRight 4s ease forwards;
}
.keurig > .wrapper {
transform: scaleX(-1);
}
.meter {
height: 10px;
position: relative;
background-color: #a350f9;
}
.meter > span {
display: block;
height: 100%;
width: 0;
background-color: lavender;
overflow: hidden;
animation: loadKeurigHack 4s 5s ease-out forwards;
}
.meter > span:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: linear-gradient(-45deg, rgba(163, 80, 249, 0.2) 25%, transparent 25%, transparent 50%, rgba(163, 80, 249, 0.2) 50%, rgba(163, 80, 249, 0.2) 75%, transparent 75%, transparent);
background-size: 25px 25px;
overflow: hidden;
animation: loading 2s linear infinite;
}
@keyframes loading {
0% {
background-position: 0 0;
}
100% {
background-position: 25px 25px;
}
}
@keyframes loadKeurigHack {
0% {
width: 0;
}
100% {
width: 95%;
}
}
.main-screen {
width: 170px;
height: 130px;
top: 300px;
left: -50px;
transform: skew(10deg);
animation: scaleLeft 2s ease forwards;
}
.main-screen #code {
padding: 1em;
width: 80%;
height: 80%;
overflow: hidden;
transform: scaleX(-1);
}
.main-screen #code::-webkit-scrollbar {
display: none;
}
.sub-screen {
width: 100px;
height: 100px;
top: 250px;
left: 350px;
transform: skew(-10deg);
z-index: 3;
display: grid;
place-content: center;
animation: scaleRight 2s ease forwards;
}
.sub-screen #skull {
width: 60px;
height: 60px;
animation: flicker 2s infinite;
}
.sub-screen #skull img {
width: 100%;
height: 100%;
}
.loading-screen {
width: 60px;
height: 60px;
transform: skew(10deg);
display: grid;
place-content: center;
animation: scaleLeft 2s ease forwards;
}
.hex-border {
width: 100px;
height: 100px;
transform: scale(0.4);
}
.hexagons {
position: relative;
border-radius: 100%;
left: 15px;
top: 10px;
}
.hexagon {
position: absolute;
width: 30px;
height: 13px;
background-color: lavender;
transform-origin: center;
}
.hexagon::before {
content: "";
position: absolute;
top: -7px;
left: 0;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 7.5px solid lavender;
}
.hexagon::after {
content: "";
position: absolute;
top: 13px;
left: 0;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 7.5px solid lavender;
}
.hexagon:nth-child(1) {
animation: animateHex 2s infinite;
}
.hexagon:nth-child(2) {
left: 33px;
animation: animateHex 2s 0.2s infinite;
}
.hexagon:nth-child(3) {
left: -13px;
top: 26px;
animation: animateHex 2s 1s infinite;
}
.hexagon:nth-child(4) {
left: 21px;
top: 26px;
animation: animateHex 2s 1.2s infinite;
}
.hexagon:nth-child(5) {
left: 55px;
top: 26px;
animation: animateHex 2s 0.4s infinite;
}
.hexagon:nth-child(6) {
top: 54px;
animation: animateHex 2s 0.8s infinite;
}
.hexagon:nth-child(7) {
left: 33px;
top: 54px;
animation: animateHex 2s 0.6s infinite;
}
@keyframes rotateSmall {
100% {
transform: rotate(1turn);
}
}
@keyframes rotateLarge {
0% {
clip-path: inset(0px 30px 30px 0px);
-webkit-clip-path: inset(0px 30px 30px 0px);
}
50% {
clip-path: inset(0px 150px 150px 0px);
-webkit-clip-path: inset(0px 150px 150px 0px);
}
100% {
transform: rotate(1turn);
clip-path: inset(0px 30px 30px 0px);
-webkit-clip-path: inset(0px 30px 30px 0px);
}
}
@keyframes animateHex {
0% {
transform: scale(0.8);
}
20%,
50% {
transform: scale(0.3);
opacity: 0;
}
65% {
transform: scale(0.8);
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0