|
| 1 | +@charset "gb2312"; |
| 2 | +.banner { background: url(../images/banner_top.jpg) top center; height: 265px; overflow: hidden } |
| 3 | +.texts { width: 350px; line-height: 26px; margin: 60px 0 0 20px; float: left; font-size: 14px; } |
| 4 | +.texts p { -webkit-transform: translate(60px); -moz-transform: translate(60px); -o-transform: translate(60px); -ms-transform: translate(60px); transform: translate(60px); text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8), 2px 2px 3px rgba(180, 151, 151, 0.3); } |
| 5 | +.texts p:nth-child(1) { -webkit-animation: animations 3s ease-out 1s backwards; -moz-animation: animations 3s ease-out 1s backwards; -o-animation: animations 3s ease-out 1s backwards; -ms-animation: animations 3s ease-out 1s backwards; animation: animations 3s ease-out 1s backwards; } |
| 6 | +.texts p:nth-child(2) { -webkit-animation: animations 3s ease-out 4s backwards; -moz-animation: animations 3s ease-out 4s backwards; -o-animation: animations 3s ease-out 4s backwards; -ms-animation: animations 3s ease-out 4s backwards; animation: animations 3s ease-out 4s backwards; } |
| 7 | +.texts p:nth-child(3) { -webkit-animation: animations2 5s ease-in-out 7s backwards; -moz-animation: animations2 5s ease-in-out 7s backwards; -o-animation: animations2 5s ease-in-out 7s backwards; -ms-animation: animations2 5s ease-in-out 7s backwards; animation: animations2 5s ease-in-out 7s backwards; } |
| 8 | +@-webkit-keyframes animations { 0% { |
| 9 | +-webkit-transform:translate(0); |
| 10 | +opacity:0; |
| 11 | +} |
| 12 | + 50% { |
| 13 | +-webkit-transform:translate(30px); |
| 14 | +opacity:.5; |
| 15 | +} |
| 16 | + 100% { |
| 17 | +-webkit-transform:translate(60px); |
| 18 | +opacity:1; |
| 19 | +} |
| 20 | +} |
| 21 | +@-moz-keyframes animations { 0% { |
| 22 | +-moz-transform:translate(0); |
| 23 | +opacity:0; |
| 24 | +} |
| 25 | + 50% { |
| 26 | +-moz-transform:translate(30px); |
| 27 | +opacity:.5; |
| 28 | +} |
| 29 | + 100% { |
| 30 | +-moz-transform:translate(60px); |
| 31 | +opacity:1; |
| 32 | +} |
| 33 | +} |
| 34 | +@-o-keyframes animations { 0% { |
| 35 | +-o-transform:translate(0); |
| 36 | +opacity:0; |
| 37 | +} |
| 38 | + 50% { |
| 39 | +-o-transform:translate(30px); |
| 40 | +opacity:.5; |
| 41 | +} |
| 42 | + 100% { |
| 43 | +-o-transform:translate(60px); |
| 44 | +opacity:1; |
| 45 | +} |
| 46 | +} |
| 47 | +@-ms-keyframes animations { 0% { |
| 48 | +-ms-transform:translate(0); |
| 49 | +opacity:0; |
| 50 | +} |
| 51 | + 50% { |
| 52 | +-ms-transform:translate(30px); |
| 53 | +opacity:.5; |
| 54 | +} |
| 55 | + 100% { |
| 56 | +-ms-transform:translate(60px); |
| 57 | +opacity:1; |
| 58 | +} |
| 59 | +} |
| 60 | +@keyframes animations { 0% { |
| 61 | +transform:translate(0); |
| 62 | +opacity:0; |
| 63 | +} |
| 64 | + 50% { |
| 65 | +transform:translate(30px); |
| 66 | +opacity:.5; |
| 67 | +} |
| 68 | + 100% { |
| 69 | +transform:translate(60px); |
| 70 | +opacity:1; |
| 71 | +} |
| 72 | +} |
| 73 | +@-webkit-keyframes animations2 { 0% { |
| 74 | +opacity:0; |
| 75 | +} |
| 76 | + 40% { |
| 77 | +opacity:.8; |
| 78 | +} |
| 79 | + 45% { |
| 80 | +opacity:.3; |
| 81 | +} |
| 82 | + 50% { |
| 83 | +opacity:.8; |
| 84 | +} |
| 85 | + 55% { |
| 86 | +opacity:.3; |
| 87 | +} |
| 88 | + 60% { |
| 89 | +opacity:.8; |
| 90 | +} |
| 91 | + 100% { |
| 92 | +opacity:1; |
| 93 | +} |
| 94 | +} |
| 95 | +@-moz-keyframes animations2 { 0% { |
| 96 | +opacity:0; |
| 97 | +} |
| 98 | + 40% { |
| 99 | +opacity:.8; |
| 100 | +} |
| 101 | + 45% { |
| 102 | +opacity:.3; |
| 103 | +} |
| 104 | + 50% { |
| 105 | +opacity:.8; |
| 106 | +} |
| 107 | + 55% { |
| 108 | +opacity:.3; |
| 109 | +} |
| 110 | + 60% { |
| 111 | +opacity:.8; |
| 112 | +} |
| 113 | + 100% { |
| 114 | +opacity:1; |
| 115 | +} |
| 116 | +} |
| 117 | +@-o-keyframes animations2 { 0% { |
| 118 | +opacity:0; |
| 119 | +} |
| 120 | + 40% { |
| 121 | +opacity:.8; |
| 122 | +} |
| 123 | + 45% { |
| 124 | +opacity:.3; |
| 125 | +} |
| 126 | + 50% { |
| 127 | +opacity:.8; |
| 128 | +} |
| 129 | + 55% { |
| 130 | +opacity:.3; |
| 131 | +} |
| 132 | + 60% { |
| 133 | +opacity:.8; |
| 134 | +} |
| 135 | + 100% { |
| 136 | +opacity:1; |
| 137 | +} |
| 138 | +} |
| 139 | +@-ms-keyframes animations2 { 0% { |
| 140 | +opacity:0; |
| 141 | +} |
| 142 | + 40% { |
| 143 | +opacity:.8; |
| 144 | +} |
| 145 | + 45% { |
| 146 | +opacity:.3; |
| 147 | +} |
| 148 | + 50% { |
| 149 | +opacity:.8; |
| 150 | +} |
| 151 | + 55% { |
| 152 | +opacity:.3; |
| 153 | +} |
| 154 | + 60% { |
| 155 | +opacity:.8; |
| 156 | +} |
| 157 | + 100% { |
| 158 | +opacity:1; |
| 159 | +} |
| 160 | +} |
| 161 | +@keyframes animations2 { 0% { |
| 162 | +opacity:0; |
| 163 | +} |
| 164 | + 40% { |
| 165 | +opacity:.8; |
| 166 | +} |
| 167 | + 45% { |
| 168 | +opacity:.3; |
| 169 | +} |
| 170 | + 50% { |
| 171 | +opacity:.8; |
| 172 | +} |
| 173 | + 55% { |
| 174 | +opacity:.3; |
| 175 | +} |
| 176 | + 60% { |
| 177 | +opacity:.8; |
| 178 | +} |
| 179 | + 100% { |
| 180 | +opacity:1; |
| 181 | +} |
| 182 | +} |
| 183 | +.avatar { float: right; margin: 40px; width: 130px; height: 130px; border-radius: 100%; overflow: hidden; border: #FFF 4px solid } |
| 184 | +.avatar a { display: block; padding-top: 97px; width: 160px; background: url(../images/photos.jpg) no-repeat; background-size: 130px 130px } |
| 185 | +.avatar a span { display: block; margin-top: 63px; padding-top: 8px; width: 130px; height: 55px; text-align: center; line-height: 20px; color: #fff; background: rgba(0, 0, 0, .5); -webkit-transition: margin-top .2s ease-in-out; -moz-transition: margin-top .2s ease-in-out; -o-transition: margin-top .2s ease-in-out; transition: margin-top .2s ease-in-out; } |
| 186 | +.avatar a:hover span { display: block; margin-top: 0; } |
| 187 | +.template { background: #F1F0EE } |
| 188 | +.template h3 { border-bottom: #FFF 1px solid; width: 100%; overflow: hidden; font-size: 14px; margin: 0 0 10px; font-family: "΢ÈíÑźÚ"; display: block; clear: both; } |
| 189 | +.template h3 p { background: #474645; width: 180px; height: 25px; margin: 15px 0 0 10px; line-height: 25px; color: #fff; text-align: center; box-shadow: #999 4px 5px 1px; } |
| 190 | +.template h3 p span { color: #38b3d4; } |
| 191 | +.template ul { overflow: hidden; } |
| 192 | +.template ul li { margin: 3px; float: left; display: block; padding: 5px 5px 6px 5px; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; } |
| 193 | +.template li img { width: 142px; height: 80px; background: #FFF; padding: 4px; box-shadow: 0px 0px 2px rgba(0,0,0,.5); display: block; } |
| 194 | +.template li span { color: #F1F0EE; display: block; text-align: center; margin-top: 5px; width: 142px; overflow: hidden; text-overflow: ellipsis; height: 14px } |
| 195 | +.template li:hover { background: #666; padding: 5px 5px 6px 5px; } |
| 196 | +h2.title_tj { font: 18px "΢ÈíÑźÚ", Arial, Helvetica, sans-serif; color: #444; font-weight: bold; background: url(../images/h_line.jpg) repeat-x 20px center; } |
| 197 | +h2.title_tj span { color: #FE5187 } |
| 198 | +h2.title_tj p { background: #fff; width: 90px } |
| 199 | +.bloglist { width: 740px; overflow: hidden; background: url(../images/r_line.jpg) repeat-y right; } |
| 200 | +.bloglist h3 { margin: 20px 0 10px 0; color: #333 } |
| 201 | +.bloglist figure { float: left; width: 183px; } |
| 202 | +.bloglist figure img { padding: 4px; border: #f4f2f2 1px solid; width: 175px; } |
| 203 | +.bloglist ul { float: left; width: 520px; margin: 10px 0px 0 15px; line-height: 20px; } |
| 204 | +.dateview { width: 695px; overflow: hidden; clear: both; margin: 10px 0 0 0; display: inline-block; background: #f6f6f6 url(../images/time.jpg) 15px center no-repeat; line-height: 26px; height: 26px; color: #838383; padding-left: 25px } |
| 205 | +.dateview span { margin: 0 10px; } |
| 206 | +.dateview span a { color: #099B43; } |
| 207 | +a.readmore { background: #fd8a61; color: #fff; padding: 5px 10px; float: right; margin: 20px 0 0 0 } |
| 208 | +.weather { background: url(../images/weather_bg.jpg) no-repeat; height: 88px; margin: 20px 0;padding: 20px 0 0 75px; } |
| 209 | +.news h3 { font-size: 14px; background: url(../images/r_title_bg.jpg) repeat-x center } |
| 210 | +.news h3 p { background: #fff; width: 70px } |
| 211 | +.news h3 span { color: #65b020 } |
| 212 | +.news h3.ph span { color: #37ccca; } |
| 213 | +.news h3.links span { color: #F17B6B; } |
| 214 | +.news ul { margin-bottom: 20px } |
| 215 | +.news ul li a:hover { text-decoration: underline } |
| 216 | +.rank li { height: 25px; line-height: 25px; clear: both; padding-left: 5px; overflow: hidden; padding-left: 15px; background: url(../images/li.jpg) no-repeat left center; } |
| 217 | +.rank { margin: 10px 0 } |
| 218 | +.rank li a { color: #333; } |
| 219 | +.paih { background: url(../images/ph.jpg) no-repeat left 8px; margin: 10px 0 } |
| 220 | +.paih li { line-height: 30px; height: 30px; overflow: hidden; padding-left: 24px; border-bottom: #CCC dotted 1px } |
| 221 | +.website { margin: 10px 0; background: #F3F3F3; border-radius: 50%; text-align: center; } |
| 222 | +.website li { line-height: 26px; text-shadow: #fff 1px 1px 1px; height: 26px; } |
| 223 | +.weixin { background: url(../images/weixin.jpg) no-repeat; width: 100%; display: inline-block; height: 274px; overflow: hidden; margin: 10px 0; clear: both } |
| 224 | + |
0 commit comments