Просмотр файла css/style.css

Конкурс дизайнеров на 15000 рублей
контркультура падонки бабруйск
Размер файла: 8.14Kb 
  1. /* автор TheJove http://profiwm.ru/us2462 */
  2. .cb-slideshow,
  3. .cb-slideshow:after {
  4.     position: fixed;
  5.     width: 100%;
  6.     height: 100%;
  7.     top: 0px;
  8.     left: 0px;
  9.     z-index: 0;
  10. }
  11. .cb-slideshow:after {
  12.     content: '';
  13.     background: transparent url(../images/pattern.png) repeat top left;
  14. }
  15. .cb-slideshow li span {
  16.     width: 100%;
  17.     height: 100%;
  18.     position: absolute;
  19.     top: 0px;
  20.     left: 0px;
  21.     color: transparent;
  22.     background-size: cover;
  23.     background-position: 50% 50%;
  24.     background-repeat: none;
  25.     opacity: 0;
  26.     z-index: 0;
  27. 	-webkit-backface-visibility: hidden;
  28.     -webkit-animation: imageAnimation 36s linear infinite 0s;
  29.     -moz-animation: imageAnimation 36s linear infinite 0s;
  30.     -o-animation: imageAnimation 36s linear infinite 0s;
  31.     -ms-animation: imageAnimation 36s linear infinite 0s;
  32.     animation: imageAnimation 36s linear infinite 0s;
  33. }
  34. .cb-slideshow li div {
  35.     z-index: 1000;
  36.     position: absolute;
  37.     bottom: 10px;
  38.     left: 0px;
  39.     width: 100%;
  40.     text-align: right;
  41.     opacity: 0;
  42.     -webkit-animation: titleAnimation 36s linear infinite 0s;
  43.     -moz-animation: titleAnimation 36s linear infinite 0s;
  44.     -o-animation: titleAnimation 36s linear infinite 0s;
  45.     -ms-animation: titleAnimation 36s linear infinite 0s;
  46.     animation: titleAnimation 36s linear infinite 0s;
  47. }
  48. .cb-slideshow li div h3 {
  49.     font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
  50.     font-size: 160px;
  51.     padding: 0 30px;
  52.     line-height: 120px;
  53.     color: #8B0000;
  54. 	text-shadow: 0 -2px 0 #000000;
  55. }
  56. .cb-slideshow li div h2 {
  57.     font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
  58.     font-size: 50px;
  59.     padding: 0 5px;
  60.     line-height: 50px;
  61.     color: #000000;
  62. 	text-shadow: 0 -1px 0 #ffffff;
  63. }
  64. .cb-slideshow li:nth-child(1) span { background-image: url(../images/6.jpg) }
  65. .cb-slideshow li:nth-child(2) span {
  66.     background-image: url(../images/5.jpg);
  67.     -webkit-animation-delay: 6s;
  68.     -moz-animation-delay: 6s;
  69.     -o-animation-delay: 6s;
  70.     -ms-animation-delay: 6s;
  71.     animation-delay: 6s;
  72. }
  73. .cb-slideshow li:nth-child(3) span {
  74.     background-image: url(../images/4.jpg);
  75.     -webkit-animation-delay: 12s;
  76.     -moz-animation-delay: 12s;
  77.     -o-animation-delay: 12s;
  78.     -ms-animation-delay: 12s;
  79.     animation-delay: 12s;
  80. }
  81. .cb-slideshow li:nth-child(4) span {
  82.     background-image: url(../images/3.jpg);
  83.     -webkit-animation-delay: 18s;
  84.     -moz-animation-delay: 18s;
  85.     -o-animation-delay: 18s;
  86.     -ms-animation-delay: 18s;
  87.     animation-delay: 18s;
  88. }
  89. .cb-slideshow li:nth-child(5) span {
  90.     background-image: url(../images/2.jpg);
  91.     -webkit-animation-delay: 24s;
  92.     -moz-animation-delay: 24s;
  93.     -o-animation-delay: 24s;
  94.     -ms-animation-delay: 24s;
  95.     animation-delay: 24s;
  96. }
  97. .cb-slideshow li:nth-child(6) span {
  98.     background-image: url(../images/1.jpg);
  99.     -webkit-animation-delay: 30s;
  100.     -moz-animation-delay: 30s;
  101.     -o-animation-delay: 30s;
  102.     -ms-animation-delay: 30s;
  103.     animation-delay: 30s;
  104. }
  105. .cb-slideshow li:nth-child(2) div {
  106.     -webkit-animation-delay: 6s;
  107.     -moz-animation-delay: 6s;
  108.     -o-animation-delay: 6s;
  109.     -ms-animation-delay: 6s;
  110.     animation-delay: 6s;
  111. }
  112. .cb-slideshow li:nth-child(3) div {
  113.     -webkit-animation-delay: 12s;
  114.     -moz-animation-delay: 12s;
  115.     -o-animation-delay: 12s;
  116.     -ms-animation-delay: 12s;
  117.     animation-delay: 12s;
  118. }
  119. .cb-slideshow li:nth-child(4) div {
  120.     -webkit-animation-delay: 18s;
  121.     -moz-animation-delay: 18s;
  122.     -o-animation-delay: 18s;
  123.     -ms-animation-delay: 18s;
  124.     animation-delay: 18s;
  125. }
  126. .cb-slideshow li:nth-child(5) div {
  127.     -webkit-animation-delay: 24s;
  128.     -moz-animation-delay: 24s;
  129.     -o-animation-delay: 24s;
  130.     -ms-animation-delay: 24s;
  131.     animation-delay: 24s;
  132. }
  133. .cb-slideshow li:nth-child(6) div {
  134.     -webkit-animation-delay: 30s;
  135.     -moz-animation-delay: 30s;
  136.     -o-animation-delay: 30s;
  137.     -ms-animation-delay: 30s;
  138.     animation-delay: 30s;
  139. }
  140. .cb-slideshow li:nth-child(7) div {
  141.     -webkit-animation-delay: 30s;
  142.     -moz-animation-delay: 30s;
  143.     -o-animation-delay: 30s;
  144.     -ms-animation-delay: 30s;
  145.     animation-delay: 30s;
  146. }
  147. @-webkit-keyframes imageAnimation { 
  148. 	0% {
  149. 	    opacity: 0;
  150. 	    -webkit-animation-timing-function: ease-in;
  151. 	}
  152. 	8% {
  153. 	    opacity: 1;
  154. 	    -webkit-transform: scale(1.05);
  155. 	    -webkit-animation-timing-function: ease-out;
  156. 	}
  157. 	17% {
  158. 	    opacity: 1;
  159. 	    -webkit-transform: scale(1.1) rotate(3deg);
  160. 	}
  161. 	25% {
  162. 	    opacity: 0;
  163. 	    -webkit-transform: scale(1.1) rotate(3deg);
  164. 	}
  165. 	100% { opacity: 0 }
  166. }
  167. @-moz-keyframes imageAnimation { 
  168. 	0% {
  169. 	    opacity: 0;
  170. 	    -moz-animation-timing-function: ease-in;
  171. 	}
  172. 	8% {
  173. 	    opacity: 1;
  174. 	    -moz-transform: scale(1.05);
  175. 	    -moz-animation-timing-function: ease-out;
  176. 	}
  177. 	17% {
  178. 	    opacity: 1;
  179. 	    -moz-transform: scale(1.1) rotate(3deg);
  180. 	}
  181. 	25% {
  182. 	    opacity: 0;
  183. 	    -moz-transform: scale(1.1) rotate(3deg);
  184. 	}
  185. 	100% { opacity: 0 }
  186. }
  187. @-o-keyframes imageAnimation { 
  188. 	0% {
  189. 	    opacity: 0;
  190. 	    -o-animation-timing-function: ease-in;
  191. 	}
  192. 	8% {
  193. 	    opacity: 1;
  194. 	    -o-transform: scale(1.05);
  195. 	    -o-animation-timing-function: ease-out;
  196. 	}
  197. 	17% {
  198. 	    opacity: 1;
  199. 	    -o-transform: scale(1.1) rotate(3deg);
  200. 	}
  201. 	25% {
  202. 	    opacity: 0;
  203. 	    -o-transform: scale(1.1) rotate(3deg);
  204. 	}
  205. 	100% { opacity: 0 }
  206. }
  207. @-ms-keyframes imageAnimation { 
  208. 	0% {
  209. 	    opacity: 0;
  210. 	    -ms-animation-timing-function: ease-in;
  211. 	}
  212. 	8% {
  213. 	    opacity: 1;
  214. 	    -ms-transform: scale(1.05);
  215. 	    -ms-animation-timing-function: ease-out;
  216. 	}
  217. 	17% {
  218. 	    opacity: 1;
  219. 	    -ms-transform: scale(1.1) rotate(3deg);
  220. 	}
  221. 	25% {
  222. 	    opacity: 0;
  223. 	    -ms-transform: scale(1.1) rotate(3deg);
  224. 	}
  225. 	100% { opacity: 0 }
  226. }
  227. @keyframes imageAnimation { 
  228. 	0% {
  229. 	    opacity: 0;
  230. 	    animation-timing-function: ease-in;
  231. 	}
  232. 	8% {
  233. 	    opacity: 1;
  234. 	    transform: scale(1.05);
  235. 	    animation-timing-function: ease-out;
  236. 	}
  237. 	17% {
  238. 	    opacity: 1;
  239. 	    transform: scale(1.1) rotate(3deg);
  240. 	}
  241. 	25% {
  242. 	    opacity: 0;
  243. 	    transform: scale(1.1) rotate(3deg);
  244. 	}
  245. 	100% { opacity: 0 }
  246. }
  247. @-webkit-keyframes titleAnimation { 
  248. 	0% {
  249. 	    opacity: 0;
  250. 	    -webkit-transform: translateX(200px);
  251. 	}
  252. 	8% {
  253. 	    opacity: 1;
  254. 	    -webkit-transform: translateX(0px);
  255. 	}
  256. 	17% {
  257. 	    opacity: 1;
  258. 	    -webkit-transform: translateX(0px);
  259. 	}
  260. 	19% {
  261. 	    opacity: 0;
  262. 	    -webkit-transform: translateX(-400px);
  263. 	}
  264. 	25% { opacity: 0 }
  265. 	100% { opacity: 0 }
  266. }
  267. @-moz-keyframes titleAnimation { 
  268. 	0% {
  269. 	    opacity: 0;
  270. 	    -moz-transform: translateX(200px);
  271. 	}
  272. 	8% {
  273. 	    opacity: 1;
  274. 	    -moz-transform: translateX(0px);
  275. 	}
  276. 	17% {
  277. 	    opacity: 1;
  278. 	    -moz-transform: translateX(0px);
  279. 	}
  280. 	19% {
  281. 	    opacity: 0;
  282. 	    -moz-transform: translateX(-400px);
  283. 	}
  284. 	25% { opacity: 0 }
  285. 	100% { opacity: 0 }
  286. }
  287. @-o-keyframes titleAnimation { 
  288. 	0% {
  289. 	    opacity: 0;
  290. 	    -o-transform: translateX(200px);
  291. 	}
  292. 	8% {
  293. 	    opacity: 1;
  294. 	    -o-transform: translateX(0px);
  295. 	}
  296. 	17% {
  297. 	    opacity: 1;
  298. 	    -o-transform: translateX(0px);
  299. 	}
  300. 	19% {
  301. 	    opacity: 0;
  302. 	    -o-transform: translateX(-400px);
  303. 	}
  304. 	25% { opacity: 0 }
  305. 	100% { opacity: 0 }
  306. }
  307. @-ms-keyframes titleAnimation { 
  308. 	0% {
  309. 	    opacity: 0;
  310. 	    -ms-transform: translateX(200px);
  311. 	}
  312. 	8% {
  313. 	    opacity: 1;
  314. 	    -ms-transform: translateX(0px);
  315. 	}
  316. 	17% {
  317. 	    opacity: 1;
  318. 	    -ms-transform: translateX(0px);
  319. 	}
  320. 	19% {
  321. 	    opacity: 0;
  322. 	    -ms-transform: translateX(-400px);
  323. 	}
  324. 	25% { opacity: 0 }
  325. 	100% { opacity: 0 }
  326. }
  327. @keyframes titleAnimation { 
  328. 	0% {
  329. 	    opacity: 0;
  330. 	    transform: translateX(200px);
  331. 	}
  332. 	8% {
  333. 	    opacity: 1;
  334. 	    transform: translateX(0px);
  335. 	}
  336. 	17% {
  337. 	    opacity: 1;
  338. 	    transform: translateX(0px);
  339. 	}
  340. 	19% {
  341. 	    opacity: 0;
  342. 	    transform: translateX(-400px);
  343. 	}
  344. 	25% { opacity: 0 }
  345. 	100% { opacity: 0 }
  346. }
  347. /* Show at least something when animations not supported */
  348. .no-cssanimations .cb-slideshow li span{
  349. 	opacity: 1;
  350. }
  351. @media screen and (max-width: 1140px) { 
  352. 	.cb-slideshow li div h3 { font-size: 100px }
  353. }
  354. @media screen and (max-width: 600px) { 
  355. 	.cb-slideshow li div h3 { font-size: 50px }
  356. }