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/css?family=Lato:400,700");
    html {
      display: grid;
      min-height: 100%;
    }
    
    body {
      display: grid;
      font-family: "Lato", sans-serif;
    }
    
    .container {
      margin: auto;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    
    .css-drawing {
      display: flex;
      flex-direction: row-reverse;
      width: 400px;
      height: 350px;
    }
    
    .avocado-body-right {
      position: relative;
      left: -3%;
      top: 5%;
      height: 50%;
      width: 30%;
      background: #CDE06D;
      border-radius: 50%  50%  50%  50%  / 75%  75% 40%  40%;
      border: 20px solid #9FCD65;
      box-shadow: 0 0 0 1px #3C632B;
    }
    .avocado-body-right .shell {
      margin-left: -10%;
    }
    .avocado-body-right .shadow {
      left: 15px;
    }
    .avocado-body-right .mouth {
      left: 47%;
    }
    .avocado-body-right .blush-l, .avocado-body-right .blush-r {
      top: 75.5%;
    }
    .avocado-body-right .blush-l {
      left: 22%;
    }
    
    .avocado-seedless {
      position: absolute;
      overflow: hidden;
      bottom: 8%;
      left: 17.5%;
      background: #9FCD65;
      border: 3px solid #9acb5d;
      width: 65%;
      height: 47%;
      border-radius: 50%  50%  50%  50%  / 60%  60%  40%  40%;
    }
    .avocado-seedless .highlight {
      background: #9FCD65;
      opacity: 1;
    }
    .avocado-seedless .highlight-cover {
      background: #CDE06D;
      transform: rotate(0deg);
      width: 95%;
      height: 95%;
      top: 22%;
      left: -15%;
    }
    
    .avocado-body {
      position: relative;
      top: 5%;
      height: 50%;
      width: 30%;
      background: #CDE06D;
      border-radius: 50%  50%  50%  50%  / 75%  75% 40%  40%;
      border: 20px solid #9FCD65;
      box-shadow: 0 0 0 1px #3C632B;
    }
    
    .shell {
      position: absolute;
      z-index: -1;
      background: #3C632B;
      margin-left: -34%;
      margin-top: -11%;
      width: 143%;
      height: 113%;
      border-radius: 50%  50%  50%  50%  / 65%  75%  30%  30%;
      animation: bounce 1.5s ease-in infinite;
    }
    
    .avocado-face {
      position: absolute;
      width: 90%;
      height: 40%;
      top: 0;
    }
    
    .circle-eyes {
      background: #2B1E13;
      border-radius: 50%;
      width: 10px;
      height: 10px;
      margin-left: 35%;
      margin-top: 42%;
    }
    .circle-eyes:before {
      content: '';
      position: absolute;
      right: 20%;
      width: 10px;
      height: 10px;
      background: #2B1E13;
      border-radius: 50%;
    }
    
    .smiley-eyes {
      border-radius: 50%;
      width: 10px;
      position: relative;
      height: 10px;
      margin-left: 30%;
      margin-top: 41%;
      border: 3px solid;
      border-color: #2B1E13 transparent transparent #2B1E13;
      transform: rotate(45deg);
    }
    
    .right {
      position: absolute;
      right: 22%;
      top: 0;
    }
    
    .blush-l, .blush-r {
      position: absolute;
      opacity: .7;
      width: 15px;
      height: 8px;
      background: #EDB6B6;
      border-radius: 50%;
      top: 78%;
    }
    
    .blush-l {
      left: 27%;
    }
    
    .blush-r {
      right: 12%;
    }
    
    .mouth {
      position: absolute;
      top: 70%;
      left: 52%;
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
    
    .happy {
      border: 3px solid;
      border-color: transparent #2B1E13 #2B1E13 transparent;
      transform: rotate(45deg);
    }
    
    .avocado-seed {
.........完整代码请登录后点击上方下载按钮下载查看