互動式動畫練習

				
					
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BigFish</title>
    
<style>
 


    .wave{
        height: 150px;
    }

.waveleft{
    animation: wave 5s ease-in-out alternate infinite;
}

@keyframes wave {
    to{
        transform: translateX(-50px);
    }
    
}

.waveright{
    animation: waver 5s ease-in-out alternate infinite;
}

@keyframes waver {
    to{
        transform: translateX(50px);/*海浪的動畫*/
    }
    
}

.wave{
    margin-bottom:-80px;
}

.scene{
    width: 80%;
    display: grid;
    justify-content: center;
    align-content: center;
    overflow: hidden;
}

   .boat{
    display: grid;
    justify-content: center;
    align-content: center;
    height:0;
    animation-name: boa;
    animation-duration: 2s;
    animation-timing-function:ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes boa {
    30%{
        transform: translateY(-10px) rotateZ(10deg);/*船的動畫*/
    }
    60%{
        transform: translateY(-20px) rotateZ(-5deg);/*rotateZ 旋轉的幅度*/
    }
}

.boatimg{
    width:150px;
    cursor: pointer;
}


.fishdiv{
    display: grid;
    justify-content: center;
    width: 100%;
    height:0;
    animation-name: fishani;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes fishani {
    to{
        transform: translateY(50px);
    }
}

.fishimg{
    margin-bottom:-450px;/*定位魚*/
    margin-right: -300px;
    height:300px;
}

.fishimg.active{
    animation-name: fishjump;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-direction:alternate;
    animation-timing-function: ease-in-out;
}

@keyframes fishjump {
    50%{
        transform: translateY(-350px) rotateZ(360deg);/*魚跳起來的動畫 Y 跳多高 rotateZ 轉多少圈*/
    }to{
        transform: translateY(0px) rotateZ(720deg);/*魚跳起來的動畫 Y 跳多高 rotateZ 轉多少圈*/
    }
}



</style>


</head>
<body data-rsssl=1>

    <div class="scene">


    <div class="waveleft wave" style="z-index: 1;">
        <img src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png" class="wave jetpack-lazy-image" data-lazy-src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png?is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"><noscript><img src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png" class="wave"></noscript><!--一條海浪-->
    </div>
    <div class="waveright wave" style="z-index: 1;">
        <img src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png" class="wave jetpack-lazy-image" data-lazy-src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png?is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"><noscript><img src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png" class="wave"></noscript><!--一條海浪-->
    </div>
    <div class="waveleft wave" style="z-index: 1;">
        <img src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png" class="wave jetpack-lazy-image" data-lazy-src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png?is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"><noscript><img src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png" class="wave"></noscript><!--一條海浪-->
    </div>
    <div class="fishdiv" style="z-index: 2;">
        <img src="https://www.daconote.com/wp-content/uploads/2022/01/bigfish.png" class="fishimg jetpack-lazy-image" id="bigfish" data-lazy-src="https://www.daconote.com/wp-content/uploads/2022/01/bigfish.png?is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"><noscript><img src="https://www.daconote.com/wp-content/uploads/2022/01/bigfish.png" class="fishimg" id="bigfish"></noscript><!--一條魚-->
    </div>
    <div class="waveright wave" style="z-index: 3;">
        <img src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png" class="wave jetpack-lazy-image" data-lazy-src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png?is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"><noscript><img src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png" class="wave"></noscript><!--一條海浪-->
    </div>
    <div class="boat" style="z-index: 4;padding-right: 220px;">
        <img src="https://www.daconote.com/wp-content/uploads/2022/01/boat.png" class="boatimg jetpack-lazy-image" onClick="jumpfish();" data-lazy-src="https://www.daconote.com/wp-content/uploads/2022/01/boat.png?is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"><noscript><img src="https://www.daconote.com/wp-content/uploads/2022/01/boat.png" class="boatimg" onClick="jumpfish();"></noscript><!--一條船-->
    </div>
    <div class="waveleft wave" style="z-index: 5;">
        <img src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png" class="wave jetpack-lazy-image" data-lazy-src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png?is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"><noscript><img src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png" class="wave"></noscript><!--一條海浪-->
    </div>
    <div class="waveright wave" style="z-index: 5;">
        <img src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png" class="wave jetpack-lazy-image" data-lazy-src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png?is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"><noscript><img src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png" class="wave"></noscript><!--一條海浪-->
    </div>
    <div class="waveleft wave" style="z-index: 5;">
        <img src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png" class="wave jetpack-lazy-image" data-lazy-src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png?is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"><noscript><img src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png" class="wave"></noscript><!--一條海浪-->
    </div>
    <div class="waveright wave" style="z-index: 5;">
        <img src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png" class="wave jetpack-lazy-image" data-lazy-src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png?is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"><noscript><img src="https://www.daconote.com/wp-content/uploads/2022/01/wave.png" class="wave"></noscript><!--一條海浪-->
    </div>

    </div>

<script>
    function jumpfish() {
            document.getElementById("bigfish").classList.add("active");
            setTimeout(function () { document.getElementById("bigfish").classList.remove("active"); }, 4000); //延遲 4s 後移除 CSS active
        }

</script>


</body>
</html>