How to use pure CSS to achieve abstract rippling water animation (source code attached)

The content of this article is about how to use pure CSS to realize abstract rippling water animation (source code attached). It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. Helps.

Effect preview

##Source code download

https:/ /github.com/comehope/front-end-daily-challenges

Code interpretation

Define dom, the container contains 9 elements:

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

Centered display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

Define the container size:

.container {
    width: 30em;
    height: 30em;
    font-size: 10px;
}

Use grid layout to arrange the 9 sub-elements into a 3 * 3 grid:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

Set the style of the sub-elements in the container through pseudo Elements are set:

.container span {
    position: relative;
}

.container span::before,
.container span::after 
{
    content: '';
    position: absolute;
    box-sizing: border-box;
    border-style: none solid solid none;
    border-width: 1em;
    border-color: gold;
    width: 100%;
    height: 100%;
}

Rotate the container so that its tip points upward:

.container {
    transform: rotate(-135deg);
}

Increase the animation of the size of the child element changing from small to large:

.container span::before,
.container span::after 
{
    animation: 
        animate-scale 1.6s linear infinite;
}

@keyframes animate-scale {
    from {
        width: 1%;
        height: 1%;
    }

    to {
        width: 100%;
        height: 100%;
    }
}

Add the child Animation for changing element border color:

.container span::before,
.container span::after 
{
    animation: 
        animate-border-color 1.6s linear infinite,
        animate-scale 1.6s linear infinite;
}

@keyframes animate-border-color {
    0%, 25% {
        border-color: tomato;
    }

    50%, 75% {
        border-color: gold;
    }

    100% {
        border-color: black;
    }
}

Add animation for changing child element border width:

.container span::before,
.container span::after 
{
    animation: 
        animate-border-width 1.6s linear infinite,
        animate-border-color 1.6s linear infinite,
        animate-scale 1.6s linear infinite;
}

Finally, let

::after slow down the animation time of the pseudo element by half a beat :

.container span::after {
    animation-delay: -0.8s;
}

@keyframes animate-border-width {
    0%, 100%{
        border-width: 0.1em;
    }

    25% {
        border-width: 1.5em;
    }
}

Done!

The above is the detailed content of How to use pure CSS to achieve abstract rippling water animation (source code attached). For more information, please follow other related articles on the PHP Chinese website!