Line 186: | Line 186: | ||
} | } | ||
− | + | ||
− | . | + | .flashingprev, .flashingnext{ |
− | + | background:red; | |
+ | cursor: pointer; | ||
position: absolute; | position: absolute; | ||
top: 50%; | top: 50%; | ||
Line 194: | Line 195: | ||
padding: 16px; | padding: 16px; | ||
margin-top: -22px; | margin-top: -22px; | ||
− | color: | + | color: #fff; |
font-weight: bold; | font-weight: bold; | ||
font-size: 80px; | font-size: 80px; | ||
transition: 0.6s ease; | transition: 0.6s ease; | ||
border-radius: 0 3px 3px 0; | border-radius: 0 3px 3px 0; | ||
+ | animation-name: flash; | ||
+ | animation-duration: 1.8s; | ||
+ | animation-timing-function: linear; | ||
+ | animation-iteration-count: infinite; | ||
+ | |||
+ | /* Chrome 4+, Safari 4+, Opera 15+ */ | ||
+ | -webkit-animation-name: flash; | ||
+ | -webkit-animation-duration: 0.7s; | ||
+ | -webkit-animation-timing-function: linear; | ||
+ | -webkit-animation-iteration-count: infinite; | ||
+ | -webkit-box-shadow: 0 0 33px #B20000; | ||
+ | |||
+ | /* Firefox 5+ */ | ||
+ | -moz-animation-name: flash; | ||
+ | -moz-animation-duration: 0.7s; | ||
+ | -moz-animation-timing-function: linear; | ||
+ | -moz-animation-iteration-count: infinite; | ||
+ | -moz-box-shadow: 0 0 3px #B20000; | ||
} | } | ||
+ | |||
+ | @keyframes flash { | ||
+ | 0% { opacity: 1.0 } | ||
+ | 50% { opacity: 0.5 } | ||
+ | 100% { opacity: 1.0 } | ||
+ | } | ||
+ | |||
+ | /* Chrome 4+, Safari 4+, Opera 15+ */ | ||
+ | @-webkit-keyframes flash { | ||
+ | 0% { opacity: 1.0 } | ||
+ | 50% { opacity: 0.5 } | ||
+ | 100% { opacity: 1.0 } | ||
+ | } | ||
+ | |||
+ | /* Firefox 5+ */ | ||
+ | @-moz-keyframes flash { | ||
+ | 0% { opacity: 1.0 } | ||
+ | 50% { opacity: 0.5 } | ||
+ | 100% { opacity: 1.0 } | ||
+ | } | ||
+ | |||
+ | |||
/* Position the "next button" to the right */ | /* Position the "next button" to the right */ | ||
− | . | + | .flashingnext { |
right: 0; | right: 0; | ||
border-radius: 3px 0 0 3px; | border-radius: 3px 0 0 3px; | ||
Line 354: | Line 395: | ||
<div class="mySlides fade"> | <div class="mySlides fade"> | ||
<div class="numbertext">1 / 4</div> | <div class="numbertext">1 / 4</div> | ||
− | <img src="https://static.igem.org/mediawiki/2017/c/c3/Cuhk_secondpage.PNG" width=" | + | <img src="https://static.igem.org/mediawiki/2017/c/c3/Cuhk_secondpage.PNG" width="100%" > |
</div> | </div> | ||
Line 360: | Line 401: | ||
<div class="mySlides fade"> | <div class="mySlides fade"> | ||
<div class="numbertext">2 / 4</div> | <div class="numbertext">2 / 4</div> | ||
− | <img src="https://static.igem.org/mediawiki/2017/7/77/Cuhk_thirdpage.PNG" width=" | + | <img src="https://static.igem.org/mediawiki/2017/7/77/Cuhk_thirdpage.PNG" width="100%" > |
</div> | </div> | ||
Line 366: | Line 407: | ||
<div class="mySlides fade"> | <div class="mySlides fade"> | ||
<div class="numbertext">3 / 4</div> | <div class="numbertext">3 / 4</div> | ||
− | <img src="https://static.igem.org/mediawiki/2017/2/27/Cuhk_forthpage.PNG" width=" | + | <img src="https://static.igem.org/mediawiki/2017/2/27/Cuhk_forthpage.PNG" width="100%" > |
</div> | </div> | ||
Line 372: | Line 413: | ||
<div class="mySlides fade"> | <div class="mySlides fade"> | ||
<div class="numbertext">4 / 4</div> | <div class="numbertext">4 / 4</div> | ||
− | <img src="https://static.igem.org/mediawiki/2017/6/6b/Cuhk_finalpage.PNG" width=" | + | <img src="https://static.igem.org/mediawiki/2017/6/6b/Cuhk_finalpage.PNG" width="100%" > |
<div class="text">Caption Five</div> | <div class="text">Caption Five</div> | ||
</div> | </div> | ||
− | < | + | <span class="flashingprev" onclick="plusSlides(-1)">❮</span> |
− | < | + | <span class="flashingnext" onclick="plusSlides(1)">❯</span> |
+ | |||
</div> | </div> |
Revision as of 16:42, 17 July 2017