blob: 65de8883716b3c3a6a10a2838c5c515fab0fd300 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* Main
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
html{margin:0;padding:0;height:100%;font-size:1.25rem;background:#DDD;}
body{margin:0;padding:0;height:100%;font-size:1.00rem;display:flex;}
main{margin:auto;padding:1rem;background:#FFF;width:60rem;border:0.05rem solid #AAA;}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* Slideshow
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.slideshow {
display:flex;
width:100%;
height:30rem;
border:0.05rem solid #AAA;
}
.slideshow > ul,
.slideshow > div {
display:flex;
box-sizing:border-box;
align-items:center;
}
.slideshow > div {
width:5%;
background:#DDD;
justify-content:center;
cursor:pointer;
font-weight:600;
padding:0.25rem;
}
.slideshow > ul {
list-style:none;
margin:0;
padding:0;
width:90%;
border:0.05rem solid #AAA;
border-top:none;
border-bottom:none;
box-sizing:border-box;
z-index:0;
position:relative;
overflow:hidden;
}
.slideshow > ul > li {
transition:visibility 0.5s linear, opacity 0.5s linear;
position:absolute;
top:0;
padding:0.5rem;
box-sizing:border-box;
}
.slideshow > ul > li.show {
visibility:visible;
opacity:1;
}
.slideshow > ul > li.show img {
animation-name:animation;
animation-duration:0.5s;
animation-fill-mode:both;
}
.slideshow > ul > li.show.next img{
animation-name:nextAnimation;
}
.slideshow > ul > li.show.prev img{
animation-name:prevAnimation;
}
.slideshow > ul > li.hide {
visibility:hidden;
opacity:0;
}
/* The "object-fit" attribute is equivalent to "background-size". */
.slideshow > ul,
.slideshow > ul > li,
.slideshow > ul > li > img {
width:100%;
height:100%;
object-fit:contain;
background:#DDD;
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* Animation
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@keyframes animation {
0% {transform:translateY(-50rem);}
100%{transform:translateY(0);}
}
@keyframes prevAnimation {
0% {transform:translateX(-50rem);}
100%{transform:translateX(0);}
}
@keyframes nextAnimation {
0% {transform:translateX(50rem);}
100%{transform:translateX(0);}
}
|
