css实现一个卡通音符人物效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现一个卡通音符人物效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>
        * {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
        }
        
        body {
          margin: 0;
          background: #efe;
          font-family: sans-serif;
        }
        
        .wrapper {
          -webkit-transform: scale(0.6);
          -ms-transform: scale(0.6);
          transform: scale(0.6);
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          align-items: center;
          height: 100vh;
        }
        
        .music {
          -webkit-transform: scale(0.8);
          -ms-transform: scale(0.8);
          transform: scale(0.8);
          position: relative;
          -webkit-animation: move 2s infinite alternate linear;
          animation: move 2s infinite alternate linear;
          -webkit-transform: translate(-100px);
          -ms-transform: translate(-100px);
          transform: translate(-100px);
          width: 300px;
          height: 300px;
        }
        
        .music__body {
          background: -webkit-gradient(linear, left top, left bottom, from(#361E64), to(#443F7F));
          background: -webkit-linear-gradient(#361E64, #443F7F);
          background: -o-linear-gradient(#361E64, #443F7F);
          background: linear-gradient(#361E64, #443F7F);
          -webkit-border-radius: 50%;
          border-radius: 50%;
          position: relative;
          overflow: auto;
          width: 300px;
          height: 300px;
        }
        
        .music__eyes {
          position: relative;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-justify-content: space-around;
          -ms-flex-pack: distribute;
          justify-content: space-around;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          align-items: center;
          padding: 0 40px;
          z-index: 2;
          margin-top: 100px;
        }
        .music__eyes--left, .music__eyes--right {
          width: 85px;
          height: 85px;
          -webkit-border-radius: 50%;
          border-radius: 50%;
          background: #000;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-justify-content: space-around;
          -ms-flex-pack: distribute;
          justify-content: space-around;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          align-items: center;
          position: relative;
        }
        .music__eyes--left:before, .music__eyes--right:before {
          width: 60px;
          height: 15px;
          background: #000;
          content: "";
          display: block;
          position: absolute;
          top: -35px;
        }
        .music__eyes--right {
          -webkit-box-shadow: inset 0px 0px 0 22px #fff, 30px 40px 0 -15px #2f2259;
          box-shadow: inset 0px 0px 0 22px #fff, 30px 40px 0 -15px #2f2259;
        }
        .music__eyes--right:before {
          -webkit-transform: rotate(15deg);
          -ms-transform: rotate(15deg);
          transform: rotate(15deg);
        }
        .music__eyes--right:after {
          content: "";
          position: absolute;
          width: 10px;
          height: 10px;
          background: #fff;
          -webkit-border-radius: 50%;
          border-radius: 50%;
          left: -115px;
          top: -40px;
        }
        .music__eyes--left {
          -webkit-box-shadow: inset 0px 0px 0 22px #fff, -30px 40px 0 -15px #2f2259;
          box-shadow: inset 0px 0px 0 22px #fff, -30px 40px 0 -15px #2f2259;
        }
        .music__eyes--left:before {
          -webkit-transform: rotate(-15deg);
          -ms-transform: rotate(-15deg);
          transform: rotate(-15deg);
        }
        .music__eyes--left:after {
          content: "";
          position: absolute;
          width: 30px;
          height: 10px;
          background: #fff;
          left: 5px;
          top: -60px;
          -webkit-border-radius: 10px;
          border-radius: 10px;
          -webkit-transform: rotate(-40deg);
          -ms-transform: rotate(-40deg);
          transform: rotate(-40deg);
        }
        
        .music__mouth {
          width: 80px;
          height: 50px;
          background: -webkit-gradient(linear, left top, left bottom, from(#590D53), to(#390452));
          background: -webkit-linear-gradient(#590D53, #390452);
          background: -o-linear-gradient(#590D53, #390452);
          background: linear-gradient(#590D53, #390452);
          margin: 20px auto;
          -webkit-border-radius: 15px 15px 50% 50%;
          border-radius: 15px 15px 50% 50%;
          overflow: hidden;
          -webkit-animation: sad 2s infinite alternate;
          animation: sad 2s infinite alternate;
        }
        .music__mouth:after {
          content: "";
          display: block;
          width: 40px;
          height: 40px;
          background: #FE2657;
          -webkit-border-radius: 50%;
          border-radius: 50%;
          margin: 30px auto;
        }
        
        .music__tail {
          width: 50px;
          height: 200px;
          background: #.........完整代码请登录后点击上方下载按钮下载查看