Difference between revisions of "Template:TokyoTech/css/main"

Line 224: Line 224:
 
ul.click_menu_checkbox ul { display: none; }
 
ul.click_menu_checkbox ul { display: none; }
 
ul.click_menu_checkbox input:checked ~ ul { display: block; }
 
ul.click_menu_checkbox input:checked ~ ul { display: block; }
 +
 +
.photo-show {
 +
    height: 440px;
 +
    margin: 30px auto;
 +
    max-width: 100%;
 +
    position: relative;
 +
    width: 440px;
 +
}
 +
 +
.photo-show img {
 +
    animation: show 16s infinite;
 +
    -webkit-animation: show 16s infinite;
 +
    border-radius: 50%;
 +
    height: auto;
 +
    max-width: 100%;
 +
    opacity: 0;
 +
    position: absolute;
 +
}
 +
 +
 +
 +
@keyframes show {
 +
    0% {opacity:0}
 +
    5% {opacity:1}
 +
    10% {opacity:1}
 +
    20% {opacity:0}
 +
}
 +
 +
@-webkit-keyframes show {
 +
    0% {opacity:0}
 +
    5% {opacity:1}
 +
    10% {opacity:1}
 +
    20% {opacity:0}
 +
}
 +
 +
 +
 +
.photo-show img:nth-of-type(1) {
 +
    animation-delay: 0s;
 +
    -webkit-animation-delay: 0s;
 +
}
 +
 +
.photo-show img:nth-of-type(2) {
 +
    animation-delay: 2s;
 +
    -webkit-animation-delay: 2s;
 +
}
 +
 +
.photo-show img:nth-of-type(3) {
 +
    animation-delay: 4s;
 +
    -webkit-animation-delay: 4s;
 +
}
 +
 +
.photo-show img:nth-of-type(4) {
 +
    animation-delay: 6s;
 +
    -webkit-animation-delay: 6s;
 +
}
 +
 +
.photo-show img:nth-of-type(5) {
 +
    animation-delay: 8s;
 +
    -webkit-animation-delay: 8s
 +
}
 +
 +
.photo-show img:nth-of-type(6) {
 +
    animation-delay: 10s;
 +
    -webkit-animation-delay: 10s;
 +
}
 +
 +
.photo-show img:nth-of-type(7) {
 +
    animation-delay: 12s;
 +
    -webkit-animation-delay: 12s;
 +
}
 +
.photo-show img:nth-of-type(8) {
 +
    animation-delay: 14s;
 +
    -webkit-animation-delay: 14s;
 +
}
 +
 +
 +
 +
.photo-show img {
 +
    transition: 0.2s;
 +
    -webkit-transition: 0.2s;
 +
}
 +
 +
.photo-show:hover img {
 +
    animation-play-state: paused;
 +
    -webkit-animation-play-state: paused;
 +
    border-radius: 0;
 +
}
 +
 +
/* Ref: https://q-az.net/slideshow-only-css/ */
  
 
</style>
 
</style>
  
 
</html>
 
</html>

Revision as of 13:32, 30 October 2017