Hayley jesse (Talk | contribs) |
Hayley jesse (Talk | contribs) |
||
Line 448: | Line 448: | ||
</style> | </style> | ||
+ | @Image Slider CSS3 { | ||
+ | |||
+ | 0% { | ||
+ | Left: 0; | ||
+ | } | ||
+ | |||
+ | 20% { | ||
+ | Left: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | 25% { | ||
+ | Left: -100%; | ||
+ | } | ||
+ | |||
+ | 45% { | ||
+ | Left: -100%; | ||
+ | |||
+ | } | ||
+ | |||
+ | 50% { | ||
+ | Left: -200%; | ||
+ | |||
+ | } | ||
+ | |||
+ | 70% { | ||
+ | Left: -200%; | ||
+ | } | ||
+ | |||
+ | 75% { | ||
+ | Left: -300%; | ||
+ | } | ||
+ | |||
+ | 95% { | ||
+ | Left: -400%; | ||
+ | } | ||
+ | |||
+ | 100% { | ||
+ | Left: -400%' | ||
+ | |||
+ | } | ||
+ | |||
+ | #slider { | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | #slider figure img { | ||
+ | width:20%; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | #slider figure { | ||
+ | position: relative; | ||
+ | width: 500%; | ||
+ | margin: 0; | ||
+ | left: 0; | ||
+ | text-align: left; | ||
+ | font-size: 0; | ||
+ | animation: 20s slider infinite; | ||
+ | |||
+ | } | ||
<!--- THIS IS WHERE THE HTML BEGINS ---> | <!--- THIS IS WHERE THE HTML BEGINS ---> | ||
Line 761: | Line 822: | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
Revision as of 18:17, 6 June 2017
@Image Slider CSS3 { 0% { Left: 0; } 20% { Left: 0; } 25% { Left: -100%; } 45% { Left: -100%; } 50% { Left: -200%; } 70% { Left: -200%; } 75% { Left: -300%; } 95% { Left: -400%; } 100% { Left: -400%' } #slider { overflow: hidden; } #slider figure img { width:20%; float: left; } #slider figure { position: relative; width: 500%; margin: 0; left: 0; text-align: left; font-size: 0; animation: 20s slider infinite; }
}