心心念念的新年過完了~卻沒念到年會，更沒念到年終獎~哎，以任何理由不發年終獎的公司都是臭流氓~然，我們公司沒有理由，壓根兒就沒提這事，哇卡卡卡卡！！！ ======================== 華麗麗的跳水線=========================== 年後第一天，公司人不多，閑來
心心念念的新年過完了~卻沒念到年會，更沒念到年終獎~哎，以任何理由不發年終獎的公司都是臭流氓~然，我們公司沒有理由，壓根兒就沒提這事，哇卡卡卡卡！！！
======================== 華麗麗的跳水線===========================
年後第一天，公司人不多，閑來逛逛各個論壇，發現一個小特效，拿出來共用一下，順便請大拿幫忙看看一個奇葩的BUG~
來人~上代碼！
喳~
1 <!DOCTYPE html> 2 <html > 3 <head> 4 <meta charset="UTF-8"> 5 <title>Countdown Clock</title> 6 <style> 7 /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ 8 /* Reset */ 9 * { 10 margin: 0; 11 padding: 0; 12 box-sizing: border-box; 13 } 14 15 a { 16 cursor: pointer; 17 text-decoration: none; 18 color: #ccc; 19 } 20 21 a:hover { 22 color: #fff; 23 } 24 25 ul { 26 list-style: none 27 } 28 29 .clearfix:before, 30 .clearfix:after { 31 content: " "; 32 display: table; 33 } 34 35 .clearfix:after { 36 clear: both; 37 } 38 39 .clearfix { 40 *zoom: 1; 41 } 42 43 /* Main */ 44 45 html, body { 46 min-height: 100%; 47 } 48 49 body { 50 font: normal 11px "Helvetica Neue", Helvetica, sans-serif; 51 user-select: none; 52 color: #888; 53 text-shadow: 0 1px 0 rgba(0, 0, 0, .3); 54 background: rgb(150, 150, 150); 55 background: -moz-radial-gradient(center, ellipse cover, rgba(150, 150, 150, 1) 0%, rgba(89, 89, 89, 1) 100%); 56 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(150, 150, 150, 1)), color-stop(100%, rgba(89, 89, 89, 1))); 57 background: -webkit-radial-gradient(center, ellipse cover, rgba(150, 150, 150, 1) 0%, rgba(89, 89, 89, 1) 100%); 58 background: -o-radial-gradient(center, ellipse cover, rgba(150, 150, 150, 1) 0%, rgba(89, 89, 89, 1) 100%); 59 background: -ms-radial-gradient(center, ellipse cover, rgba(150, 150, 150, 1) 0%, rgba(89, 89, 89, 1) 100%); 60 background: radial-gradient(ellipse at center, rgba(150, 150, 150, 1) 0%, rgba(89, 89, 89, 1) 100%); 61 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#969696', endColorstr = '#595959', GradientType = 1); 62 63 } 64 65 .container { 66 text-align: center; 67 position: absolute; 68 left: 50%; 69 top: 50%; 70 width: 140px; 71 height: 90px; 72 margin: -45px 0 0 -70px; 73 } 74 75 #social { 76 text-align: center; 77 position: absolute; 78 bottom: 14%; 79 width: 100%; 80 } 81 #social p{ 82 margin-bottom: 10px; 83 } 84 85 #social ul, 86 #social li { 87 display: inline-block; 88 } 89 90 /* Skeleton */ 91 92 ul.flip { 93 position: relative; 94 float: left; 95 margin: 5px; 96 width: 60px; 97 height: 90px; 98 font-size: 80px; 99 font-weight: bold; 100 line-height: 87px; 101 border-radius: 6px; 102 box-shadow: 0 2px 5px rgba(0, 0, 0, .7); 103 } 104 105 ul.flip li { 106 z-index: 1; 107 position: absolute; 108 left: 0; 109 top: 0; 110 width: 100%; 111 height: 100%; 112 113 } 114 115 ul.flip li:first-child { 116 z-index: 2; 117 } 118 119 ul.flip li a { 120 display: block; 121 height: 100%; 122 perspective: 200px; 123 } 124 125 ul.flip li a div { 126 z-index: 1; 127 position: absolute; 128 left: 0; 129 width: 100%; 130 height: 50%; 131 overflow: hidden; 132 } 133 134 ul.flip li a div .shadow { 135 position: absolute; 136 width: 100%; 137 height: 100%; 138 z-index: 2; 139 } 140 141 ul.flip li a div.up { 142 transform-origin: 50% 100%; 143 top: 0; 144 } 145 146 ul.flip li a div.up:after { 147 content: ""; 148 position:absolute; 149 top:44px; 150 left:0; 151 z-index: 5; 152 width: 100%; 153 height: 3px; 154 background-color: rgba(0,0,0,.4); 155 } 156 157 ul.flip li a div.down { 158 transform-origin: 50% 0%; 159 bottom: 0; 160 } 161 162 ul.flip li a div div.inn { 163 position: absolute; 164 left: 0; 165 z-index: 1; 166 width: 100%; 167 height: 200%; 168 color: #ccc; 169 text-shadow: 0 1px 2px #000; 170 text-align: center; 171 background-color: #333; 172 border-radius: 6px; 173 } 174 175 ul.flip li a div.up div.inn { 176 top: 0; 177 178 } 179 180 ul.flip li a div.down div.inn { 181 bottom: 0; 182 } 183 184 /* PLAY */ 185 186 body.play ul li.before { 187 z-index: 3; 188 } 189 190 body.play ul li.active { 191 animation: asd .5s .5s linear both; 192 z-index: 2; 193 } 194 195 @keyframes asd { 196 0% { 197 z-index: 2; 198 } 199 5% { 200 z-index: 4; 201 } 202 100% { 203 z-index: 4; 204 } 205 } 206 207 body.play ul li.active .down { 208 z-index: 2; 209 animation: turn .5s .5s linear both; 210 } 211 212 @keyframes turn { 213 0% { 214 transform: rotateX(90deg); 215 } 216 100% { 217 transform: rotateX(0deg); 218 } 219 } 220 221 body.play ul li.before .up { 222 z-index: 2; 223 animation: turn2 .5s linear both; 224 } 225 226 @keyframes turn2 { 227 0% { 228 transform: rotateX(0deg); 229 } 230 100% { 231 transform: rotateX(-90deg); 232 } 233 } 234 235 /* SHADOW */ 236 237 body.play ul li.before .up .shadow { 238 background: -moz-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); 239 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1))); 240 background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); 241 background: -o-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); 242 background: -ms-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); 243 background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); 244 animation: show .5s linear both; 245 } 246 247 body.play ul li.active .up .shadow { 248 background: -moz-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); 249 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1))); 250 background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); 251 background: -o-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); 252 background: -ms-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); 253 background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); 254 animation: hide .5s .3s linear both; 255 } 256 257 /*DOWN*/ 258 259 body.play ul li.before .down .shadow { 260 background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%); 261 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1))); 262 background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%); 263 background: -o-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%); 264 background: -ms-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%); 265 background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%); 266 animation: show .5s linear both; 267 } 268 269 body.play ul li.active .down .shadow { 270 background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%); 271 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1))); 272 background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%); 273 background: -o-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%); 274 background: -ms-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%); 275 background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%); 276 animation: hide .5s .3s linear both; 277 } 278 279 @keyframes show { 280 0% { 281 opacity: 0; 282 } 283 100% { 284 opacity: 1; 285 } 286 } 287 288 @keyframes hide { 289 0% { 290 opacity
