css布局实现星之卡比形象效果代码-html代码-BFW代码库

css布局实现星之卡比形象效果代码

代码语言：html

代码描述：css布局实现星之卡比形象效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
    background-color: rgb(251, 255, 235);
    display: flex;
    justify-content: center; 
    margin: 0 auto;
    width: 50vw;
}

:root {
    --body-color: #FCC5DA;
    --body-shadow-color: #F98B99;
    --right-hand-color: #ffb1c6;
    --cheek-color: #F988BE;
    --mouth-one-color: #7B2123;
    --mouth-two-color: #F6605C;
    --foot-color: #E7547D;
    --foot-front-dark-color: #DE505F;
    --foot-front-light-color: #EE6F7A;
    --blue-color: #326BF7;
    --white-color: #fff;
    --black-color: #000;
}

.my-kirby {
    position: relative;
    top: 20vh;
}

.head {
    width: 400px;
    height: 370px;
    top: 100px;
    background-color: var(--body-color);
    border-radius: 100%;
    box-shadow: inset 10px -35px 60px 0 var(--body-shadow-color), 40px 20px 64px 0 rgba(0,0,0,0.2);
    z-index: 1;
}

.hand-left {
    position: absolute;
    width: 150px;
    height: 250px;
    background-color: var(--body-color);
    border-radius: 100% 100% 0 40%/100% 100% 0 100%;
    box-shadow: inset 0px -35px 60px 0 var(--body-shadow-color), 40px 20px 64px 0 rgba(0,0,0,0.2);
    z-index: -1;
    transform: rotate(16deg);
    top: -90px;
    left: 50px;
}

.hand-right {
    position: absolute;
    width: 150px;
    height: 250px;
    background-color: var(--right-hand-color);
    top: 61px;
    left: 254px;
    z-index: -1;
    transform: rotate(90deg);
    border-radius: 100% 100% 0 40%/100% 100% 0 100%;
    box-shadow: inset 0px -45px 25px -5px var(--white-color), 40px 20px 64px 0 rgb(0 0 0 / 20%);
}

.eye {
    width: 35px;
    height: 91px;
    background-color: var(--black-color);
    position: absolute;
    border-radius: 50px/100px;
    transform: rotate(17deg);
    box-shadow: 0px 0 3px var(--black-color);
}

.eye-left {
    top: 70px;
    left: 200px;
}

.eye-right {
    top: 87px;
    left: 275px;
}

.eye-inner {
    background-color: var(--white-color);
    width: 22px;
    height: 30px;
    border-radius: 70px/100px;
    box-shadow: 0px 0 3px var(--white-color);
    position: absolute;
    left: 7px;
    top: 4.2px;
}


.eye-inner::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 35px;
    background-color: var(--blue-color);
    border-radius: 70px/100px;
    left: 0px;
    top: 47px;
    box-shadow: 0px 0 3px var(--black-color);
}

.eye-inner::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: var(--black-color);
    border-radius: 70px/100px;
    left: .........完整代码请登录后点击上方下载按钮下载查看