纯css实现一个鸡蛋效果代码-html代码-BFW代码库

纯css实现一个鸡蛋效果代码

代码语言：html

代码描述：纯css实现一个鸡蛋效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>

body {
  /* only to place the egg in the center */
  position: relative;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  border: 10px solid #535150A0;
  box-sizing: border-box;
  --clshd: hsl(109 33% 66%);
  background-color: 
    hsl(109 77% 82%);
}
body::after {
  --blush: #E23636C0;
  --tongue: #E23636;
  --yolk: hsl(46, 95%, 48%);
  --yolk-brdr: hsl(46 95% 28% / 50%);
  --white: white;
  --egg-white: #FBF7F4;
  --egg-white-drkr: #F8F3F0;
  
  content: '';
  position: absolute;
  
  width: 410px;
  height: 440px;
  
  background-image:
    /* I am blusing */
    radial-gradient(
      circle at 260px 290px,
      var(--blush) 4px,
      transparent 8px
    ),
    radial-gradient(
      circle at 200px 290px,
      var(--blush) 4px,
      transparent 8px
    ),
    /* mouth */
    radial-gradient(
      15px 5px at 230px 302px,
      #E23636 10px,
      transparent 1px
    ),
    radial-gradient(
      30px 15px at 230px 285px,
      var(--yolk) 20px,
      transparent 1px
    ),
    radial-gradient(
      25px 15px at 230px 295px,
      #25282A 18px,
      transparent 1px
    ),
    /* eyes */
    radial-gradient(
      circle at 250px 260px,
      #25282A 8px,
      transparent 1px
    ),
    radial-gradient(
   .........完整代码请登录后点击上方下载按钮下载查看