纯css实现瑞克和莫蒂任务形象效果代码-html代码-BFW代码库

纯css实现瑞克和莫蒂任务形象效果代码

代码语言：html

代码描述：纯css实现瑞克和莫蒂任务形象效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300,700&display=swap');

:root {
  --border-color: #4f5352;
  --rick-skin-color: #ebe6e3;
  --morty-skin-color: #f1daca;
  --rick-hair-color: #bdcccf;
  --morty-hair-color: #a68564;
  --rick-spittle-color: #8bffc5;
  --rick-shirt-color: #d2eaea;
  --morty-shirt-color: #fffac0;
  --rick-hair-shape: polygon(15% 20%, 37% 32%, 49% 0%, 62% 32%, 83% 20%, 74% 43%, 89% 49%, 77% 62%, 88% 71%, 75% 77%, 82% 85%, 73% 84%, 73% 96%, 50% 86%, 25% 96%, 26% 84%, 17% 84%, 24% 77%, 10% 71%, 22% 62%, 9% 49%, 25% 42%);
  --custom-filter:
    drop-shadow(0 4px 0 var(--border-color))
    drop-shadow(4px 0 0 var(--border-color))
    drop-shadow(0 -4px 0 var(--border-color))
    drop-shadow(-4px 0 0 var(--border-color));
  --custom-filter-small:
    drop-shadow(0 2px 0 var(--border-color))
    drop-shadow(2px 0 0 var(--border-color))
    drop-shadow(0 -2px 0 var(--border-color))
    drop-shadow(-2px 0 0 var(--border-color));
}

.container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
}

.rick-container {
  width: 300px;
}

.rick-container .head-container {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    z-index: 2;
  }

.rick-container .head-container .head {
      width: 38%;
      height: 60%;
      border: 4px solid var(--border-color);
      background: var(--rick-skin-color);
      border-radius: 80px;
      position: relative;
      z-index: 2;
      transform: translate(-2px, -15px);
      display: flex;
      justify-content: center;
    }

.rick-container .head-container .head .brow-container {
        width: 90%;
        height: 25%;
        transform: translate(0, 8px);
        display: flex;
        align-items: flex-end;
        position: relative;
        z-index: 1;
      }

.rick-container .head-container .head .brow-container .brow {
          width: 90%;
          height: 20%;
          background: var(--rick-hair-color);
          border-radius: 25px;
          border: 4px solid var(--border-color);
          display: flex;
          flex-direction: column;
          align-items: center;
        }

.rick-container .head-container .head .brow-container .brow::before,
          .rick-container .head-container .head .brow-container .brow::after {
            position: absolute;
            content: "";
            display: block;
            width: 80%;
            height: 4px;
            border-radius: 50px;
            background: var(--border-color);
          }

.rick-container .head-container .head .brow-container .brow::before {
            width: 30%;
            transform: translate(0, -20px);
          }

.rick-container .head-container .head .brow-container .brow::after {
            width: 65%;
            transform: translate(0, -12px);
          }

.rick-container .head-container .head .eyes-container {
        position: absolute;
        width: 100%;
        height: 50px;
        transform: translate(0, 42px);
        display: flex;
        justify-content: space-around;
      }

.rick-container .head-container .head .eyes-container .eye {
          width: 40px;
          height: 40px;
          border: 4px solid var(--border-color);
          border-radius: 50%;
          overflow: hidden;
          background: #fff;
        }

.rick-container .head-container .head .eyes-container .eye::before {
            content: "";
            display: block;
            width: 100%;
            height: 50%;
            background: var(--rick-skin-color);
            border-bottom: 4px solid var(--border-color);
            position: relative;
   .........完整代码请登录后点击上方下载按钮下载查看