@import url(http://fonts.lug.ustc.edu.cn/css?family=PT+Sans:700|Pacifico|Changa+One); * { padding: 0px; margin: 0px; } body { overflow: hidden; } .page-bg { position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; background: url('http://i.imgur.com/BlihuYt.jpg') center center fixed; -webkit-filter: blur(0px); } .msg { position: absolute; top: 50%; left: 50%; width: 600px; line-height: 200px; margin: -100px 0 0 -300px; text-align: center; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; -webkit-transform-origin: 50% 80%; -moz-transform-origin: 50% 80%; -o-transform-origin: 50% 80%; -ms-transform-origin: 50% 80%; transform-origin: 50% 80%; transform-type: preserve-3d; } .msg span { display: inline-block; font: 70px serif; position: relative; 0: 0; border-bottom: 5px solid #000; border-top: 5px solid #000; -webkit-box-shadow: 0 0 25px rgba(0,0,0,0.3); box-shadow: 0 0 25px rgba(0,0,0,0.3); background: #fff; -webkit-animation: pulsate 3s infinite linear; -moz-animation: pulsate 3s infinite linear; -o-animation: pulsate 3s infinite linear; -ms-animation: pulsate 3s infinite linear; animation: pulsate 3s infinite linear; } .msg span:nth-of-type(1) { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; -ms-animation-delay: 1s; animation-delay: 1s; } .msg span:nth-of-type(2) { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; -o-animation-delay: 2s; -ms-animation-delay: 2s; animation-delay: 2s; } .msg span:nth-of-type(3) { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; } .msg span:nth-of-type(4) { -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -o-animation-delay: 4s; -ms-animation-delay: 4s; animation-delay: 4s; } .msg span:nth-of-type(5) { -webkit-animation-delay: 5s; -moz-animation-delay: 5s; -o-animation-delay: 5s; -ms-animation-delay: 5s; animation-delay: 5s; } .msg span:nth-of-type(6) { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .msg span:nth-of-type(7) { -webkit-animation-delay: 7s; -moz-animation-delay: 7s; -o-animation-delay: 7s; -ms-animation-delay: 7s; animation-delay: 7s; } .msg span:nth-of-type(8) { -webkit-animation-delay: 8s; -moz-animation-delay: 8s; -o-animation-delay: 8s; -ms-animation-delay: 8s; animation-delay: 8s; } .msg span:nth-of-type(9) { -webkit-animation-delay: 9s; -moz-animation-delay: 9s; -o-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s; } .msg span:nth-of-type(10) { -webkit-animation-delay: 10s; -moz-animation-delay: 10s; -o-animation-delay: 10s; -ms-animation-delay: 10s; animation-delay: 10s; } .msg span:nth-of-type(11) { -webkit-animation-delay: 11s; -moz-animation-delay: 11s; -o-animation-delay: 11s; -ms-animation-delay: 11s; animation-delay: 11s; } .msg span:nth-of-type(12) { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .msg span:nth-of-type(13) { -webkit-animation-delay: 13s; -moz-animation-delay: 13s; -o-animation-delay: 13s; -ms-animation-delay: 13s; animation-delay: 13s; } .msg span:nth-of-type(14) { -webkit-animation-delay: 14s; -moz-animation-delay: 14s; -o-animation-delay: 14s; -ms-animation-delay: 14s; animation-delay: 14s; } .msg span:nth-of-type(15) { -webkit-animation-delay: 15s; -moz-animation-delay: 15s; -o-animation-delay: 15s; -ms-animation-delay: 15s; animation-delay: 15s; } .msg span:nth-of-type(16) { -webkit-animation-delay: 16s; -moz-animation-delay: 16s; -o-animation-delay: 16s; -ms-animation-delay: 16s; animation-delay: 16s; } .msg span:nth-of-type(17) { -webkit-animation-delay: 17s; -moz-animation-delay: 17s; -o-animation-delay: 17s; -ms-animation-delay: 17s; animation-delay: 17s; } .msg span:nth-of-type(18) { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .msg span:nth-of-type(19) { -webkit-animation-delay: 19s; -moz-animation-delay: 19s; -o-animation-delay: 19s; -ms-animation-delay: 19s; animation-delay: 19s; } .msg span:nth-of-type(20) { -webkit-animation-delay: 20s; -moz-animation-delay: 20s; -o-animation-delay: 20s; -ms-animation-delay: 20s; animation-delay: 20s; } .msg span:nth-of-type(21) { -webkit-animation-delay: 21s; -moz-animation-delay: 21s; -o-animation-delay: 21s; -ms-animation-delay: 21s; animation-delay: 21s; } .msg span:nth-of-type(22) { -webkit-animation-delay: 22s; -moz-animation-delay: 22s; -o-animation-delay: 22s; -ms-animation-delay: 22s; animation-delay: 22s; } .msg span:nth-of-type(23) { -webkit-animation-delay: 23s; -moz-animation-delay: 23s; -o-animation-delay: 23s; -ms-animation-delay: 23s; animation-delay: 23s; } .msg span:nth-of-type(24) { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .msg span:nth-of-type(25) { -webkit-animation-delay: 25s; -moz-animation-delay: 25s; -o-animation-delay: 25s; -ms-animation-delay: 25s; animation-delay: 25s; } .msg span:nth-of-type(26) { -webkit-animation-delay: 26s; -moz-animation-delay: 26s; -o-animation-delay: 26s; -ms-animation-delay: 26s; animation-delay: 26s; } .msg span:nth-of-type(27) { -webkit-animation-delay: 27s; -moz-animation-delay: 27s; -o-animation-delay: 27s; -ms-animation-delay: 27s; animation-delay: 27s; } .msg span:nth-of-type(28) { -webkit-animation-delay: 28s; -moz-animation-delay: 28s; -o-animation-delay: 28s; -ms-animation-delay: 28s; animation-delay: 28s; } .msg span:nth-of-type(29) { -webkit-animation-delay: 29s; -moz-animation-delay: 29s; -o-animation-delay: 29s; -ms-animation-delay: 29s; animation-delay: 29s; } .msg span:nth-of-type(30) { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } .msg span:nth-of-type(31) { -webkit-animation-delay: 31s; -moz-animation-delay: 31s; -o-animation-delay: 31s; -ms-animation-delay: 31s; animation-delay: 31s; } .msg span:nth-of-type(32) { -webkit-animation-delay: 32s; -moz-animation-delay: 32s; -o-animation-delay: 32s; -ms-animation-delay: 32s; animation-delay: 32s; } .msg span:nth-of-type(33) { -webkit-animation-delay: 33s; -moz-animation-delay: 33s; -o-animation-delay: 33s; -ms-animation-delay: 33s; animation-delay: 33s; } .msg span:nth-of-type(34) { -webkit-animation-delay: 34s; -moz-animation-delay: 34s; -o-animation-delay: 34s; -ms-animation-delay: 34s; animation-delay: 34s; } .msg span:nth-of-type(35) { -webkit-animation-delay: 35s; -moz-animation-delay: 35s; -o-animation-delay: 35s; -ms-animation-delay: 35s; animation-delay: 35s; } .msg span:nth-of-type(36) { -webkit-animation-delay: 36s; -moz-animation-delay: 36s; -o-animation-delay: 36s; -ms-animation-delay: 36s; animation-delay: 36s; } .msg span:nth-of-type(37) { -webkit-animation-delay: 37s; -moz-animation-delay: 37s; -o-animation-delay: 37s; -ms-animation-delay: 37s; animation-delay: 37s; } .msg span:nth-of-type(38) { -webkit-animation-delay: 38s; -moz-animation-delay: 38s; -o-animation-delay: 38s; -ms-animation-delay: 38s; animation-delay: 38s; } .msg span:nth-of-type(39) { -webkit-animation-delay: 39s; -moz-animation-delay: 39s; -o-animation-delay: 39s; -ms-animation-delay: 39s; animation-delay: 39s; } .msg span:nth-of-type(40) { -webkit-animation-delay: 40s; -moz-animation-delay: 40s; -o-animation-delay: 40s; -ms-animation-delay: 40s; animation-delay: 40s; } .msg span:nth-of-type(41) { -webkit-animation-delay: 41s; -moz-animation-delay: 41s; -o-animation-delay: 41s; -ms-animation-delay: 41s; animation-delay: 41s; } .msg span:nth-of-type(42) { -webkit-animation-delay: 42s; -moz-animation-delay: 42s; -o-animation-delay: 42s; -ms-animation-delay: 42s; animation-delay: 42s; } .msg span:nth-of-type(43) { -webkit-animation-delay: 43s; -moz-animation-delay: 43s; -o-animation-delay: 43s; -ms-animation-delay: 43s; animation-delay: 43s; } .msg span:nth-of-type(44) { -webkit-animation-delay: 44s; -moz-animation-delay: 44s; -o-animation-delay: 44s; -ms-animation-delay: 44s; animation-delay: 44s; } .msg span:nth-of-type(45) { -webkit-animation-delay: 45s; -moz-animation-delay: 45s; -o-animation-delay: 45s; -ms-animation-delay: 45s; animation-delay: 45s; } .msg span:nth-of-type(46) { -webkit-animation-delay: 46s; -moz-animation-delay: 46s; -o-animation-delay: 46s; -ms-animation-delay: 46s; animation-delay: 46s; } .msg span:nth-of-type(47) { -webkit-animation-delay: 47s; -moz-animation-delay: 47s; -o-animation-delay: 47s; -ms-animation-delay: 47s; animation-delay: 47s; } .msg span:nth-of-type(48) { -webkit-animation-delay: 48s; -moz-animation-delay: 48s; -o-animation-delay: 48s; -ms-animation-delay: 48s; animation-delay: 48s; } .msg span:nth-of-type(49) { -webkit-animation-delay: 49s; -moz-animation-delay: 49s; -o-animation-delay: 49s; -ms-animation-delay: 49s; animation-delay: 49s; } .msg span:nth-of-type(50) { -webkit-animation-delay: 50s; -moz-animation-delay: 50s; -o-animation-delay: 50s; -ms-animation-delay: 50s; animation-delay: 50s; } .msg span:nth-of-type(51) { -webkit-animation-delay: 51s; -moz-animation-delay: 51s; -o-animation-delay: 51s; -ms-animation-delay: 51s; animation-delay: 51s; } .msg span:nth-of-type(52) { -webkit-animation-delay: 52s; -moz-animation-delay: 52s; -o-animation-delay: 52s; -ms-animation-delay: 52s; animation-delay: 52s; } .msg span:nth-of-type(53) { -webkit-animation-delay: 53s; -moz-animation-delay: 53s; -o-animation-delay: 53s; -ms-animation-delay: 53s; animation-delay: 53s; } .msg span:nth-of-type(54) { -webkit-animation-delay: 54s; -moz-animation-delay: 54s; -o-animation-delay: 54s; -ms-animation-delay: 54s; animation-delay: 54s; } .msg span:nth-of-type(55) { -webkit-animation-delay: 55s; -moz-animation-delay: 55s; -o-animation-delay: 55s; -ms-animation-delay: 55s; animation-delay: 55s; } .msg span:nth-of-type(56) { -webkit-animation-delay: 56s; -moz-animation-delay: 56s; -o-animation-delay: 56s; -ms-animation-delay: 56s; animation-delay: 56s; } .msg span:nth-of-type(57) { -webkit-animation-delay: 57s; -moz-animation-delay: 57s; -o-animation-delay: 57s; -ms-animation-delay: 57s; animation-delay: 57s; } .msg span:nth-of-type(58) { -webkit-animation-delay: 58s; -moz-animation-delay: 58s; -o-animation-delay: 58s; -ms-animation-delay: 58s; animation-delay: 58s; } .msg span:nth-of-type(59) { -webkit-animation-delay: 59s; -moz-animation-delay: 59s; -o-animation-delay: 59s; -ms-animation-delay: 59s; animation-delay: 59s; } .msg span:nth-of-type(60) { -webkit-animation-delay: 60s; -moz-animation-delay: 60s; -o-animation-delay: 60s; -ms-animation-delay: 60s; animation-delay: 60s; } .msg span:nth-of-type(61) { -webkit-animation-delay: 61s; -moz-animation-delay: 61s; -o-animation-delay: 61s; -ms-animation-delay: 61s; animation-delay: 61s; } .msg span:nth-of-type(62) { -webkit-animation-delay: 62s; -moz-animation-delay: 62s; -o-animation-delay: 62s; -ms-animation-delay: 62s; animation-delay: 62s; } .msg span:nth-of-type(63) { -webkit-animation-delay: 63s; -moz-animation-delay: 63s; -o-animation-delay: 63s; -ms-animation-delay: 63s; animation-delay: 63s; } .msg span:nth-of-type(64) { -webkit-animation-delay: 64s; -moz-animation-delay: 64s; -o-animation-delay: 64s; -ms-animation-delay: 64s; animation-delay: 64s; } .msg span:nth-of-type(65) { -webkit-animation-delay: 65s; -moz-animation-delay: 65s; -o-animation-delay: 65s; -ms-animation-delay: 65s; animation-delay: 65s; } .msg span:nth-of-type(66) { -webkit-animation-delay: 66s; -moz-animation-delay: 66s; -o-animation-delay: 66s; -ms-animation-delay: 66s; animation-delay: 66s; } .msg span:nth-of-type(67) { -webkit-animation-delay: 67s; -moz-animation-delay: 67s; -o-animation-delay: 67s; -ms-animation-delay: 67s; animation-delay: 67s; } .msg span:nth-of-type(68) { -webkit-animation-delay: 68s; -moz-animation-delay: 68s; -o-animation-delay: 68s; -ms-animation-delay: 68s; animation-delay: 68s; } .msg span:nth-of-type(69) { -webkit-animation-delay: 69s; -moz-animation-delay: 69s; -o-animation-delay: 69s; -ms-animation-delay: 69s; animation-delay: 69s; } .msg span:nth-of-type(70) { -webkit-animation-delay: 70s; -moz-animation-delay: 70s; -o-animation-delay: 70s; -ms-animation-delay: 70s; animation-delay: 70s; } .msg span:nth-of-type(71) { -webkit-animation-delay: 71s; -moz-animation-delay: 71s; -o-animation-delay: 71s; -ms-animation-delay: 71s; animation-delay: 71s; } .msg span:nth-of-type(72) { -webkit-animation-delay: 72s; -moz-animation-delay: 72s; -o-animation-delay: 72s; -ms-animation-delay: 72s; animation-delay: 72s; } .msg span:nth-of-type(73) { -webkit-animation-delay: 73s; -moz-animation-delay: 73s; -o-animation-delay: 73s; -ms-animation-delay: 73s; animation-delay: 73s; } .msg span:nth-of-type(74) { -webkit-animation-delay: 74s; -moz-animation-delay: 74s; -o-animation-delay: 74s; -ms-animation-delay: 74s; animation-delay: 74s; } .msg span:nth-of-type(75) { -webkit-animation-delay: 75s; -moz-animation-delay: 75s; -o-animation-delay: 75s; -ms-animation-delay: 75s; animation-delay: 75s; } .msg span:nth-of-type(76) { -webkit-animation-delay: 76s; -moz-animation-delay: 76s; -o-animation-delay: 76s; -ms-animation-delay: 76s; animation-delay: 76s; } .msg span:nth-of-type(77) { -webkit-animation-delay: 77s; -moz-animation-delay: 77s; -o-animation-delay: 77s; -ms-animation-delay: 77s; animation-delay: 77s; } .msg span:nth-of-type(78) { -webkit-animation-delay: 78s; -moz-animation-delay: 78s; -o-animation-delay: 78s; -ms-animation-delay: 78s; animation-delay: 78s; } .msg span:nth-of-type(79) { -webkit-animation-delay: 79s; -moz-animation-delay: 79s; -o-animation-delay: 79s; -ms-animation-delay: 79s; animation-delay: 79s; } .msg span:nth-of-type(80) { -webkit-animation-delay: 80s; -moz-animation-delay: 80s; -o-animation-delay: 80s; -ms-animation-delay: 80s; animation-delay: 80s; } .msg span:nth-of-type(81) { -webkit-animation-delay: 81s; -moz-animation-delay: 81s; -o-animation-delay: 81s; -ms-animation-delay: 81s; animation-delay: 81s; } .msg span:nth-of-type(82) { -webkit-animation-delay: 82s; -moz-animation-delay: 82s; -o-animation-delay: 82s; -ms-animation-delay: 82s; animation-delay: 82s; } .msg span:nth-of-type(83) { -webkit-animation-delay: 83s; -moz-animation-delay: 83s; -o-animation-delay: 83s; -ms-animation-delay: 83s; animation-delay: 83s; } .msg span:nth-of-type(84) { -webkit-animation-delay: 84s; -moz-animation-delay: 84s; -o-animation-delay: 84s; -ms-animation-delay: 84s; animation-delay: 84s; } .msg span:nth-of-type(85) { -webkit-animation-delay: 85s; -moz-animation-delay: 85s; -o-animation-delay: 85s; -ms-animation-delay: 85s; animation-delay: 85s; } .msg span:nth-of-type(86) { -webkit-animation-delay: 86s; -moz-animation-delay: 86s; -o-animation-delay: 86s; -ms-animation-delay: 86s; animation-delay: 86s; } .msg span:nth-of-type(87) { -webkit-animation-delay: 87s; -moz-animation-delay: 87s; -o-animation-delay: 87s; -ms-animation-delay: 87s; animation-delay: 87s; } .msg span:nth-of-type(88) { -webkit-animation-delay: 88s; -moz-animation-delay: 88s; -o-animation-delay: 88s; -ms-animation-delay: 88s; animation-delay: 88s; } .msg span:nth-of-type(89) { -webkit-animation-delay: 89s; -moz-animation-delay: 89s; -o-animation-delay: 89s; -ms-animation-delay: 89s; animation-delay: 89s; } .msg span:nth-of-type(90) { -webkit-animation-delay: 90s; -moz-animation-delay: 90s; -o-animation-delay: 90s; -ms-animation-delay: 90s; animation-delay: 90s; } .msg span:nth-of-type(91) { -webkit-animation-delay: 91s; -moz-animation-delay: 91s; -o-animation-delay: 91s; -ms-animation-delay: 91s; animation-delay: 91s; } .msg span:nth-of-type(92) { -webkit-animation-delay: 92s; -moz-animation-delay: 92s; -o-animation-delay: 92s; -ms-animation-delay: 92s; animation-delay: 92s; } .msg span:nth-of-type(93) { -webkit-animation-delay: 93s; -moz-animation-delay: 93s; -o-animation-delay: 93s; -ms-animation-delay: 93s; animation-delay: 93s; } .msg span:nth-of-type(94) { -webkit-animation-delay: 94s; -moz-animation-delay: 94s; -o-animation-delay: 94s; -ms-animation-delay: 94s; animation-delay: 94s; } .msg span:nth-of-type(95) { -webkit-animation-delay: 95s; -moz-animation-delay: 95s; -o-animation-delay: 95s; -ms-animation-delay: 95s; animation-delay: 95s; } .msg span:nth-of-type(96) { -webkit-animation-delay: 96s; -moz-animation-delay: 96s; -o-animation-delay: 96s; -ms-animation-delay: 96s; animation-delay: 96s; } .msg span:nth-of-type(97) { -webkit-animation-delay: 97s; -moz-animation-delay: 97s; -o-animation-delay: 97s; -ms-animation-delay: 97s; animation-delay: 97s; } .msg span:nth-of-type(98) { -webkit-animation-delay: 98s; -moz-animation-delay: 98s; -o-animation-delay: 98s; -ms-animation-delay: 98s; animation-delay: 98s; } .msg span:nth-of-type(99) { -webkit-animation-delay: 99s; -moz-animation-delay: 99s; -o-animation-delay: 99s; -ms-animation-delay: 99s; animation-delay: 99s; } .msg span:nth-of-type(100) { -webkit-animation-delay: 100s; -moz-animation-delay: 100s; -o-animation-delay: 100s; -ms-animation-delay: 100s; animation-delay: 100s; } .msg span:first-of-type { border-left: 5px solid #000; } .msg span:last-of-type { border-right: 5px solid #000; } .msg span:nth-of-type(even) { -webkit-transform: scale(1.1) rotate(2deg); -moz-transform: scale(1.1) rotate(2deg); -o-transform: scale(1.1) rotate(2deg); -ms-transform: scale(1.1) rotate(2deg); transform: scale(1.1) rotate(2deg); } .msg span:nth-of-type(odd) { -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg); } .msg span:before { display: block; content: attr(title); } .msg span:after { content: attr(title); position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.15; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)"; filter: alpha(opacity=15); -webkit-transform-origin: 50% 80%; -moz-transform-origin: 50% 80%; -o-transform-origin: 50% 80%; -ms-transform-origin: 50% 80%; transform-origin: 50% 80%; transform-type: preserve-3d; -webkit-transform: rotateX(50deg); -moz-transform: rotateX(50deg); -o-transform: rotateX(50deg); -ms-transform: rotateX(50deg); transform: rotateX(50deg); text-shadow: 0 0 5px #000; } .container { font-family: "Pacifico", cursive; font-weight: 400; position: relative; margin: 0 auto; max-width: 100%; font-size: 30px; text-align: center; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } span { display: block; } .line-3 { font-family: "PT Sans", sans-serif; font-weight: 700; font-size: 16px; text-transform: uppercase; margin: 70px 0 0; position: relative; letter-spacing: 6px; } .line-3:before, .line-3:after { content: " "; position: absolute; width: 50px; height: 5px; border-top: 1px solid #222222; border-bottom: 1px solid #222222; } .line-3:before { margin: 7px 0 0 -60px; } .line-3:after { margin: 7px 0 0 10px; } .line-5 { margin: 20px 0 50px; position: relative; text-align: center; margin: 10px auto; display: block; font-size: 20px; } .line-5 a { text-decoration: none; display: inline-block; text-align: left; color: #222222; }