利用animate（）方法实现小球动态效果

爱吃彩虹吐司的安琪拉

已于 2023-01-10 14:03:52 修改

阅读量458

点赞数 1

分类专栏： # 前端初学者小练习文章标签： html5 javascript css 前端

于 2021-07-27 10:21:53 首次发布

本文链接：https://blog.csdn.net/weixin_44264769/article/details/119135483

版权

前端初学者小练习专栏收录该内容

3 篇文章

订阅专栏

一、引入css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

二、实现效果

三、具体代码

<style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
        background: -webkit-linear-gradient( blue,white,green);
        position: relative;
        overflow: hidden;
    }
    .box3{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: -webkit-radial-gradient(red,yellow);
        position: absolute;
        left: 0;
        right: 0;
        margin: 15px auto 0;
        animation: run 3s infinite;
    } 
    @keyframes run{
        0%{
            top: 0;
        }
        30%{
            top:calc(100% - 200px);
            opacity: 0.8;
            left: 50%;
        }
        60%{
            top: 0;
            opacity: 0.5;
            right: 80%;

        }
        100%{
            top:calc(100% - 200px);
            opacity: 0;
        }
    }
</style>
<body>
    <div class = "box3">
        <div class = "circle"></div>
    </div>
</body>

这是一个简单的效果，想了解其他的可以看animate官网！