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