单个div+css实现一个摇头注视你的小白熊动画效果代码-html代码-BFW代码库

单个div+css实现一个摇头注视你的小白熊动画效果代码

代码语言：html

所属分类：动画

代码描述：仅仅使用单个div及一些css代码实现一个摇头注视你的小白熊动画效果

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        html {
          background: #263038;
          display: grid;
          place-content: center;
          height: 100vh;
        }
        
        body {
          width: 160px;
          height: 185px;
          position: relative;
          background: #fff;
          border-radius: 100px 100px 0 0;
        }
        body:after {
          content: "";
          position: absolute;
          width: 100px;
          height: 125px;
          left: 50%;
          top: 25px;
          transform: translateX(-50%);
          background-image: radial-gradient(circle, #000 48%, transparent 55%), radial-gradient(circle, #000 48%, transparent 55%), radial-gradient(circle, #fff 30%, transparent 45%), radial-gradient(circle, #000 48%, transparent 51%), linear-gradient(#000 20px, transparent 0), linear-gradient(#cfecf9 60px, transparent 0), radial-gradient(circle, #cfecf9 50%, transparent 51%), radial-gradient(circle, #cfecf9 50%, transparent 51%);
          background-repeat: no-repeat;
          background-size: 16px 16px, 16px 16px, 10px 10px, 42px 42px, 12px 3px, 50px 25px, 70px 70px, 70px 70px;
          background-position: 25px 10px, 55px 10px, 36px 44px, 50% 30px, 50% 85px, 50% 50px, 50% 22px, 50% 45px;
          -webkit-animation: faceLift 3s linear infinite alternate;
                  animation: faceL.........完整代码请登录后点击上方下载按钮下载查看