Line 149: | Line 149: | ||
#colorNav li.red{background-color:#f00000;color:#000000;} | #colorNav li.red{background-color:#f00000;color:#000000;} | ||
#colorNav li.grey{background-color:#d3d3d3;color:#000000;} | #colorNav li.grey{background-color:#d3d3d3;color:#000000;} | ||
+ | |||
+ | .simple-ss { | ||
+ | width:800px; | ||
+ | height:250px; | ||
+ | background-color:red; | ||
+ | margin:auto; | ||
+ | background-image:url("http://www.mediafire.com/convkey/4989/2l919s6cqg2vm826g.jpg"); | ||
+ | background-position:0; | ||
+ | background-repeat:no-repeat; | ||
+ | background-size:cover; | ||
+ | |||
+ | /* ANIMATING STUFF */ | ||
+ | animation-name: slide; | ||
+ | animation-duration: 13s; | ||
+ | animation-direction: normal; | ||
+ | animation-timing-function: ease; | ||
+ | animation-iteration-count: infinite; | ||
+ | } | ||
+ | |||
+ | /* NOTE CODEPEN AUTOGENERATING -PREFIXES */ | ||
+ | @keyframes slide { | ||
+ | 0% {background-position:0 0;} | ||
+ | 16.66% {background-position:0 0;} | ||
+ | 33.32% {background-position:-800px 0;} | ||
+ | 49.98% {background-position:-800px 0;} | ||
+ | 66.64% {background-position:-1600px 0;} | ||
+ | 83.30% {background-position:-1600px 0;} | ||
+ | 100% {background-position:0 0;} | ||
+ | } | ||
</style> | </style> | ||
</html> | </html> |
Revision as of 12:10, 3 October 2016