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

Line 225: Line 225:
 
ul.click_menu_checkbox input:checked ~ ul { display: block; }
 
ul.click_menu_checkbox input:checked ~ ul { display: block; }
  
−
.photo-show {
 
−
    height: 300px;
 
−
    margin: 30px auto;
 
−
    max-width: 100%;
 
−
    position: relative;
 
−
    width: 300px;
 
−
}
 
  
−
.photo-show img {
+
1
−
    animation: show 16s infinite;
+
2
−
    -webkit-animation: show 16s infinite;
+
3
−
    border-radius: 50%;
+
4
−
    height: auto;
+
5
−
    max-width: 100%;
+
6
−
    opacity: 0;
+
7
−
    position: absolute;  
+
8
 +
9
 +
10
 +
11
 +
12
 +
13
 +
14
 +
15
 +
16
 +
17
 +
18
 +
19
 +
20
 +
21
 +
22
 +
23
 +
24
 +
25
 +
26
 +
27
 +
28
 +
#css-slider {
 +
width: 300px;
 +
height: 200px;
 +
overflow: hidden;
 
}
 
}
−
 
+
   
−
 
+
.slide-item {
−
 
+
width: 300px;
−
@keyframes show {
+
height: 200px;
−
    0% {opacity:0}
+
float: left;
−
    5% {opacity:1}
+
position: relative;
−
    10% {opacity:1}
+
−
    20% {opacity:0}
+
−
  }
+
−
 
+
−
@-webkit-keyframes show {
+
−
    0% {opacity:0}
+
−
    5% {opacity:1}
+
−
    10% {opacity:1}
+
−
    20% {opacity:0}
+
 
}
 
}
−
 
+
−
 
+
−
 
+
.slider-wrapper {
−
.photo-show img:nth-of-type(1) {
+
width: 300%;
−
    animation-delay: 0s;
+
position: relative;
−
    -webkit-animation-delay: 0s;
+
left: 0;
 +
will-change: transform;
 +
animation: slider 10s infinite;
 
}
 
}
−
 
+
−
.photo-show img:nth-of-type(2) {
+
@keyframes slider {
−
    animation-delay: 2s;
+
  0% { transform: translateX(0); }
−
    -webkit-animation-delay: 2s;
+
  33% { transform: translateX(-300px); }
−
}
+
  66% { transform: translateX(-600px); }
−
 
+
  100% { transform: translateX(0); }
−
.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/ */
+
−
 
+
−
.middle-text p{
+
−
display:inline-block;
+
−
vertical-align:middle;
+
 
}
 
}
  

Revision as of 13:55, 30 October 2017