一个div+css实现睡觉表情动画效果代码-html代码-BFW代码库

一个div+css实现睡觉表情动画效果代码

代码语言：html

所属分类：动画

代码描述：一个div+css实现睡觉表情动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          margin:0;
          height:100vh;
          background:lightblue;
          display:grid;
          place-items:center;
        }
        .tired {
          width:150px;
          height:150px;
          border-radius:50%;
          background:
            radial-gradient(farthest-side,#2b4114 92%,#0000) 78.8% 52.7% /5px 5px,
            radial-gradient(farthest-side,#2b4114 92%,#0000) 62.8% 52.7% /5px 5px,
            radial-gradient(farthest-side,#2b4114 92%,#0000) 49.8% 52.7% /5px 5px,
            radial-gradient(farthest-side,#2b4114 92%,#0000) 33.8% 52.7% /5px 5px,    
            radial-gradient(circle 15px at 50% -5px,#0000 70%,#2b4114 74% 98%, #0000) 75% 56% /30px 10px,    
            radial-gradient(circle 15px at 50% -5px,#0000 70%,#2b4114 74% 98%, #0000) 40% 56% /30px 10px,    
            radial-gradient(farthest-side,#f6e94b 70%,#f8c735 72% 98%,#0000) 75% 50%/30px 30px,    
            radial-gradient(farthest-side,#f6e94b 70%,#f8c735 72% 98%,#0000) 40% 50%/30px 30px,    
            #F7D758;
          background-repeat:no-repeat;
          position:relative;
          animation:e 4s linear infinite;
        }
        .tired:before {
          content: "";
          position: absolute;
          right: 38%;
          top: 80%;
          height: 6px;
          transform:translateY(-3px);
          width: 20px;
          bo.........完整代码请登录后点击上方下载按钮下载查看