Difference between revisions of "Team:LUBBOCK TTU/test6"
(Blanked the page) |
|||
| Line 1: | Line 1: | ||
| + | {{LUBBOCK_TTU}} | ||
| + | <html> | ||
| + | <style> | ||
| + | HTML CSS Result | ||
| + | EDIT ON | ||
| + | h1, | ||
| + | p { | ||
| + | text-align: center; | ||
| + | } | ||
| + | |||
| + | .outer { | ||
| + | display:block; | ||
| + | width: 200px; | ||
| + | height: 200px; | ||
| + | margin: 20px auto; | ||
| + | border: 1px solid #000; | ||
| + | box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); | ||
| + | overflow:hidden; | ||
| + | position:relative; | ||
| + | } | ||
| + | |||
| + | .inner { | ||
| + | width: 800px; | ||
| + | height: 200px; | ||
| + | cursor:pointer; | ||
| + | display:block; | ||
| + | background: url(https://www.pmob.co.uk/temp/images/zimg1.jpg) 0 0, url(https://www.pmob.co.uk/temp/images/zimg2.jpg) 200px 0, url(https://www.pmob.co.uk/temp/images/zimg3.jpg) 400px 0, url(https://www.pmob.co.uk/temp/images/zimg4.jpg) 600px 0; | ||
| + | background-repeat: no-repeat; | ||
| + | background-size: 200px 200px; | ||
| + | } | ||
| + | .outer:hover .inner,.outer:focus .inner{ | ||
| + | animation:swap 8s linear infinite; | ||
| + | } | ||
| + | .outer:focus{ | ||
| + | border:2px solid red; | ||
| + | } | ||
| + | @keyframes swap{ | ||
| + | 0%{transform:translateX(-200px)} | ||
| + | 24.999%{transform:translateX(-200px)} | ||
| + | 25%{transform:translateX(-400px)} | ||
| + | 49.999%{transform:translateX(-400px)} | ||
| + | 50%{transform:translateX(-600px)} | ||
| + | 74.999%{transform:translateX(-600px)} | ||
| + | 75%{transform:translateX(0)} | ||
| + | 99.999%{transform:translateX(0)} | ||
| + | } | ||
| + | </style> | ||
| + | |||
| + | <h1>Image swap</h1> | ||
| + | <p>Hover over the image to show various images</p> | ||
| + | <a href="#" class="outer"> | ||
| + | <span class="inner"> | ||
| + | </span> | ||
| + | </a> | ||
| + | </html> | ||
Revision as of 22:12, 25 May 2017
