css实现卡通船员效果代码-html代码-BFW代码库

css实现卡通船员效果代码

代码语言：html

代码描述：css实现卡通船员效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
.crewmate {
    --shade1: red;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    /*background: #060523;*/
    overflow: hidden;
    --unitSize: 1.7vmin;
}

.symmetry {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.canvas {
    position: relative;
    width: calc(var(--unitSize) * 80);
    height: calc(var(--unitSize) * 80);
    background: white;
}

.canvas * {
    position: absolute;
}

.transform {
    --x: 0;
    --y: 0;
    --r: 0;
    --s: 0;
    --sy: 0;
    --sx: 0;
    --_scale: 1;
    transform: scaleX(var(--_scale)) translateX(var(--x)) translateY(var(--y)) rotate(var(--r)) skew(var(--s)) skewX(var(--sx)) skewY(var(--sy));
}

.flipVertical {
    --x: 0;
    --y: 0;
    --r: 0;
    --s: 0;
    --sy: 0;
    --sx: 0;
    --_scale: -1;
    transform: scaleX(var(--_scale)) translateX(var(--x)) translateY(var(--y)) rotate(var(--r)) skew(var(--s)) skewX(var(--sx)) skewY(var(--sy));
}

.backpack {
    width: calc(var(--unitSize) * 8);
    height: calc(var(--unitSize) * 23);
    background: var(--shade1);
    border-radius: 30% 50% 50% 30% / 50% 20% 20% 50%;
    border: calc(var(--unitSize) * 1.2) solid black;
    position: absolute;
    --x: calc(var(--unitSize) * -14.5);
    --y: calc(var(--unitSize) * 2);
}

.body {
    width: calc(var(--unitSize) * 28);
    height: calc(var(--unitSize) * 40);
    background: var(--shade1);
    border-radius: 40% 60% 10% 5% / 40% 40% 60% 60%;
    border: calc(var(--unitSize) * 1.2) solid black;
    --vClip: 83%;
    clip-path: polygon(0% 0%, 100% 0%, 100% var(--vClip), 0% var(--vClip));
    overflow: hidden;
}

.body::before {
    width: 103%;
    height: 93%;
    background: var(--shade1);
    border-radius: 50%;
    filter: brightness(1.7);
    content: "";
    display: block;
    top: calc(var(--unitSize) * -6);
    left: calc(var(--unitSize) * 2);
    position: absolute;
}


.leg {
    width: calc(var(--unitSize) * 11.4);
    height: calc(var(--unitSize) * 12.6);
    background: var(--shade1);
    border: calc(var(--unitSize) * 0.9) solid black;
    border-top: none;
    border-radius: 0% 0% 54% 54% / 29% 0% 72% 100%;
    --x: calc(var(--unitSize) * -7.83);
    --y: calc(var(--unitSize) * 17.869999999999997);
    --r: 0deg;
}
.........完整代码请登录后点击上方下载按钮下载查看