🔥关于世界杯

大力神杯

国际足联世界杯（FIFA World Cup），简称“世界杯”，是由全世界国家级别球队参与，象征足球界最高荣誉，并具有最大知名度和影响力的足球赛事。世界杯全球电视转播观众超过35亿。世界杯每四年举办一次，任何国际足联会员国（地区）都可以派出代表队报名参加这项赛事。
巴西国家队是夺得世界杯冠军最多的球队（5次），并且在3夺世界杯后永久地保留了前任世界杯冠军奖杯雷米特杯。现代足球发源地为英格兰，其代表队在1966年首夺世界杯。而现在的世界杯奖杯是大力神杯，由4夺世界杯冠军的德国在1974年首次捧杯并一直沿用。2002年韩日世界杯，中国国家队首次晋级世界杯决赛圈。

🔥关于2022卡塔尔世界杯

2022年卡塔尔世界杯于北京时间2022年11月21日至12月18日举行。
2022年卡塔尔世界杯（英语：FIFA World Cup Qatar 2022）是第二十二届世界杯足球赛，是历史上首次在卡塔尔和中东国家境内举行、也是第二次在亚洲举行的世界杯足球赛。除此之外，卡塔尔世界杯还是首次在北半球冬季举行、首次由从未进过世界杯决赛圈的国家举办的世界杯足球赛。
2020年7月15日，2022年卡塔尔世界杯赛程公布，全部比赛在卡塔尔境内8座球场举行。 2022年6月15日，决赛阶段球队全部确定。该届赛事揭幕战于11月21日0时（当地时间11月20日19时）进行，由东道主卡塔尔对阵厄瓜多尔；决赛于12月18日23时（当地时间12月18日18时）在卢塞尔体育场进行。

🔥我与世界杯

我对足球的热爱不是源于世界杯或者五大联赛的球星，而是日本的热血足球动漫，如《闪电十一人》、《足球小将》等等。在我上小学的时候就是如此，虽然看不懂足球，但是我知道进球是一件多么让人热血沸腾的事情。我第一次看世界杯是在2014年的巴西世界杯，那时候很喜欢梅西和内马尔，虽然那一届世界杯，梅西很遗憾没能完成大满贯，拿到这个冠军，这幅图我一直印象很深刻。虽然今年的竞争也是很大，但是我还想希望梅西能带领阿根廷杀出重围，完成14年未完成的愿望。

虽然小组赛第一场输给了沙特阿拉伯，但是第二场梅西那一记突施冷箭，为球队带来了胜利的基础。希望下一场能再一次看到梅西的进球，然后杀入淘汰赛。

⚽分享一颗足球

接下来通过代码分享一颗球给大家。
❗注意：如果要复制代码自己动手实现效果，修改图片（这颗球只是图片ahhh）的地址即可，我这里是本地的图片（注意使用无底的png图效果更优）。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>a football for you!</title>
    </head>
    <style>
        .Loading{
            position: absolute;
            background-color: rgba(255,255,255,0.2);
            left:0;right:0;top:0;bottom: 0;
            width:100%;
            height:100%;
            display:flex;/*多轮布局*/
            align-items:center;/*垂直*/
            justify-content:center;/*水平*/
            z-index: 9999
        }
        .laodingCon{width:50px;height: 120px;}
        .ball {
            -webkit-animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
            -ms-animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
            -moz-animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
            animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
            height: 50px;
            width: 50px;
            background: url(./football.png) no-repeat center;
            background-size: 100%;
            border-radius:80%
        }
        .ballshadow {
            -webkit-animation: shadow 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
            animation: shadow 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
            background: #000;
            bottom: -90px;
            height: 15px;
            width: 50px;
            -webkit-animation-delay: 0; animation-delay: 0;
            border-radius: 100%;
        }
        @-webkit-keyframes ball {
            0% {
                -webkit-transform: translateY( 0 );
                transform: translateY( 0 );
            }
            100% {
                -webkit-transform: translateY( -50px );
                transform: translateY( -50px );
            }
        }
        @keyframes ball {
            0% {
                -webkit-transform: translateY( 0 );
                transform: translateY( 0 );
            }
            100% {
                -webkit-transform: translateY( -50px );
                transform: translateY( -50px );
            }
        }

        @-webkit-keyframes shadow {
            0% {
                opacity: 0.2;
                -webkit-transform: scale( 0.3 );
                transform: scale( 0.3);
            }
            100% {
                opacity: 0.05;
                -webkit-transform: scale( 1 );
                transform: scale( 1 );
            }
        }
@keyframes shadow {
    0% {
        opacity: 0.2;
        -webkit-transform: scale( 0.3);
        transform: scale( 0.3);
    }
    100% {
        opacity: 0.05;
        -webkit-transform: scale( 1 );
        transform: scale( 1 );
    }
}
    </style>
    <body>
        <div id="_loading_page" class="Loading">
            <div class="laodingCon">
                <div class="ball"></div>
                <div class="ballshadow"></div>
            </div>
        </div>

    </body>
</html>