css实现热气腾腾冒烟的咖啡效果代码-html代码-BFW代码库

css实现热气腾腾冒烟的咖啡效果代码

代码语言：html

代码描述：css实现热气腾腾冒烟的咖啡效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        *{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        .canvas{
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #e9be74;
          width: 100%;
          height: 100vh;
        }
        
        .coaster{
          position: absolute;
          width: 36vmin;
          height: 3vmin;
          background-color: #AE431E;
          border-radius: 50%/100%;
          bottom: 30%;
          display: flex;
          justify-content: center;
          align-items: center;
          box-shadow: black 2px 0.5;
        }
        
        .body-cup{
          position: absolute;
          width: 23vmin;
          height: 30vmin;
          background: #8A8635;
          bottom: 55%;
          border-radius: 10% 10% 2% 2%;
          
        }
        
        .cup-shine{
          position: absolute;
          bottom: 2px;
          border-top: 27vmin solid #7e7a31;
          border-right: 22vmin solid transparent;
          
        }
        
        .top-cup{
          position: absolute;
          width: 23vmin;
          height: 4vmin;
          background-color: #D06224;
          bottom: 88%;
          border-radius: 50%/100%;
        }
        
        .handel{
          position: absolute;
          width: 15vmin;
          height: 16vmin;
          background: #8A8635;
          border-radius: 50%;
          bottom:2%;
          right: -5vmin;
          bottom: 7vmin;
        }
        
        .handel-space{
          position: absolute;
          width: 8vmin;
          height: 10vmin;
          background: #e9be74;
          border-radius: 50%;
          bottom:2%;
          right: 3vmin;
          bottom: 3vmin;
        }
        
        .eyes{
          position: absolute;
          width: 2vmin;
          height: 2vmin;
          background-color: black;
          border-radius: 50%;
          bottom: 8vmin;
          right: 5vmin;
          box-shadow: -6vmin 0 black; 
          animation: blink 1s infinite;
        }
        
        @keyframes blink{
          0%{
            transform: scale(1,0.1);
          }
          100%{
            transform: scale(1,1);
          }
        }
        
        .cheeks{
          position: absolute;
          width: 3vmin;
          height: 1.5vmin;
.........完整代码请登录后点击上方下载按钮下载查看