svg+css实现铃铛摇摆摇动动画效果代码-html代码-BFW代码库

svg+css实现铃铛摇摆摇动动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现紫色铃铛摇摆摇动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        *,
        *::after,
        *::before{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body{
            width: 100%;
            height: 100vh;
            background-color: rgb(29, 29, 29);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .notification{
            width: 200px;
            transform-origin: top center;
            animation: bellring 2s ease infinite;
        }
        
        .ball{
            // display: none;
            transform-origin: top center;
            animation: ballring 2s ease infinite;
            animation-delay: 0.1s;
        }
        
        @keyframes bellring {
            0% { transform: rotate(0); }
            10% { transform: rotate(20deg); }
            20% { transform: rotate(-20deg); }
            30% { transform: rotate(15deg); }
            40% { transform: rotate(-15deg); }
            50% { transform: rotate(10deg); }
            60% { transform: rotate(-10deg); }
            70% { transform: rotate(5deg); }
            80% { transform: rotate(-5deg); }
            100% { transform: rotate(0); }
        }
        
        @keyframes ballring {
            0% { transform: rotate(0); }
            10% { transform: rotate(-5deg); }
            20% { transform: rotate(5deg); }
            30% { transf.........完整代码请登录后点击上方下载按钮下载查看