div+css实现可爱企鹅代码-html代码-BFW代码库

div+css实现可爱企鹅代码

代码语言：html

代码描述：div+css实现可爱企鹅代码

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


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

<head>

  <meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
.penguin {
  width: 40vmin;
  height: 50vmin;
  background: #f003;
  border-radius: 100% 100% 100% 100% / 150% 150% 40% 40%;
  border: 0.5vmin solid;
  background: 
    radial-gradient(farthest-side at 50% 100%, #0000 99.99%, #000 0) 0 10% / 50.1% 15% no-repeat,
    radial-gradient(farthest-side at 50% 100%, #0000 99.99%, #000 0) 100% 10% / 50.1% 15% no-repeat,
    white;
  box-shadow: inset 0 4vmin 0 1vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.penguin * {
  position: absolute;
  box-sizing: border-box;
}

.eye {
  width: 12%;
  aspect-ratio:1;
  border-radius: 50%;
  left: 35%;
  top: 40%;
  transform: translate(-50%, -50%);
  background: 
    radial-gradient(circle at 30% 35%, #fff 15%, #fff0 0),
    radial-gradient(circle at 50% 20%, #fff 8%, #fff0 0),
    black;
}

.eye + .eye {
  left: 65%;
}

.beak {
  width: 16%;
  height: 6%;
  border: 0.5vmin solid;
  background: orange;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100% 100% 60% 60% / 100%;
}

.cheek {
  width: 14%;
  height: 7%;
  background: red;
  border-radius: 50%.........完整代码请登录后点击上方下载按钮下载查看