css实现卡通可爱美西螈听音乐动画效果代码-html代码-BFW代码库

css实现卡通可爱美西螈听音乐动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现卡通可爱美西螈听音乐动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
  margin: 0;
  min-height: 100vh;
  background: #59ac;
  background:
    linear-gradient(#fff7, #fff0),
    radial-gradient(at 80% -20%, #59a0, #59a),
    conic-gradient(at 80% -20%, #0000 60%, #fff1 0 63%, #0000 0 66%, #fff1 0 68%, #0000 0),
    #59a4;
}

article {
  --line: #a21a3e;
  --skin: #f7d9d9;
  --skin-mid: #e7b9b9;
  --skin-dark: #ea9aa3;
  font-size: 1vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50em;
  aspect-ratio: 4/5;
}

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

@keyframes nod {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(-10deg); }
}

.head {
  animation: nod 1s linear infinite;
  --angle: -11deg;
  width: 60%;
  height: 37.5%;
  top: 5%;
  left:13%;
  transform: rotate(var(--angle));
  transform-origin: 95% 20%;
}

.face {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--skin);
  border-radius: 105% 95% 95% 95% / 125% 115% 80% 75%;
  border: 0.5em solid var(--line);
  clip-path: polygon(0 0, 100% 0, 66% 100%, 0% 100%);
  border-left-width: 0.6em;
  border-bottom-width: 0.7em;
  box-shadow:
    inset 0 1em #fff4,
    inset 0 -0.75em #f001;
}

.eye {
  width: 8.5%;
  height: 17%;
  background: 
/*     radial-gradient(circle at 50% 10%, #fff 4%, #fff0 0), */
    radial-gradient(circle at 36% 30%, #fff 20%, #fff0 0),
    radial-gradient(circle at 68% 75%, #fff 10%, #fff0 0),
    var(--line);
  border-radius: 50%;
  transform: rotate(calc(-0.7 * var(--angle)));
  top: 47%;
  left: 9%;
}

..........完整代码请登录后点击上方下载按钮下载查看