CSS動畫實現(xiàn)跳動的足球(瘋狂世界杯)

發(fā)布時間：2023-01-04 16:15:31 作者：館主阿牛

2022卡塔爾世界杯正在如火如荼的進(jìn)行之中，作為“諸神的黃昏”，本屆世界杯備受矚目，足壇巔峰老將c羅，梅西，內(nèi)馬爾也將隨本次世界杯退役，一代人的青春到此結(jié)束！本篇我將用css動畫寫一個簡單的跳動的足球，適合初學(xué)者練習(xí)css動畫，趕緊學(xué)起來吧

前言

2022卡塔爾世界杯正在如火如荼的進(jìn)行之中，作為“諸神的黃昏”，本屆世界杯備受矚目，足壇巔峰老將c羅，梅西，內(nèi)馬爾也將隨本次世界杯退役，一代人的青春到此結(jié)束！本篇博客我將用css動畫寫一個簡單的跳動的足球，適合初學(xué)者練習(xí)css動畫，趕緊學(xué)起來吧！

最終效果

請?zhí)砑訄D片描述

思路分析

這個效果的布局我是采用flex布局，素材都是背景圖片的方式，這些都沒啥可講的，自己去看代碼即可！
重點分析一下這個動畫，可以將這個效果分解為兩個動畫：

小球的動畫

可以看到小球有個向上跳動的動畫，同時在向上跳動的時候資深換有個旋轉(zhuǎn)！

陰影的動畫

陰影有個透明度和縮放的變化。

需要注意的是，小球的動畫和陰影的動畫所消耗的時間是一樣的，這樣才能保持動畫的同步。
還需要注意的是，第二個小球和第三個小球有個動畫延遲的效果！

下面就分別來看看這兩個簡單動畫的實現(xiàn)代碼吧！

小球的動畫

/*小球跳動的動畫*/
 @keyframes move{
     from{
         transform: translateY(0) rotate(0);
     }
     to{
         transform: translateY(-350px) rotate(-360deg);
     }
 }

由代碼可以看到向上移動了350px，移動的同時逆時針旋轉(zhuǎn)360度！
需要注意的是：移動 translate 一定要放在旋轉(zhuǎn) rotate 的前面！

陰影的動畫

/*陰影變化的動畫*/
 @keyframes shadowMove{
     0%{
         opacity: 0.5;
         transform: scale(0.75);
     }
     100%{
         opacity: 0.2;
         transform: scale(1);
     }
 }

由初態(tài)到終態(tài)，透明度逐漸增大，縮放逐漸恢復(fù)！

代碼及素材獲取

代碼

<!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>跳動的足球</title>
    <style>
        body{
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content:center;
            align-items:flex-end;
            background: url(img/780.jpg) 0 -100px;
        }
        .box{
            width: 350px;
            height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .ball{
            width: 100px;
            height:100px;
            background: url("img/782.jpg");
            background-size: 100px 100px;
            border-radius: 100%;
            animation: move 1s infinite alternate; /*infinite無限循環(huán)，alternate動畫反向執(zhí)行回到起點*/
        } 
        /*小球跳動的動畫*/
        @keyframes move{
            from{
                transform: translateY(0) rotate(0);
            }
            to{
                transform: translateY(-350px) rotate(-360deg);
            }
        }
        .shadow{
            width:150px;
            height: 40px;
            background-color: #000;
            border-radius: 100%;
            opacity: 0.5;
            margin-top: -10px;
            animation: shadowMove 1s infinite alternate; /*infinite無限循環(huán)，alternate動畫反向執(zhí)行回到起點*/
        }
        /*陰影變化的動畫*/
        @keyframes shadowMove{
            0%{
                opacity: 0.5;
                transform: scale(0.75);
            }
            100%{
                opacity: 0.2;
                transform: scale(1);
            }
        }
        /* 第二個球動畫延遲0.2秒 */
        .second .ball,.second .shadow{
            animation-delay: 0.2s;
        }
        /* 第三個球動畫延遲0.5秒 */
        .thrid .ball,.thrid .shadow{
            animation-delay: 0.5s;
        }  
    </style>
</head>
<body>
    <div class="box">
        <div class="ball"></div>
        <div class="shadow"></div>
    </div>
    <div class="box second">
        <div class="ball"></div>
        <div class="shadow"></div>
    </div>
    <div class="box thrid">
        <div class="ball"></div>
        <div class="shadow"></div>
    </div>  
</body>
</html>

圖片素材