improve style of danmaku setting box

src/DPlayer.js

@@ -171,14 +171,14 @@
                                 <div class="dplayer-comment-setting"></div>
                                 <div class="dplayer-comment-setting-box">
                                     <div class="dplayer-comment-setting-type">
-                                        <label>
-                                            <input type="radio" name="dplayer-danmaku-type" value="right" checked>
-                                            <span>正常</span>
-                                        </label>
                                         <label>
                                             <input type="radio" name="dplayer-danmaku-type" value="top">
                                             <span>顶部</span>
                                         </label>
+                                        <label>
+                                            <input type="radio" name="dplayer-danmaku-type" value="right" checked>
+                                            <span>滚动</span>
+                                        </label>
                                         <label>
                                             <input type="radio" name="dplayer-danmaku-type" value="bottom">
                                             <span>底部</span>

src/DPlayer.scss

@@ -609,7 +609,7 @@
                         border-radius: 4px;
                         padding: 5px;
                         font-size: 14px;
-                        width: 144px;
+                        width: 193px;
                         transition: all .3s ease-in-out;
                         transform: scale(0);
 
@@ -632,26 +632,28 @@
                             display: none;
                         }
 
-                        span {
-                            transition: all .1s ease-in-out;
-                        }
-
                         label {
                             cursor: pointer;
                         }
 
                         .dplayer-comment-setting-type {
-                            margin-bottom: 10px;
+                            width: 44px;
+                            float: left;
+                            margin-right: 5px;
 
                             span {
-                                padding: 8px;
+                                padding: 4px 6px;
                                 line-height: 16px;
                                 display: inline-block;
                                 border-radius: 4px;
+
+                                &:hover {
+                                    animation: my-face 5s infinite ease-in-out;
+                                }
                             }
 
                             input:checked+span {
-                                background: #666;
+                                background: #aaa;
                                 color: #FFF;
                             }
                         }
@@ -672,10 +674,16 @@
                                 border-radius: 50%;
                                 box-sizing: border-box;
                                 cursor: pointer;
+
+                                &:hover {
+                                    animation: my-face 5s infinite ease-in-out;
+                                    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+                                }
                             }
 
                             input:checked+span {
-                                transform: scale(1.2);
+                                box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+                                border: none !important;
                             }
                         }
                     }
@@ -826,4 +834,157 @@
             }
         }
     }
+}
+
+@keyframes my-face {
+    2% {
+        transform: translate(0, 1.5px) rotate(1.5deg);
+    }
+    4% {
+        transform: translate(0, -1.5px) rotate(-0.5deg);
+    }
+    6% {
+        transform: translate(0, 1.5px) rotate(-1.5deg);
+    }
+    8% {
+        transform: translate(0, -1.5px) rotate(-1.5deg);
+    }
+    10% {
+        transform: translate(0, 2.5px) rotate(1.5deg);
+    }
+    12% {
+        transform: translate(0, -0.5px) rotate(1.5deg);
+    }
+    14% {
+        transform: translate(0, -1.5px) rotate(1.5deg);
+    }
+    16% {
+        transform: translate(0, -0.5px) rotate(-1.5deg);
+    }
+    18% {
+        transform: translate(0, 0.5px) rotate(-1.5deg);
+    }
+    20% {
+        transform: translate(0, -1.5px) rotate(2.5deg);
+    }
+    22% {
+        transform: translate(0, 0.5px) rotate(-1.5deg);
+    }
+    24% {
+        transform: translate(0, 1.5px) rotate(1.5deg);
+    }
+    26% {
+        transform: translate(0, 0.5px) rotate(0.5deg);
+    }
+    28% {
+        transform: translate(0, 0.5px) rotate(1.5deg);
+    }
+    30% {
+        transform: translate(0, -0.5px) rotate(2.5deg);
+    }
+    32% {
+        transform: translate(0, 1.5px) rotate(-0.5deg);
+    }
+    34% {
+        transform: translate(0, 1.5px) rotate(-0.5deg);
+    }
+    36% {
+        transform: translate(0, -1.5px) rotate(2.5deg);
+    }
+    38% {
+        transform: translate(0, 1.5px) rotate(-1.5deg);
+    }
+    40% {
+        transform: translate(0, -0.5px) rotate(2.5deg);
+    }
+    42% {
+        transform: translate(0, 2.5px) rotate(-1.5deg);
+    }
+    44% {
+        transform: translate(0, 1.5px) rotate(0.5deg);
+    }
+    46% {
+        transform: translate(0, -1.5px) rotate(2.5deg);
+    }
+    48% {
+        transform: translate(0, -0.5px) rotate(0.5deg);
+    }
+    50% {
+        transform: translate(0, 0.5px) rotate(0.5deg);
+    }
+    52% {
+        transform: translate(0, 2.5px) rotate(2.5deg);
+    }
+    54% {
+        transform: translate(0, -1.5px) rotate(1.5deg);
+    }
+    56% {
+        transform: translate(0, 2.5px) rotate(2.5deg);
+    }
+    58% {
+        transform: translate(0, 0.5px) rotate(2.5deg);
+    }
+    60% {
+        transform: translate(0, 2.5px) rotate(2.5deg);
+    }
+    62% {
+        transform: translate(0, -0.5px) rotate(2.5deg);
+    }
+    64% {
+        transform: translate(0, -0.5px) rotate(1.5deg);
+    }
+    66% {
+        transform: translate(0, 1.5px) rotate(-0.5deg);
+    }
+    68% {
+        transform: translate(0, -1.5px) rotate(-0.5deg);
+    }
+    70% {
+        transform: translate(0, 1.5px) rotate(0.5deg);
+    }
+    72% {
+        transform: translate(0, 2.5px) rotate(1.5deg);
+    }
+    74% {
+        transform: translate(0, -0.5px) rotate(0.5deg);
+    }
+    76% {
+        transform: translate(0, -0.5px) rotate(2.5deg);
+    }
+    78% {
+        transform: translate(0, -0.5px) rotate(1.5deg);
+    }
+    80% {
+        transform: translate(0, 1.5px) rotate(1.5deg);
+    }
+    82% {
+        transform: translate(0, -0.5px) rotate(0.5deg);
+    }
+    84% {
+        transform: translate(0, 1.5px) rotate(2.5deg);
+    }
+    86% {
+        transform: translate(0, -1.5px) rotate(-1.5deg);
+    }
+    88% {
+        transform: translate(0, -0.5px) rotate(2.5deg);
+    }
+    90% {
+        transform: translate(0, 2.5px) rotate(-0.5deg);
+    }
+    92% {
+        transform: translate(0, 0.5px) rotate(-0.5deg);
+    }
+    94% {
+        transform: translate(0, 2.5px) rotate(0.5deg);
+    }
+    96% {
+        transform: translate(0, -0.5px) rotate(1.5deg);
+    }
+    98% {
+        transform: translate(0, -1.5px) rotate(-0.5deg);
+    }
+    0%, 100% {
+        transform: translate(0, 0) rotate(0deg);
+    }
 }