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 {
.........完整代码请登录后点击上方下载按钮下载查看