纯css实现高尔夫小球动画案例分析

最新推荐文章于 2024-04-09 12:41:54 发布

Orange_J

最新推荐文章于 2024-04-09 12:41:54 发布

阅读量1k

点赞数

分类专栏： HTML CSS 文章标签：图片动画 css

本文链接：https://blog.csdn.net/juhaotian/article/details/49023979

版权

HTML CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

原作品网址为：http://codepen.io/kevinjannis/pen/MaoGbP

作品效果如下：

重写的代码如下：

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            box-sizing: border-box;
        }

        html {
            background: #d1d1d1;
        }

        #screen {
            position: relative;
            background: #ffc94e;
            border: solid 30px #f9f9f9;
            border-radius: 3px;
            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
            overflow: hidden;

            margin: 50px auto;

            width: 460px;
            height: 360px;
        }
        #screen:before {
            content: " ";
            position: absolute;
            border-bottom: solid 10px #00c797;
            border-radius: 50%;
            z-index: 10;

            top: 181px;
            left: 50%;

            margin-left: -12px;

            width: 24px;
            height: 20px;
        }
        #course {
            position: absolute;
            background: #00c797;
            border-radius: 50%;

            top: 180px;
            left: 30px;

            width: 340px;
            height: 600px;
        }
        #hole {
            position: absolute;
            background: #143f64;
            border-radius: 50%;
            top: 8px;
            left: 50%;
            margin-left: -12px;
            width: 24px;
            height: 14px;
        }
        #flag {
            position: absolute;
            overflow: hidden;
            width: 40px;
            height: 68px;
            left: 50%;
            top: -55px;
            margin-left: 4px;
        }
        #flag:before {
            content: " ";
            position: absolute;
            background: #143f64;
            border-radius: 2px 2px 0 0;
            top: 0;
            left: 0;
            width: 4px;
            height: 68px;
        }
        span {
            position: absolute;
            background: #ff0;
            border-left: solid 12px #000;
            border-right: solid 12px #f00;
            animation: flag 3s linear infinite;
            top: 3px;
            left: 5px;
            width: 35px;
            height: 28px;
        }
        span:before {
            content: " ";
            position: absolute;
            background: #ffc94e;
            border-bottom-right-radius: 20px 10px;
            animation: flag-top .7s ease-out alternate-reverse infinite;
            top: 100px;
            left: 100px;
            width: 50px;
            height: 30px;
            transform: translateY(-120px) translateX(-110px) rotateZ(20deg);
        }
        span:after {
            content: " ";
            position: absolute;
            background: #ffc94e;
            border-top-left-radius: 2px;
            border-top-right-radius: 50px 12px;
            animation: flag-bottom .7s linear alternate-reverse infinite;
            top: 100px;
            left: 100px;
            width: 50px;
            height: 30px;
            transform: translateY(-87px) translateX(-110px) rotateZ(-20deg);
        }
        #ball {
            position: absolute;
            background: #fff;
            border-radius: 5px;
            animation: ball 3s ease infinite;
            z-index: 5;
            top: 180px;
            left: 192px;
            width: 10px;
            height: 10px;
        }
        @keyframes flag {
            8% { transform: none; }
            10% { transform: rotateZ(4deg); }
            14% { transform: none; }
        }
        @keyframes flag-top {
            0% { border-bottom-right-radius: 24px 16px; }
            100% { border-bottom-right-radius: 50px 20px;}
        }
        @keyframes flag-bottom {
            0% { border-top-right-radius: 50px 12px; }
            100% { border-top-right-radius: 0 0; }
        }
        @keyframes ball {
            0% { top: 190px; left: -10px; }
            5% { top: 120px; }
            10% { top: 130px; left: 195px; }
            17% { top: 80px; left: 192px; }
            22% { top: 90px; }
            26% { top: 196px; left: 193px; }
            31% { left: 196px; }
            33% { left: 193px; }
            34% { left: 196px; }
            35% { left: 193px; }
            100% { top: 196px; left: 193px; }
        }
    </style>
    </head>

    <body>
        <div id="screen">
            <div id="course">
                <div id="hole"></div>
                <div id="flag">
                    <span></span>
                </div>
            </div>
            <div id="ball"></div>
        </div>
    </body>
</html>

案例分析：利用各类元素去拼凑图形，其中值得注意的实现技巧有三处，分别是：利用圆角border实现月牙形、利用:before和:after遮挡元素实现三角小旗子。

PS:此案例的全局box-sizing都是border-box。

1.利用圆角border实现月牙形：

为方便查看，在chrome里修改一下该元素的颜色，代码如下：