css布局实现飞鸟效果-html代码-BFW代码库

css布局实现飞鸟效果

代码语言：html

代码描述：css布局实现飞鸟效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html, body {
  --background: #f2f4ff;
  background: var(--background);
}
.cartoon {
  --size: 30vmin;
  --primary: #acf;
  --primary-semi: #9be4;
  --secondary: #bbe;
  --secondary-semi: #aad4;
  --shadow: #8ad4;
  position: absolute;
  width: var(--size);
  height: var(--size);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cartoon div {
  position: absolute;
}

.b {
  border: 1vmin solid black;
}

.r {
  border-radius: 100%;
}

.hb::before,
.ha::after {
  content: "";
  display: block;
  position: absolute;
}

/****/
.sc {
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
  transform-origin: 50% 75%;
  background: var(--primary);
}

.body {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-60deg);
}

.head {
  transform: translate(30%, -52%) rotate(210deg) scale(0.5) ;
}

.wing {
  transform-origin: 100% 50%;
  box-shadow: inset -10vmin 0 4vmin -3vmin var(--shadow);
}


.wing-1 {
  transform: translate(-50%, 0%) rotate(5deg) scale(1, 0.8);
}

.wing-1.shadow {
  background: linear-gradient(to right, var(--primary-semi) 90%, transparent);
  transform: translate(-50%, 0%) rotate(15deg) scale(1, 0.8);
}

.wing-1.shadow-1 {
  background: linear-gradient(to right, var(--primary-semi) 70%, transparent);
  transform: translate(-50%, 0%) rotate(-5deg) scale(1, 0.8);
}



.wing-2 {
  background: var(--secondary);
  transform: translate(-30%, 10%) rotate(35deg) scale(1, 0.7);
}

.wing-2.shadow {
  background: linear-gradient(to right, var(--secondary-semi) 90%, transparent);
  transform: translate(-30%, 10%) rotate(45deg) scale(1, 0.7);
}

.wing-2.shadow-1 {
.........完整代码请登录后点击上方下载按钮下载查看