css 自定义properties属性实现随图案效果代码-html代码-BFW代码库

css 自定义properties属性实现随图案效果代码

代码语言：html

代码描述：css 自定义properties属性实现随图案效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
body {
  background: #F2F2EA;
}

/* div - bird
  :after - beak
  :before - eyes
*/

div {
  /* variables, all except --base-size are replaced by JS */
  --color-bird: lightblue;
  --color-blend: 0.5;
  --color-beak: orangered;
  --base-size: 60px;
  
  /* set font-size to our base-size,
  that way we can easily adjust all sizes with em */
  font-size: var(--base-size);
  box-sizing: border-box;
  background: var(--color-bird);
  border: 0.25em solid rgba(0,0,0, var(--color-blend));
  border-radius: 50% 50% 50% 0;
  width: 1em;
  height: 1em;
  position: relative;
  display: inline-block;
  margin: 0.25em;
}

/* This is beak */
div:after {
  content: '';
  border-right: .1em solid transparent;
  border-left: .1em solid transparent;
border-bottom: .25em solid var(--color-beak);
  transform: rotateZ(90deg);
  display: inline-block;
  position: absolute;
  right: -.35em;
  top: -.03em;

}

/* This is cold staring eyes. black as an abyss */
div:before {
  content: '';
  border-radius: 50%;
  background: #000;
  width: .075em;
  height: .075em;
  display: inline-block;
  position: absolute;
  right: .025em;
  top: -.1em;
  z-index: 2;
  box-shadow: .115em 0 0 #000;
}
</style>




</head>

<body >
  


  
      <script >
// Avoid total color chaos by using a specified palett.........完整代码请登录后点击上方下载按钮下载查看