css实现小球平衡动画效果代码-html代码-BFW代码库

css实现小球平衡动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现小球平衡动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        @media screen and (min-width: 768px) {
          * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
          }
        
          body {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: linear-gradient(180deg, #2844aa, #1c89f6, #5381af);
          }
        
          .title {
            font-size: 44.8px;
            font-weight: 700;
            margin-bottom: 162.4px;
            text-transform: uppercase;
            letter-spacing: 5.6px;
            color: #fff;
            text-shadow: 0 -2px 1px #fff;
          }
        
          .ballance {
            height: 112px;
            width: 112px;
            border-radius: 50%;
            
            background-size: cover;
            background-position: center center;
            background-size: cover;
            box-shadow: inset 3px 0px 8px black;
            animation: rotate 10s linear infinite;
          }
        
          .ballance__beam {
            height: 28px;
            width: 840px;
            left: calc(100% - 476px);
            top: -28px;
            border-radius: 4px;
            background: linear-gradient(320deg, #e9dfc4 0%, #e9dfc4 5%, #ede3c8 7%, #ede3c8 30%, #ebddc3 25%, #e9dfc4 48%, #ebddc3 49%, #e6d8bd 52%, #e6d8bd 53%, #e9dbc0 54%, #e6d8bd 55%, #e6d8bd 56%, #e9dbc0 57%, #e6d8bd 58%, #e6d8bd 73%, #e9dbc0 74%, #e9dbc0 98%, #ebddc3 100%);
            background-size: 8px;
            background-repeat: repeat;
            position: relative;
            animation: wobble 4s ease-in-out infinite alternate;
          }
        
          .ballance__ball {
            height: 140px;
            width: 140px;
            border-radius: 50%;
            background: radial-gradient(circle at 140px 140px, #5cabff, #000);
            position: absolute;
            top: -140px;
            right: 0;
            animation: rolling 4s ease-in-out infinite alternate;
          }
        
          @keyframes wobble {
            0% {
              transform: rotate(-12deg);
              box-shadow: inset 1px 2px 10px #000;
            }
            100% {
              transform: rotate(12deg);
              box-shadow: inset 0px 0px 6px #000;
            }
          }
          @keyframes rolling {
            0% {
              right: calc(100% - 140px);
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }
          @keyframes rotate {
            0% {
              background-position: 0 0;
            }
            100% {
              background-position: 980px, 0;
            }
          }
        }
        @media screen and (max-width: 767px) {
          * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
          }
        
          body {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: linear-gradient(180deg, #2844aa, #1c89f6, #5381af);
          }
        
          .title {
            font-size: 19.2px;
            font-weight: 700;
            margin-bottom: 69.6px;
            text-transform: uppercase;
            letter-spacing: 2.4px;
            color: #fff;
            text-shadow: 0 -2px 1px #fff;
          }
        
          .ballance {
            height: 48px;
            width: 48px;
            border-radius: 50%;
          
            background-size: cover;
            background-position: center center;
            background-size: cover;
            box-shadow: inset 3px 0px 8px black;
            animation: rotate 10s linear infinite;
          }
        
          .ballance__beam {
            height: 12px;
            width: 360px;
            left: calc(100% - 204px);
            top: -12px;
            border-radius: 4px;
            background: linear-gradient(320deg, #e9dfc4 0%, #e9dfc4 5%, #ede3c8 7%, #ede3c8 30%, #ebddc3 25%, #e9dfc4 48%, #ebddc3 49%, #e6d8bd 52%, #e6d8bd 53%, #e9dbc0 54%, #e6d8bd 55%, #e6d8bd 56%, #e9dbc0 57%, #e6d8bd 58%, #e6d8bd 73%, #e9dbc0 74%, #e9dbc0.........完整代码请登录后点击上方下载按钮下载查看