This is the 6th day of my participation in the August More Text Challenge

In the previous article: frameless from zero to achieve a shuffling figure | more challenge, in August by Javascript and CSS configuration, implements a simple round figure.

Behind: pure CSS to achieve text flashing effect, pure CSS to do the effect of continuous rotation, learning the knowledge of CSS animation, including:

CSS animation is a transform associated with CSS transformations.

Therefore, this time we will try to implement a constantly playing caroute graph using ONLY CSS.

Implementation approach

Animation is used to achieve the effect of moving. There seem to be two feasible ways for specific changes:

  1. In animation, use CSS-transformContinuously translating the position of elements in the wheel broadcast map;
  2. In the animation, set different left values.

Implementation effect and code

One point worth noting is that you need to manually add a copy of the last image in the head of the wheel map, otherwise there will be obvious flashing effect.

The implementation effect is shown below (without shielding out-of-bounds elements) :

Bring on our Olympic champions!

<! DOCTYPEhtml>

<body class="center">
    <div style="flex: 1; height: 300px; z-index: 10; Box-shadow: inset 00 300px rgba(0, 0, 0, 0.99);" class="border">
        left
    </div>
    <div class="showbox border box-shadow">
        <div class="left border">
            左
        </div>
        <div class="right border">
            右
        </div>
        <div id="imgbox" class="center imgbox">
            <img class="myimg" src="https://cdn.pixabay.com/photo/2018/01/03/05/33/the-sun-3057622__340.jpg" />
            <img class="myimg" src="https://cdn.pixabay.com/photo/2021/07/29/20/23/mountains-6508015_960_720.jpg" />
            <img class="myimg" src="https://cdn.pixabay.com/photo/2021/07/29/21/03/cereals-6508088__340.jpg" />
            <img class="myimg" src="https://cdn.pixabay.com/photo/2018/01/03/05/33/the-sun-3057622__340.jpg" />
        </div>
    </div>
    <div  style="flex: 1; height: 300px; z-index: 10; Box-shadow: inset 00 300px rgba(0, 0, 0, 0.99);" >
        right
    </div>
</body>
<! -- <script> let a = 0 let max = 300 * 3; window.onload = function() { refresh(); } function refresh() { document.getElementById("imgbox").style.left = a + "px"; } function left() { a = (a-300)%max; refresh(); } function right () { a = (a+300)%max; refresh(); } </script> -->
<style>
    body {
        width: 100%;
        height: 100%;
        z-index: 0;
        /* background-color: rgba(0, 0, 0, 0.5); * /
        box-shadow: inset 0 0 300px rgba(0.0.0.0.1);
    }

    .center {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .showbox {
        width: 300px;
        height: 300px;
        /* background: chocolate; * /
        position: relative;
        overflow: visible;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        /* z-index: -1; * /
        opacity: 1;
    }

    .left {
        position: absolute;
        left: 0;
        top: 50%;
        cursor: pointer;
        background: blue;
        z-index: 100;
    }

    .right {
        position: absolute;
        right: 0;
        top: 50%;
        cursor: pointer;
        background: blue;
        z-index: 100;
    }

    .border {
        border: 1px solid black;
    }

    .centerimg {
        width: 100%;
        height: 100%;
    }

    .myimg {
        width: 300px;
        height: 300px;
        z-index: -1;
        opacity: 1;
        /* filter: alpha(opacity=60); * /
    }
    .imgbox {
        position: absolute;
        left: -600px;
        top: 0;
        z-index: -1;
        animation: slideshow 10s both infinite;
    }

    @keyframes slideshow {
        0% {
            left: -900px;
        }
        33% {
            left: -600px;
        }
        66% {
            left: -300px;
        }
        100% {
            left: 0; }}</style>

</html>
Copy the code