1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
| .waifu, .waifu * {transition:all .3s ease-in-out;-webkit-transform:translateY(3px);transform:translateY(3px);} .waifu {position:fixed;bottom:0;right:40px;z-index:1;font-size:0;} .waifu:hover {-webkit-transform:translateY(0);transform:translateY(0);} .waifu-tool{opacity:0;top:150px;right:0;position:absolute} .waifu-tool *{display:block;color:#aaa;font-size:16px;margin:5px 0} .waifu:hover .waifu-tool{opacity:1;} @media (max-width:768px) {.waifu {display:none;}} .waifu-tips {opacity:0;width:200px;height:70px;padding:5px 10px;border:1px solid rgba(224, 186, 140, 0.62);border-radius:12px;background-color:rgba(236, 217, 188, 0.5);box-shadow:0 3px 15px 2px rgba(191, 158, 118, 0.2);font-size:12px;text-overflow:ellipsis;overflow:hidden;position:absolute;animation-delay:5s;animation-duration:50s;animation-iteration-count:infinite;animation-name:shake;animation-timing-function:ease-in-out;text-align:center;} .waifu #live2d{position:relative;} @keyframes shake {2% {transform:translate(0.5px, -1.5px) rotate(-0.5deg);} 4% {transform:translate(0.5px, 1.5px) rotate(1.5deg);} 6% {transform:translate(1.5px, 1.5px) rotate(1.5deg);} 8% {transform:translate(2.5px, 1.5px) rotate(0.5deg);} 10% {transform:translate(0.5px, 2.5px) rotate(0.5deg);} 12% {transform:translate(1.5px, 1.5px) rotate(0.5deg);} 14% {transform:translate(0.5px, 0.5px) rotate(0.5deg);} 16% {transform:translate(-1.5px, -0.5px) rotate(1.5deg);} 18% {transform:translate(0.5px, 0.5px) rotate(1.5deg);} 20% {transform:translate(2.5px, 2.5px) rotate(1.5deg);} 22% {transform:translate(0.5px, -1.5px) rotate(1.5deg);} 24% {transform:translate(-1.5px, 1.5px) rotate(-0.5deg);} 26% {transform:translate(1.5px, 0.5px) rotate(1.5deg);} 28% {transform:translate(-0.5px, -0.5px) rotate(-0.5deg);} 30% {transform:translate(1.5px, -0.5px) rotate(-0.5deg);} 32% {transform:translate(2.5px, -1.5px) rotate(1.5deg);} 34% {transform:translate(2.5px, 2.5px) rotate(-0.5deg);} 36% {transform:translate(0.5px, -1.5px) rotate(0.5deg);} 38% {transform:translate(2.5px, -0.5px) rotate(-0.5deg);} 40% {transform:translate(-0.5px, 2.5px) rotate(0.5deg);} 42% {transform:translate(-1.5px, 2.5px) rotate(0.5deg);} 44% {transform:translate(-1.5px, 1.5px) rotate(0.5deg);} 46% {transform:translate(1.5px, -0.5px) rotate(-0.5deg);} 48% {transform:translate(2.5px, -0.5px) rotate(0.5deg);} 50% {transform:translate(-1.5px, 1.5px) rotate(0.5deg);} 52% {transform:translate(-0.5px, 1.5px) rotate(0.5deg);} 54% {transform:translate(-1.5px, 1.5px) rotate(0.5deg);} 56% {transform:translate(0.5px, 2.5px) rotate(1.5deg);} 58% {transform:translate(2.5px, 2.5px) rotate(0.5deg);} 60% {transform:translate(2.5px, -1.5px) rotate(1.5deg);} 62% {transform:translate(-1.5px, 0.5px) rotate(1.5deg);} 64% {transform:translate(-1.5px, 1.5px) rotate(1.5deg);} 66% {transform:translate(0.5px, 2.5px) rotate(1.5deg);} 68% {transform:translate(2.5px, -1.5px) rotate(1.5deg);} 70% {transform:translate(2.5px, 2.5px) rotate(0.5deg);} 72% {transform:translate(-0.5px, -1.5px) rotate(1.5deg);} 74% {transform:translate(-1.5px, 2.5px) rotate(1.5deg);} 76% {transform:translate(-1.5px, 2.5px) rotate(1.5deg);} 78% {transform:translate(-1.5px, 2.5px) rotate(0.5deg);} 80% {transform:translate(-1.5px, 0.5px) rotate(-0.5deg);} 82% {transform:translate(-1.5px, 0.5px) rotate(-0.5deg);} 84% {transform:translate(-0.5px, 0.5px) rotate(1.5deg);} 86% {transform:translate(2.5px, 1.5px) rotate(0.5deg);} 88% {transform:translate(-1.5px, 0.5px) rotate(1.5deg);} 90% {transform:translate(-1.5px, -0.5px) rotate(-0.5deg);} 92% {transform:translate(-1.5px, -1.5px) rotate(1.5deg);} 94% {transform:translate(0.5px, 0.5px) rotate(-0.5deg);} 96% {transform:translate(2.5px, -0.5px) rotate(-0.5deg);} 98% {transform:translate(-1.5px, -1.5px) rotate(-0.5deg);} 0%, 100% {transform:translate(0, 0) rotate(0);} }
|