css布局实现万圣节皮卡丘和南瓜头效果代码-html代码-BFW代码库

css布局实现万圣节皮卡丘和南瓜头效果代码

代码语言：html

所属分类：其他

代码描述：采用css布局实现在万圣节中皮卡丘报着南瓜头的卡通形象效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
          margin-top: 10vmin;
          height: 100vh;
          width: 100vw;
          background: #deb29a;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
        }
        .pikachu {
          position: relative;
          background: #f9ebaa;
          height: 13vmin;
          width: 16vmin;
          border-radius: 40%;
          display: flex;
        }
        .pikachu::before {
          content: '';
          position: absolute;
          background: #f9ebaa;
          height: 11vmin;
          width: 14vmin;
          border-radius: 90% 90% 60% 60%;
          top: -8vmin;
          left: 1vmin;
        }
        .pikachu::after {
          content: '';
          position: absolute;
          background: transparent;
          height: 2.5vmin;
          width: 2.5vmin;
          color: #4a4947;
          border-radius: 50%;
          box-shadow:
            4vmin -3.5vmin, 10vmin -3.5vmin,
            2vmin -2vmin #fad598, 12vmin -2vmin #fad598;
        }
        .limbs {
          position: relative;
          width: 0; 
          height: 0; 
          border-left: 1vmin solid transparent;
          border-right: 3vmin solid transparent;  
          border-bottom: 12vmin solid #f9ebaa;
          border-radius: 80%;
          top: -13vmin;
          left: 1vmin;
          transform: rotate(-20deg);
        }
        .limbs::before {
          content: '';
          position: absolute;
          background: #f9ebaa;
          width: 13vmin;
          height: 4vmin;
          border-radius: 40%;
          top: 16vmin;
          left: 5vmin;
          box-shadow: 
            -1vmin 3vmin #f9ebaa;
        }
        .limbs::after {
          content: '';
          position: absolute;
          width: 0; 
          height: 0; 
          border-left: 1vmin solid transparent;
          border-right: 3vmin solid transparent;  
          border-bottom: 12vmin solid #f9ebaa;
          border-radius: 80%;
          top: 3.5vmin;
          left: 8.5vmin;
          transform: rotate(40deg);
        }
        .pumpkin {
          position: relative;
          background: #f4b77b;
          height: 10vmin;
          width: 10vmin;
          border-radius: 50%;
          top: -9vmin;
          left: -2vmin;
          box-shadow: 4.2vmin 0vmin #f4b77b;
          display: flex;
        }
        .pumpkin::after {
          content: '';
          background: #f4b77b;
          position: absolute;
          height: 10.5vmin;
          width: 8vmin;
          border-radius: 50%;
          left: 1.5vmin;
          top: -0.3vmin;
          box-shadow: 3vmin 0 #f4b77b;
        }
        .pumpkin::before {
          content: '';
          position: absolute;
          background: #b7b072;
          height: 2.5vmin;
          width: 1.3vmin;
          border-radius: 10% 10% 5% 90%;
          left: 6.1vmin;
          top: -2vmin;
        }
        .face {
          position: relative;
          background: transparent;
          color: #a97e57;
          height: 2.5vmin;
          width: 7vmin;
          border-radius: 5% 5% 90% 90%;
          top: 4vmin;
          left: 3.5vmin;
          box-shadow: 
            0 0.5vmin, 0 1vmin, 0 1.5vmin, 0 2vmin;
          z-index: 1;
        }
        .face::before {
          content: '';
          position: absolute;
          width: 0; 
          height: 0; 
          border-left: 1.3vmin solid transparent;
          border-right: 2vmin solid transparent;  
          border-bottom: 1.7vmin solid #a97e57;
          top: -1vmin;
          left: -0.6vmin;
        }
        .face::after {
          content: '';
          position: absolute;
          width: 0; 
          height: 0; 
          border-left: 2vmin solid transparent;
          border-right: 1.3vmin solid transparent;  
          border-bottom: 1.7vmin .........完整代码请登录后点击上方下载按钮下载查看