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% { transform: rotate(-4deg); }
            40% { transform: rotate(4deg); }
            50% { transform: rotate(-2deg); }
            60% { transform: rotate(2deg); }
            70% { transform: rotate(-1deg); }
            80% { transform: rotate(1deg); }
            100% { transform: rotate(0); }
         }
    </style>




</head>

<body>
    <div class="container">
        <svg class="notification" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M39 8.99981C38.9986 10.0379 38.7663 11.0626 38.32 11.9998C37.8345 13.0256 37.1027 13.9154 36.19 14.5898H27.81C26.8972 13.9154 26.1655 13.0256 25.68 11.9998C25.2282 11.0511 24.9959 10.013 25.0001 8.96225C25.004.........完整代码请登录后点击上方下载按钮下载查看