有趣的CSS弹跳动画

最新推荐文章于 2023-12-14 00:00:00 发布

3y先生

最新推荐文章于 2023-12-14 00:00:00 发布

阅读量483

点赞数 2

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_39237801/article/details/97649963

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

绪论

看到一个有趣的css弹跳动画，转一下。

正文

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>有趣的CSS弹跳动画</title>
    <script src="js/jquery-2.2.4.min.js"></script>
    <style>
        .box {
            position: relative;
        }

        .box:before {
            content: '';
            position: absolute;
            z-index: 2;
            top: 60px;
            left: 50px;
            width: 50px;
            height: 50px;
            background: #c00;
            border-radius: 2px;
            transform: rotate(45deg);
        }

        .box:after {
            content: '';
            position: absolute;
            z-index: 1;
            top: 128px;
            left: 52px;
            width: 44px;
            height: 3px;
            background: #eaeaea;
            border-radius: 100%;
        }

        .box:before {
            content: '';
            position: absolute;
            z-index: 2;
            top: 60px;
            left: 50px;
            width: 50px;
            height: 50px;
            background: #c00;
            border-radius: 2px;
            transform: rotate(45deg);
            -webkit-animation: box .8s infinite;
        }

        @-webkit-keyframes box {
            0% {
                top: 50px;
            }

            20% {
                border-radius: 2px;
                /*从20%的地方才开始变形*/
            }

            50% {
                top: 80px;
                border-bottom-right-radius: 25px;
            }

            80% {
                border-radius: 2px;
                /*到80%的地方恢复原状*/
            }

            100% {
                top: 50px;
            }
        }

        .box:after {
            content: '';
            position: absolute;
            z-index: 1;
            top: 128px;
            left: 52px;
            width: 44px;
            height: 3px;
            background: #eaeaea;
            border-radius: 100%;
            -webkit-animation: shadow .8s infinite;
        }

        @-webkit-keyframes shadow {

            0%,
            100% {
                left: 54px;
                width: 40px;
                background: #eaeaea;
            }

            50% {
                top: 126px;
                left: 50px;
                /*让阴影保持在原位*/
                width: 50px;
                height: 7px;
                background: #eee;
            }
        }

        @-webkit-keyframes box {
            0% {
                top: 50px;
                transform: rotate(90deg);
                /**/
            }

            20% {
                border-radius: 2px;
            }

            50% {
                top: 80px;
                transform: rotate(45deg);
                border-bottom-right-radius: 25px;
            }

            80% {
                border-radius: 2px;
            }

            100% {
                top: 50px;
                transform: rotate(0deg);
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>
<script>
    $(document).ready(function () {

    });

</script>

</html>