diff --git a/waifu.css b/waifu.css index 56a60a4..8d54f72 100755 --- a/waifu.css +++ b/waifu.css @@ -1,235 +1,295 @@ #waifu-toggle { - position: fixed; - writing-mode: vertical-rl; - bottom: 66px; - left: 0px; background-color: #fa0; - color: #fff; border-radius: 5px; - padding: 5px 2px 5px 5px; - font-size: 12px; - width: 60px; + bottom: 66px; + color: #fff; cursor: pointer; -} -#waifu { + font-size: 12px; + left: 0; + padding: 5px 2px 5px 5px; position: fixed; + width: 60px; + writing-mode: vertical-rl; +} + +#waifu { bottom: -1000px; left: 0; - z-index: 1; line-height: 0; - transition: transform .3s ease-in-out; + position: fixed; transform: translateY(3px); + transition: transform .3s ease-in-out; + z-index: 1; } + #waifu:hover { transform: translateY(0); } + @media (max-width: 768px) { #waifu { display: none; } } + #waifu-tips { - opacity: 0; - width: 250px; - min-height: 70px; - margin: -30px 20px; - padding: 5px 10px; - border: 1px solid rgba(224, 186, 140, 0.62); + animation: shake 50s ease-in-out 5s infinite; + background-color: rgba(236, 217, 188, .5); + border: 1px solid rgba(224, 186, 140, .62); border-radius: 12px; - background-color: rgba(236, 217, 188, 0.5); - box-shadow: 0 3px 15px 2px rgba(191, 158, 118, 0.2); + box-shadow: 0 3px 15px 2px rgba(191, 158, 118, .2); font-size: 14px; line-height: 24px; - word-break: break-all; - text-overflow: ellipsis; + margin: -30px 20px; + min-height: 70px; + opacity: 0; overflow: hidden; + padding: 5px 10px; position: absolute; - animation: shake 50s ease-in-out 5s infinite; + text-overflow: ellipsis; + width: 250px; + word-break: break-all; } + #waifu #live2d { - position: relative; cursor: grab; cursor: -webkit-grab; cursor: -o-grab; cursor: -ms-grab; + position: relative; } + #waifu #live2d:active { cursor: grabbing; cursor: -webkit-grabbing; cursor: -o-grabbing; cursor: -ms-grabbing; } + #waifu-tool { color: #aaa; - top: 70px; - right: -10px; - position: absolute; opacity: 0; + position: absolute; + right: -10px; + top: 70px; transition: opacity 1s; } + #waifu:hover #waifu-tool { opacity: 1; } + #waifu-tool span { - display: block; + color: #5b6c7d; cursor: pointer; + display: block; line-height: 30px; text-align: center; - color: #5b6c7d; transition: color .3s; } + #waifu-tool span:hover { - color: #0684bd;/* #34495e */ + color: #0684bd; /* #34495e */ } + @keyframes shake { 2% { - transform: translate(0.5px, -1.5px) rotate(-0.5deg); + transform: translate(.5px, -1.5px) rotate(-.5deg); } + 4% { - transform: translate(0.5px, 1.5px) rotate(1.5deg); + transform: translate(.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); + transform: translate(2.5px, 1.5px) rotate(.5deg); } + 10% { - transform: translate(0.5px, 2.5px) rotate(0.5deg); + transform: translate(.5px, 2.5px) rotate(.5deg); } + 12% { - transform: translate(1.5px, 1.5px) rotate(0.5deg); + transform: translate(1.5px, 1.5px) rotate(.5deg); } + 14% { - transform: translate(0.5px, 0.5px) rotate(0.5deg); + transform: translate(.5px, .5px) rotate(.5deg); } + 16% { - transform: translate(-1.5px, -0.5px) rotate(1.5deg); + transform: translate(-1.5px, -.5px) rotate(1.5deg); } + 18% { - transform: translate(0.5px, 0.5px) rotate(1.5deg); + transform: translate(.5px, .5px) rotate(1.5deg); } + 20% { transform: translate(2.5px, 2.5px) rotate(1.5deg); } + 22% { - transform: translate(0.5px, -1.5px) rotate(1.5deg); + transform: translate(.5px, -1.5px) rotate(1.5deg); } + 24% { - transform: translate(-1.5px, 1.5px) rotate(-0.5deg); + transform: translate(-1.5px, 1.5px) rotate(-.5deg); } + 26% { - transform: translate(1.5px, 0.5px) rotate(1.5deg); + transform: translate(1.5px, .5px) rotate(1.5deg); } + 28% { - transform: translate(-0.5px, -0.5px) rotate(-0.5deg); + transform: translate(-.5px, -.5px) rotate(-.5deg); } + 30% { - transform: translate(1.5px, -0.5px) rotate(-0.5deg); + transform: translate(1.5px, -.5px) rotate(-.5deg); } + 32% { transform: translate(2.5px, -1.5px) rotate(1.5deg); } + 34% { - transform: translate(2.5px, 2.5px) rotate(-0.5deg); + transform: translate(2.5px, 2.5px) rotate(-.5deg); } + 36% { - transform: translate(0.5px, -1.5px) rotate(0.5deg); + transform: translate(.5px, -1.5px) rotate(.5deg); } + 38% { - transform: translate(2.5px, -0.5px) rotate(-0.5deg); + transform: translate(2.5px, -.5px) rotate(-.5deg); } + 40% { - transform: translate(-0.5px, 2.5px) rotate(0.5deg); + transform: translate(-.5px, 2.5px) rotate(.5deg); } + 42% { - transform: translate(-1.5px, 2.5px) rotate(0.5deg); + transform: translate(-1.5px, 2.5px) rotate(.5deg); } + 44% { - transform: translate(-1.5px, 1.5px) rotate(0.5deg); + transform: translate(-1.5px, 1.5px) rotate(.5deg); } + 46% { - transform: translate(1.5px, -0.5px) rotate(-0.5deg); + transform: translate(1.5px, -.5px) rotate(-.5deg); } + 48% { - transform: translate(2.5px, -0.5px) rotate(0.5deg); + transform: translate(2.5px, -.5px) rotate(.5deg); } + 50% { - transform: translate(-1.5px, 1.5px) rotate(0.5deg); + transform: translate(-1.5px, 1.5px) rotate(.5deg); } + 52% { - transform: translate(-0.5px, 1.5px) rotate(0.5deg); + transform: translate(-.5px, 1.5px) rotate(.5deg); } + 54% { - transform: translate(-1.5px, 1.5px) rotate(0.5deg); + transform: translate(-1.5px, 1.5px) rotate(.5deg); } + 56% { - transform: translate(0.5px, 2.5px) rotate(1.5deg); + transform: translate(.5px, 2.5px) rotate(1.5deg); } + 58% { - transform: translate(2.5px, 2.5px) rotate(0.5deg); + transform: translate(2.5px, 2.5px) rotate(.5deg); } + 60% { transform: translate(2.5px, -1.5px) rotate(1.5deg); } + 62% { - transform: translate(-1.5px, 0.5px) rotate(1.5deg); + transform: translate(-1.5px, .5px) rotate(1.5deg); } + 64% { transform: translate(-1.5px, 1.5px) rotate(1.5deg); } + 66% { - transform: translate(0.5px, 2.5px) rotate(1.5deg); + transform: translate(.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); + transform: translate(2.5px, 2.5px) rotate(.5deg); } + 72% { - transform: translate(-0.5px, -1.5px) rotate(1.5deg); + transform: translate(-.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); + transform: translate(-1.5px, 2.5px) rotate(.5deg); } + 80% { - transform: translate(-1.5px, 0.5px) rotate(-0.5deg); + transform: translate(-1.5px, .5px) rotate(-.5deg); } + 82% { - transform: translate(-1.5px, 0.5px) rotate(-0.5deg); + transform: translate(-1.5px, .5px) rotate(-.5deg); } + 84% { - transform: translate(-0.5px, 0.5px) rotate(1.5deg); + transform: translate(-.5px, .5px) rotate(1.5deg); } + 86% { - transform: translate(2.5px, 1.5px) rotate(0.5deg); + transform: translate(2.5px, 1.5px) rotate(.5deg); } + 88% { - transform: translate(-1.5px, 0.5px) rotate(1.5deg); + transform: translate(-1.5px, .5px) rotate(1.5deg); } + 90% { - transform: translate(-1.5px, -0.5px) rotate(-0.5deg); + transform: translate(-1.5px, -.5px) rotate(-.5deg); } + 92% { transform: translate(-1.5px, -1.5px) rotate(1.5deg); } + 94% { - transform: translate(0.5px, 0.5px) rotate(-0.5deg); + transform: translate(.5px, .5px) rotate(-.5deg); } + 96% { - transform: translate(2.5px, -0.5px) rotate(-0.5deg); + transform: translate(2.5px, -.5px) rotate(-.5deg); } + 98% { - transform: translate(-1.5px, -1.5px) rotate(-0.5deg); + transform: translate(-1.5px, -1.5px) rotate(-.5deg); } + 0%, 100% { - transform: translate(0, 0) rotate(0deg); + transform: translate(0, 0) rotate(0); } }