From 9514c646335b87251cab2b22c4cea70bd3800763 Mon Sep 17 00:00:00 2001
From: mayx
Date: Mon, 24 Jan 2022 21:27:29 +0800
Subject: add Live2D

---
 Live2dHistoire/live2d/css/live2d.css | 940 +++++++++++++++++++++++++++++++++++
 1 file changed, 940 insertions(+)
 create mode 100644 Live2dHistoire/live2d/css/live2d.css

(limited to 'Live2dHistoire/live2d/css')

diff --git a/Live2dHistoire/live2d/css/live2d.css b/Live2dHistoire/live2d/css/live2d.css
new file mode 100644
index 0000000..3ce12d2
--- /dev/null
+++ b/Live2dHistoire/live2d/css/live2d.css
@@ -0,0 +1,940 @@
+#landlord {
+    user-select: none;
+    position: fixed;
+    left: 5px;
+    bottom: 0;
+    width: 250px;
+    height: 280px;
+    z-index: 10000;
+    font-size: 0;
+    /*transition: all .3s ease-in-out;*/
+	display:none;
+}
+#open_live2d{
+	border: 2px solid rgba(75,127,199,0.9);
+    border-radius: 2px;
+    background-color: rgba(74, 59, 114,0.9);
+	padding:2px 10px;
+	color:#fff;
+	height:24px;
+	line-height:24px;
+	font-size:12px;
+	position:fixed;
+	right:5px;
+	bottom:5px;
+	z-index:10000;
+	cursor:pointer;
+	display:none;
+}
+#showInfoBtn{
+ 	display:none;
+}
+#live2d {
+	width: 250px;
+    height: 280px;
+    position: relative;
+	z-index:3;
+}
+
+.message {
+    opacity: 0;
+    color: #fff;
+	box-sizing: border-box;
+    width: 250px;
+    height: auto;
+    margin: auto;
+    padding: 7px;
+    bottom: 280px;
+    left: 0px;
+    text-align: center;
+    border: 2px solid rgba(75,127,199,0.9);
+    border-radius: 5px;
+    background-color: rgba(74, 59, 114,0.9);
+    font-size: 13px;
+    font-weight: 400;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    overflow: hidden;
+    position: absolute;
+    /*animation-delay: 5s;
+    animation-duration: 50s;
+    animation-iteration-count: infinite;
+    animation-name: shake;
+    animation-timing-function: ease-in-out;*/
+}
+.live_talk_input_body{
+	position:absolute;
+	bottom:15px;
+	left:0;
+	width:250px;
+	display:none;
+	z-index:4;
+}
+.live_talk_input_text_body{
+	width:250px;
+	box-sizing:border-box;
+	height:28px;
+	border: 2px solid rgb(223, 179, 241);
+    border-radius: 5px;
+    background-color: rgba(74, 59, 114,0.9);
+}
+.live_talk_input_name_body{
+	width:70px;
+	box-sizing:border-box;
+	height:24px;
+	border: 2px solid rgb(223, 179, 241);
+    border-radius: 5px;
+    background-color: rgba(74, 59, 114,0.9);
+	margin-bottom:3px;
+}
+.live_talk_name{
+	background-color:transparent;
+	border:0px;
+	margin:0;
+	width:66px;
+	height:20px;
+	line-height:20px;
+	text-align:center;
+	font-size:12px;
+	color:#fff;
+	outline:none;
+	box-sizing:border-box;
+	padding:0 3px;
+}
+.live_talk_talk{
+	background-color:transparent;
+	border:0px;
+	margin:0;
+	width:206px;
+	height:24px;
+	line-height:24px;
+	text-align:left;
+	font-size:12px;
+	color:#fff;
+	outline:none;
+	box-sizing:border-box;
+	padding:0 3px;
+	float:left;
+}
+.live_talk_send_btn{
+	background-color:transparent;
+	color:#fff;
+	border:0px;
+	cursor:pointer;
+	padding:0 4px;
+	border-left:1px solid #fff;
+	font-size:12px;
+	float:right;
+	height:18px;
+	line-height:18px;
+	outline:none;
+	margin:3px 0 0 0;
+}
+.white_input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+    color: #E4E4E4;  
+	opacity: 1;
+}
+ 
+.white_input::-moz-placeholder {  /* Mozilla Firefox 19+*/ 
+    color: #E4E4E4;
+	opacity: 1;
+}
+ 
+.white_input:-ms-input-placeholder {
+    color: #E4E4E4;
+}
+ 
+.white_input::-webkit-input-placeholder {
+    color: #E4E4E4;
+}
+
+
+.hide-button {
+    position: absolute;
+    top: 10px;
+    right: 0;
+    /* bottom: 30px; */
+    display: none;
+    overflow: hidden;
+    /* padding: 4px; */
+    width: 60px;
+    height: 20px;
+    border: 1px solid rgba(255,137,255,.4);
+    border-radius: 12px;
+    background: rgba(255,137,255,.2);
+    box-shadow: 0 3px 15px 2px rgba(255,137,255,.4);
+    text-align: center;
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.hide-button:hover {
+    border: 1px solid #f4a7b9;
+    background: #f4f6f8;
+}
+.live_ico_box{
+	width:15px;
+	position:absolute;
+	z-index:5;
+	right:0;
+	top:10px;
+	opacity:0.9;
+}
+.live_ico_item{
+	width:15px;
+	height: 20px;
+	cursor:pointer;
+	background-position:center center;
+	background-repeat:no-repeat;
+	background-size:15px;
+}
+.live_ico_item.type_talk{
+	background-image:url(../images/talk.png);
+}
+.live_ico_item.type_quit{
+	background-image:url(../images/quite.png);
+}
+.live_ico_item.type_info{
+	background-image:url(../images/info.png);
+}
+.live_ico_item.type_music{
+	background-image:url(../images/music.png);
+}
+.live_ico_item.type_youdu{
+	background-image:url(../images/youdu.png);
+}
+.live_ico_item.type_music.play{
+	background-image:url(../images/pasue.png);
+}
+.live_ico_item.type_youdu.doudong{
+    -webkit-animation-name: shake-little;
+    -ms-animation-name: shake-little;
+    animation-name: shake-little;
+    -webkit-animation-duration: 100ms;
+    -ms-animation-duration: 100ms;
+    animation-duration: 100ms;
+    -webkit-animation-iteration-count: infinite;
+    -ms-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+    -webkit-animation-timing-function: ease-in-out;
+    -ms-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+    -webkit-animation-delay: 0s;
+    -ms-animation-delay: 0s;
+    animation-delay: 0s;
+    -webkit-animation-play-state: running;
+    -ms-animation-play-state: running;
+    animation-play-state: running
+}
+.douqilai,.douqilai *{
+    animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
+}
+.l2d_caihong{
+    animation: rainbow 1.5s infinite;
+}
+@media (max-width: 860px) {
+    #landlord {
+        display: none!important;
+    }
+}
+
+@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);
+    }
+}
+
+@keyframes quan {
+      0%   { transform:rotate(0);
+             animation-timing-function:linear; }
+      100% { transform:rotate(360deg); }
+}
+@-webkit-keyframes quan {
+      0%   { -webkit-transform:rotate(0);
+             -webkit-animation-timing-function:linear; }
+      100% { -webkit-transform:rotate(360deg); }
+}
+@-moz-keyframes quan {
+      0%   { -moz-transform:rotate(0);
+             -moz-animation-timing-function:linear; }
+      100% { -moz-transform:rotate(360deg); }
+}
+@-o-keyframes quan {
+      0%   { -o-transform:rotate(0);
+             -o-animation-timing-function:linear; }
+      100% { -o-transform:rotate(360deg); }
+}
+@-ms-keyframes quan {
+      0%   { -ms-transform:rotate(0);
+             -ms-animation-timing-function:linear; }
+      100% { -ms-transform:rotate(360deg); }
+}
+@-webkit-keyframes shake-little {
+    0% {
+        -webkit-transform: translate(0px, 0px) rotate(0deg)
+    }
+    2% {
+        -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    4% {
+        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    6% {
+        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    8% {
+        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    10% {
+        -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    12% {
+        -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    14% {
+        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    16% {
+        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    18% {
+        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    20% {
+        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    22% {
+        -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    24% {
+        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    26% {
+        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    28% {
+        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    30% {
+        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    32% {
+        -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    34% {
+        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    36% {
+        -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    38% {
+        -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    40% {
+        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    42% {
+        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    44% {
+        -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    46% {
+        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    48% {
+        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    50% {
+        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    52% {
+        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    54% {
+        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    56% {
+        -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    58% {
+        -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    60% {
+        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    62% {
+        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    64% {
+        -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    66% {
+        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    68% {
+        -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    70% {
+        -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    72% {
+        -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    74% {
+        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    76% {
+        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    78% {
+        -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    80% {
+        -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    82% {
+        -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    84% {
+        -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    86% {
+        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    88% {
+        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    90% {
+        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    92% {
+        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    94% {
+        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    96% {
+        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    98% {
+        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+}
+@-ms-keyframes shake-little {
+    0% {
+        -ms-transform: translate(0px, 0px) rotate(0deg)
+    }
+    2% {
+        -ms-transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    4% {
+        -ms-transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    6% {
+        -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    8% {
+        -ms-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    10% {
+        -ms-transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    12% {
+        -ms-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    14% {
+        -ms-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    16% {
+        -ms-transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    18% {
+        -ms-transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    20% {
+        -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    22% {
+        -ms-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    24% {
+        -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    26% {
+        -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    28% {
+        -ms-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    30% {
+        -ms-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    32% {
+        -ms-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    34% {
+        -ms-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    36% {
+        -ms-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    38% {
+        -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    40% {
+        -ms-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    42% {
+        -ms-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    44% {
+        -ms-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    46% {
+        -ms-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    48% {
+        -ms-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    50% {
+        -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    52% {
+        -ms-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    54% {
+        -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    56% {
+        -ms-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    58% {
+        -ms-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    60% {
+        -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    62% {
+        -ms-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    64% {
+        -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    66% {
+        -ms-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    68% {
+        -ms-transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    70% {
+        -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    72% {
+        -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    74% {
+        -ms-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    76% {
+        -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    78% {
+        -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    80% {
+        -ms-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    82% {
+        -ms-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    84% {
+        -ms-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    86% {
+        -ms-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    88% {
+        -ms-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    90% {
+        -ms-transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    92% {
+        -ms-transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    94% {
+        -ms-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    96% {
+        -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    98% {
+        -ms-transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+}
+@keyframes shake-little {
+    0% {
+        transform: translate(0px, 0px) rotate(0deg)
+    }
+    2% {
+        transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    4% {
+        transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    6% {
+        transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    8% {
+        transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    10% {
+        transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    12% {
+        transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    14% {
+        transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    16% {
+        transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    18% {
+        transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    20% {
+        transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    22% {
+        transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    24% {
+        transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    26% {
+        transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    28% {
+        transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    30% {
+        transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    32% {
+        transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    34% {
+        transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    36% {
+        transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    38% {
+        transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    40% {
+        transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    42% {
+        transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    44% {
+        transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    46% {
+        transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    48% {
+        transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    50% {
+        transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    52% {
+        transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    54% {
+        transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    56% {
+        transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    58% {
+        transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    60% {
+        transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    62% {
+        transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    64% {
+        transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    66% {
+        transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    68% {
+        transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    70% {
+        transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    72% {
+        transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    74% {
+        transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    76% {
+        transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    78% {
+        transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    80% {
+        transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    82% {
+        transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    84% {
+        transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    86% {
+        transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    88% {
+        transform: translate(0px, 0px) rotate(-0.5deg)
+    }
+    90% {
+        transform: translate(-1px, -1px) rotate(-0.5deg)
+    }
+    92% {
+        transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    94% {
+        transform: translate(-1px, 0px) rotate(-0.5deg)
+    }
+    96% {
+        transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+    98% {
+        transform: translate(0px, -1px) rotate(-0.5deg)
+    }
+}
+@keyframes shake-it{
+    0%{
+        text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5);
+    }
+    25%{
+        text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
+    }
+    50%{
+        text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5);
+    }
+    100%{
+        text-shadow: 3px 0 rgba(0, 255, 255, .5), 5px 0 rgba(255, 0, 0, .5);
+    }
+}
+@keyframes rainbow {
+    100% { filter: hue-rotate(360deg); }
+}
\ No newline at end of file
-- 
cgit 1.4.1-2-gfad0