欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS動(dòng)畫實(shí)現(xiàn)跳動(dòng)的足球(瘋狂世界杯)

  發(fā)布時(shí)間：2023-01-04 16:15:31   作者：館主阿牛   我要評(píng)論
2022卡塔爾世界杯正在如火如荼的進(jìn)行之中，作為“諸神的黃昏”，本屆世界杯備受矚目，足壇巔峰老將c羅，梅西，內(nèi)馬爾也將隨本次世界杯退役，一代人的青春到此結(jié)束！本篇我將用css動(dòng)畫寫一個(gè)簡(jiǎn)單的跳動(dòng)的足球，適合初學(xué)者練習(xí)css動(dòng)畫，趕緊學(xué)起來(lái)吧

前言

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

最終效果

請(qǐng)?zhí)砑訄D片描述

思路分析

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

小球的動(dòng)畫

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

陰影的動(dòng)畫

陰影有個(gè)透明度和縮放的變化。

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

下面就分別來(lái)看看這兩個(gè)簡(jiǎn)單動(dòng)畫的實(shí)現(xiàn)代碼吧！

小球的動(dòng)畫

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

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

陰影的動(dòng)畫

/*陰影變化的動(dòng)畫*/
 @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>跳動(dòng)的足球</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無(wú)限循環(huán)，alternate動(dòng)畫反向執(zhí)行回到起點(diǎn)*/
        } 
        /*小球跳動(dòng)的動(dòng)畫*/
        @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無(wú)限循環(huán)，alternate動(dòng)畫反向執(zhí)行回到起點(diǎn)*/
        }
        /*陰影變化的動(dòng)畫*/
        @keyframes shadowMove{
            0%{
                opacity: 0.5;
                transform: scale(0.75);
            }
            100%{
                opacity: 0.2;
                transform: scale(1);
            }
        }
        /* 第二個(gè)球動(dòng)畫延遲0.2秒 */
        .second .ball,.second .shadow{
            animation-delay: 0.2s;
        }
        /* 第三個(gè)球動(dòng)畫延遲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>

圖片素材


結(jié)語(yǔ)

到此這篇關(guān)于CSS動(dòng)畫實(shí)現(xiàn)跳動(dòng)的足球(瘋狂世界杯)的文章就介紹到這了,更多相關(guān)css跳動(dòng)足球內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論