| .waifu { |
| position: fixed; |
| bottom: 0; |
| z-index: 1; |
| font-size: 0; |
| -webkit-transform: translateY(3px); |
| transform: translateY(3px); |
| } |
| .waifu:hover { |
| -webkit-transform: translateY(0); |
| transform: translateY(0); |
| } |
| .waifu-tips { |
| opacity: 0; |
| margin: -20px 20px; |
| 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); |
| 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; |
| } |
| .waifu-tool { |
| display: none; |
| color: #aaa; |
| top: 50px; |
| right: 10px; |
| position: absolute; |
| } |
| .waifu:hover .waifu-tool { |
| display: block; |
| } |
| .waifu-tool span { |
| display: block; |
| cursor: pointer; |
| color: #5b6c7d; |
| transition: 0.2s; |
| } |
| .waifu-tool span:hover { |
| color: #34495e; |
| } |
| .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); |
| } |
| } |
| @font-face { |
| font-family: 'Flat-UI-Icons'; |
| src: url('flat-ui-icons-regular.eot'); |
| src: url('flat-ui-icons-regular.eot?#iefix') format('embedded-opentype'), url('flat-ui-icons-regular.woff') format('woff'), url('flat-ui-icons-regular.ttf') format('truetype'), url('flat-ui-icons-regular.svg#flat-ui-icons-regular') format('svg'); |
| } |
| [class^="fui-"], |
| [class*="fui-"] { |
| font-family: 'Flat-UI-Icons'; |
| speak: none; |
| font-style: normal; |
| font-weight: normal; |
| font-variant: normal; |
| text-transform: none; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
| .fui-cross:before { |
| content: "\e609"; |
| } |
| .fui-info-circle:before { |
| content: "\e60f"; |
| } |
| .fui-photo:before { |
| content: "\e62a"; |
| } |
| .fui-eye:before { |
| content: "\e62c"; |
| } |
| .fui-chat:before { |
| content: "\e62d"; |
| } |
| .fui-home:before { |
| content: "\e62e"; |
| } |
| .fui-user:before { |
| content: "\e631"; |
| } |
