As a front end food chicken, recently, in the front of the mimicked the to write some simple cases, today is in pure CSS implements a round figure, mainly looked at the UP video for www.bilibili.com/video/BV1AT… The result is as follows:

After finishing, I thought if I could change it to automatic. This is still relatively simple to achieve. It is good to use cSS3 @keyframes and animation effect directly

/ /. Container ul. bigImage {position: absolute; top: 0; left: 0; width: 1000px; height: 400px; border: 5px solid transparent; background: url(.. /img/1.jpg) no-repeat; /* Background-size: contain; background-size: contain; / * the transition: all 0.5 s; */ animation: CarouselFigure-bigimage 10s alternate infinite; } /* Move box */.container ul. frame {position: absolute; left: 0; bottom: 4px; width: 200px; height: 80px; border: 5px solid salmon; */ * pointer-events: none; / /* pointer-events: none; / /* pointer-events: none; */ /* Transition: all 0.5s; */ animation: CarouseFigure-frame 10s alternate infinite; } @keyframes CarouselFigure-bigimage { 0%,3% { background-image: url(.. /img/1.jpg); } 25% { background-image: url(.. /img/2.jpg); } 50% { background-image: url(.. /img/3.jpg); } 75% { background-image: url(.. /img/4.jpg); } 100% { background-image: url(.. /img/5.jpg); } } @keyframes CarouseFigure-frame { 0%,3% { left: 0; } 25% { left: 200px; } 50% { left: 400px; } 75% { left: 600px; } 100% { left: 800px; }}Copy the code

0% and 3% are set mainly to stay in the first graph for a long time, if 0% will stay for a short time, in addition, alternate property is set to achieve switching back and forth, the effect is as follows:

Then it realizes the function of animation pause when the mouse is selected:

Container ul. frame:hover {animation-play-state: paused; } .container ul .frame:hover ~ .bigImage { animation-play-state: paused; }Copy the code

However, after the automatic play function is implemented, the previous function of automatically switching to the corresponding picture when selecting a picture cannot be realized. Moreover, to realize the animation pause function, the mouse capture of the moving box is restored:

*/ * pointer-events: none; / /* pointer-events: none; / /* pointer-events: none; * /Copy the code

Therefore, at present, the use of pure CSS can not be achieved at the same time the rotation of automatic playback and selected switching pictures, the current idea is that we may be able to reset the pseudo elements to cover, and so on to update