Home>
<!-strip at the top of the screen->
<!-Slide display frame->
<!-Feed button radio button->
<input type = "radio" name = "gal"><input type = "radio" name = "gal">
<input type = "radio" name = "gal"><input type = "radio" name = "gal">
<input type = "radio" name = "gal"><input type = "radio" name = "gal">
<!-Slide group->
<!-Slide 1->
<!-Slide photo and current slide indication button->
<!-
<!-Associate feed button display with radio button->
<label for = "back1"><span><</span></label>
<label for = "next1"><span >>></span></label>
<!-->
<label for = "back2"><span><</span></label>
<label for = "next2"><span >></span></label>
<!-->
<label for = "back1"><span><</span></label>
<label for = "next1"><span >>></span></label>
<!-Ensuring the height of the stage->
/* strip at the top of the screen * /
#top_belt {max-width: 400px;height: 15px;background: #fff;margin: 30px auto 0 auto;}
/ * Container for the entire slider * /
#stage {
position: relative;
max-width: 400px;
height: 323px;
margin: 0 auto;
background: #fff;
overflow: hidden;
}
/ * Hide all radio buttons * /
# r1, # r2, # r3, # r4, # r5, # back1, # back2, # back3, # back4, # back5, # next1, # next2, # next3, # next4, # next5 {
display: none;
}
/ * Display switching button and display position * /
.circ img {
position: absolute;
bottom: 2.5%;
cursor: pointer;
}
# lb1 img {left: 40%;width: 3%;}
# lb2 img {left: 43%;width: 3%;}
# lb3 img {left: 46%;width: 3%;}
/ * Left/right feed button * /
.pb, .nb {color: # 666;font-weight: bold;font-size: 10px;display: block;position: absolute;top: 45%;/* z-index: 200;pointer-events: auto;* /}
.pb {left: 0%;}.nb {left: 96%;}
.pb: hover, .nb: hover {color: orange;cursor: pointer;}
/ * Size when stage is below initial size * /
@media screen and (max-width: 660px) {.pb, .nb {font-size: 18px;}}
/ * Container for all slides * /
#photos {
position: absolute;
width: 100%;
height: 90%;/* 100%;* /
left: 4.55%;
opacity: 0;
/ * pointer-events: none;* /
animation: flowSlides 32s infinite;
}
/ * Individual slide/current slide indication button * /
.pic {
position: absolute;
width: 100%;
height: 100%;
}
.pic img: nth-child (1) {width: 90.9%;margin-left: 4.55%;}
.pic img: nth-child (2) {width: 3%;bottom: -8.5%;/*2.5%;*/}
/ * Display slides side by side in photos * /
# photo1 {left: 0;}
# photo2 {left: 660px;}
# photo3 {left: 1320px;}
/ * Left/right feed button
# back1: checked ~ #photos {animation: flowSlides3 40s infinite;animation-delay: -32s;}
# back2: checked ~ #photos {animation: flowSlides1 40s infinite;animation-delay: 0s;}
# back3: checked ~ #photos {animation: flowSlides2 40s infinite;animation-delay: -8s;}
# next1: checked ~ #photos {animation: flowSlides2 40s infinite;animation-delay: -8s;}
# next2: checked ~ #photos {animation: flowSlides3 40s infinite;animation-delay: -16s;}
# next3: checked ~ #photos {animation: flowSlides1 40s infinite;animation-delay: -24s;}
/ * Initial slide show * /
@keyframes flowSlides {
0% {left: 0px;opacity: 0;}
2% {left: 0px;opacity: 1;}
18% {left: 0px;opacity: 1;}
20% {left: 0px;opacity: 0;}
20.01% {left: -660px;opacity: 0;}
22% {left: -660px;opacity: 1;}
38% {left: -660px;opacity: 1;}
40% {left: -660px;opacity: 0;}
40.01% {left: -1320px;opacity: 0;}
42% {left: -1320px;opacity: 1;}
58% {left: -1320px;opacity: 1;}
60% {left: -1320px;opacity: 0;}
60.01% {left: -1980px;opacity: 0;}
62% {left: -1980px;opacity: 1;}
78% {left: -1980px;opacity: 1;}
80% {left: -1980px;opacity: 0;}
80.01% {left: -2640px;opacity: 0;}
82% {left: -2640px;opacity: 1;}
98% {left: -2640px;opacity: 1;}
100% {left: -2640px;opacity: 0;}
}
/ * Slide show for each slide * /
@keyframes flowSlides1 {
0% {left: 0px;opacity: 0;}
2% {left: 0px;opacity: 1;}
18% {left: 0px;opacity: 1;}
20% {left: 0px;opacity: 0;}20.01% {left: -660px;opacity: 0;}
22% {left: -660px;opacity: 1;}
38% {left: -660px;opacity: 1;}
40% {left: -660px;opacity: 0;}
40.01% {left: -1320px;opacity: 0;}
42% {left: -1320px;opacity: 1;}
58% {left: -1320px;opacity: 1;}
60% {left: -1320px;opacity: 0;}
60.01% {left: -1980px;opacity: 0;}
62% {left: -1980px;opacity: 1;}
78% {left: -1980px;opacity: 1;}
80% {left: -1980px;opacity: 0;}
80.01% {left: -2640px;opacity: 0;}
82% {left: -2640px;opacity: 1;}
98% {left: -2640px;opacity: 1;}
100% {left: -2640px;opacity: 0;}
}
@keyframes flowSlides2 {
0% {left: 0px;opacity: 0;}
2% {left: 0px;opacity: 1;}
18% {left: 0px;opacity: 1;}
20% {left: 0px;opacity: 0;}
20.01% {left: -660px;opacity: 0;}
22% {left: -660px;opacity: 1;}
38% {left: -660px;opacity: 1;}
40% {left: -660px;opacity: 0;}
40.01% {left: -1320px;opacity: 0;}
42% {left: -1320px;opacity: 1;}
58% {left: -1320px;opacity: 1;}
60% {left: -1320px;opacity: 0;}
60.01% {left: -1980px;opacity: 0;}
62% {left: -1980px;opacity: 1;}
78% {left: -1980px;opacity: 1;}
80% {left: -1980px;opacity: 0;}
80.01% {left: -2640px;opacity: 0;}
82% {left: -2640px;opacity: 1;}
98% {left: -2640px;opacity: 1;}
100% {left: -2640px;opacity: 0;}
}
@keyframes flowSlides3 {
0% {left: 0px;opacity: 0;}
2% {left: 0px;opacity: 1;}
18% {left: 0px;opacity: 1;}
20% {left: 0px;opacity: 0;}
20.01% {left: -660px;opacity: 0;}
22% {left: -660px;opacity: 1;}
38% {left: -660px;opacity: 1;}
40% {left: -660px;opacity: 0;}
40.01% {left: -1320px;opacity: 0;}
42% {left: -1320px;opacity: 1;}
58% {left: -1320px;opacity: 1;}
60% {left: -1320px;opacity: 0;}
60.01% {left: -1980px;opacity: 0;}
62% {left: -1980px;opacity: 1;}
78% {left: -1980px;opacity: 1;}
80% {left: -1980px;opacity: 0;}
80.01% {left: -2640px;opacity: 0;}
82% {left: -2640px;opacity: 1;}
98% {left: -2640px;opacity: 1;}
100% {left: -2640px;opacity: 0;}
}
-
Answer # 1
Related articles
- css3 - [font awesome 5] is it possible to overlay images when using it as content :?
- css3 - svg i want to make the start time of the border animation earlier
- css3 - with @keyframes and animation, i want to add a background color that moves by the length of the text
- css3 - html css is responsive and displays huge images
- javascript - how to apply animation only to images
- i want to draw a circle with animation using only css3
- css3 - i want to arrange images side by side with flexbox, but it doesn't work for some reason
- css3 - how to display 5 images side by side with display: flex;
- css3 - about web page animation
- css3 - images displayed in chrome are not displayed in ie
- css3 - should the top page of the lp be created in code or better with images?
- css3 - i want to arrange 2x2 images like trapezoids
- css3 - to center images of different widths vertically
- css3 - i want to align the images moved to the right vertically
- css3 - keyframe animation is introduced, but the background can be cut off
- css3 - display/hide in animation does not work
- css3 - some images cannot be displayed as background images
- css3 - i want to centralize a set of images and text together
- css3 - i want to place images at specific positions to make them responsive
Related questions
- html : Is it possible to make the site open on a larger scale?
- jquery - i want to change the font size of the pull-down menu
- html - i want to arrange them side by side by adjusting the width
- html - media query specification does not work
- html - the contents of the li tag do not fit in the li
- html - does not fit in the body
- questions about combining html css animation @keyframes and javascript
- ruby - i want to write css that displays buttons by tapping
- css3 - i want to align both the image and the text (the image with the text below the image) side by side in the center
- javascript - in the accordion menu, i want to manage to open all of them when i open one
Changed the percentage in ① to the percentage in ②
①
@keyframes flowSlides {
0% {left: 0px;opacity: 0;}
2% {left: 0px;opacity: 1;}
18% {left: 0px;opacity: 1;}
20% {left: 0px;opacity: 0;}
20.01% {left: -660px;opacity: 0;}
22% {left: -660px;opacity: 1;}
38% {left: -660px;opacity: 1;}
40% {left: -660px;opacity: 0;}
40.01% {left: -1320px;opacity: 0;}
42% {left: -1320px;opacity: 1;}
58% {left: -1320px;opacity: 1;}
60% {left: -1320px;opacity: 0;}
60.01% {left: -1980px;opacity: 0;}
62% {left: -1980px;opacity: 1;}
78% {left: -1980px;opacity: 1;}
80% {left: -1980px;opacity: 0;}
80.01% {left: -2640px;opacity: 0;}
82% {left: -2640px;opacity: 1;}
98% {left: -2640px;opacity: 1;}
100% {left: -2640px;opacity: 0;}
②
@keyframes flowSlides {
0% {left: 0px;opacity: 0;}
2% {left: 0px;opacity: 1;}
31% {left: 0px;opacity: 1;}
33% {left: 0px;opacity: 0;}
33.01% {left: -660px;opacity: 0;}
35% {left: -660px;opacity: 1;}
64% {left: -660px;opacity: 1;}
66% {left: -660px;opacity: 0;}
66.01% {left: -1320px;opacity: 0;}
68% {left: -1320px;opacity: 1;}
98% {left: -1320px;opacity: 1;}
100% {left: -1320px;opacity: 0;}