万佛归宗动画效果-html代码-BFW代码库

万佛归宗动画效果

代码语言：html

所属分类：动画

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


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

<style>
* {
  box-sizing: border-box;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}
body {
  background: #e6e6e6;
  min-height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}
.heart {
  position: absolute;
  height: calc(var(--size) * 1vmin);
  width: calc(var(--size) * 1vmin);
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.heart svg {
  height: 100%;
  width: 100%;
}
.heart path {
  fill: hsl(var(--hue), 100%, 60%);
}
.backdrop {
  --color-one: #868ff9;
  --color-two: #86f9f9;
  --color-three: #bff986;
  --color-four: #f9e586;
  --color-five: #f99986;
  --cloud: rgba(255,255,255,0.95);
  height: 100vmax;
  width: 100vmax;
  background: radial-gradient(circle at center center, var(--cloud) 20%, transparent 20%), repeating-conic-gradient(var(--color-one) 0, var(--color-one) 10%, var(--color-two) 10%, var(--color-two) 20%, var(--color-three) 20%, var(--color-three) 30%, var(--color-four) 30%, var(--color-four) 40%, var(--color-five) 40%, var(--color-five) 50%);
  position: fixed;
  -webkit-transform-origin: center;
          transform-origin: center;
  border-radius: 50%;
}
svg {
  --size: 50;
  height: calc(var(--size) * 1vmin);
  width: calc(var(--size) * 1vmin);
  z-index: 2;
}
span {
  z-index: 2;
}
.care-bear {
  --lightness: 50;
  cursor: pointer;
}
.care-bear__ear circle:nth-of-type(1) {
  fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
}
.care-bear__ear circle:nth-of-type(2) {
  --lightness: 90;
  fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
}
.care-bear__arm rect {
  --lightness: 45;
  fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
}
.care-bear__feet {
  --lightness: 40;
  -webkit-clip-path: circle(65% at 50% 130%);
  clip-path: circle(65% at 50% 130%);
}
.care-bear__feet path {
  fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
}
.care-bear__head circle {
  fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
}
.care-bear__belly circle:nth-of-type(1) {
  fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
}
.care-bear__belly circle:nth-of-type(2) {
  --lightness: 90;
  fill: hsl(var(-.........完整代码请登录后点击上方下载按钮下载查看