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;
.........完整代码请登录后点击上方下载按钮下载查看