关爱小熊动画

下载代码

html

css

分享到微信朋友圈

html

css

* {
  box-sizing: border-box;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}
body {
  background: #222;
  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(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
}
.care-bear__heart {
  --saturation: 20;
  --hue: 0;
  fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
}
.care-bear__muzzle {
  --lightness: 90;
}
.care-bear__muzzle circle {
  fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
}

JavaScript

const { gsap } = window;
const { timeline, to, set } = gsap;

const $BACKDROP = document.querySelector('.backdrop');
const $HEARTS = document.querySelector('.hearts');
const $BEAR = document.querySelector('.care-bear');
const $BEAR_ARM_LEFT = document.querySelector('.care-bear__arm--left');
const $BEAR_ARM_RIGHT = document.querySelector('.care-bear__arm--right');
const $BEAR_EAR_LEFT = document.querySelector('.care-bear__ear--left');
const $BEAR_EAR_RIGHT = document.querySelector('.care-bear__ear--right');
const $BEAR_MOUTH = document.querySelector('.care-bear__mouth');
const $BEAR_NOSE = document.querySelector('.care-bear__nose');
const $BEAR_CHEEK_LEFT = document.querySelector('.care-bear__cheek--left');
const $BEAR_CHEEK_RIGHT = document.querySelector('.care-bear__cheek--right');
const $BEAR_EYE_LEFT = document.querySelector('.care-bear__eye--left');
const $BEAR_EYE_RIGHT = document.querySelector('.care-bear__eye--right');
const $BEAR_PUPIL_LEFT = document.querySelector('.care-bear__pupil--left');
const $BEAR_PUPIL_RIGHT = document.querySelector('.care-bear__pupil--right');
const $BEAR_BELLY = document.querySelector('.care-bear__belly');
const $BEAR_MUZZLE = document.querySelector('.care-bear__muzzle');
const $BEAR_HEART = document.querySelector('.care-bear__heart');

const SPEEDS = {
  BACKDROP: {
    SCALE: 0.25,
    SPIN: 0.85 },

BREATHING: 1.5,
  SWITCH: 0.05 };

const STATE = {
  FIRING: false,
  CLOSING: false };

// Set the backdrop scale to 0
set($BACKDROP, { scale: 0 });
// Set bear to sulking
set($BEAR, { '--hue': Math.floor(Math.random() * 360), '--saturation': 0 });
set($BEAR_ARM_LEFT, { transformOrigin: '85% 80%', scale: 0.85, rotate: -110 });
set($BEAR_ARM_RIGHT, { transformOrigin: '15% 80%', scale: 0.85, rotate: 110 });
set($BEAR_EAR_LEFT, { transformOrigin: '70% 85%', rotate: -60 });
set($BEAR_EAR_RIGHT, { transformOrigin: '30% 85%', rotate: 60 });
set($BEAR_MOUTH, { transformOrigin: '50%, 0', scaleY: 0, y: '+=2' });
set($BEAR_NOSE, { transformOrigin: '50% 50%', y: '+=2' });
set($BEAR_BELLY, { transformOrigin: '50% 50%' });
set($BEAR_MUZZLE, { transformOrigin: '50% 50%' });
set($BEAR_HEART, { transformOrigin: '50% 50%' });
set([$BEAR_CHEEK_LEFT, $BEAR_CHEEK_RIGHT], {
  transformOrigin: '50% 50%',
  opacity: 0,
  y: '+=2' });

set([$BEAR_EYE_LEFT, $BEAR_EYE_RIGHT], {
  transformOrigin: '50% 50%',
  y: '+=2',
  clipPath: 'inset(50% 0 0 0)' });

set([$BEAR_PUPIL_LEFT, $BEAR_PUPIL_RIGHT], {
  transformOrigin: '50% 50%',
  z: 1,
  y: '+=1.25' });

const OPEN_BACKDROP_TL = new timeline({}).
add(to($BACKDROP, { scale: 1.5, duration: SPEEDS.BACKDROP.SCALE })).
add(
to($BACKDROP, {
  rotate: 360,
  duration: SPEEDS.BACKDROP.SPIN,
  repeat: -1,
  ease: 'none' }),

0);

OPEN_BACKDROP_TL.pause();

const HEART_SVG = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.258088 6.7122535">
  <path d="M2.56864 1.32292c-.31816 0-.63626.12209-.88005.36587-.48757.48758-.48757 1.27253 0 1.7601l.18035.18035 1.7601 1.7601 1.7601-1.7601.18035-.18035c.48757-.48757.48757-1.27252 0-1.7601-.24379-.24378-.56189-.36587-.88005-.36587-.31815 0-.63626.12209-.88005.36587l-.18035.18035-.18035-.18035c-.24379-.24378-.5619-.36587-.88005-.36587z" fill="red"/>
</svg>
`;
const fireHearts = () => {
  const newHeart = document.createElement('div');
  newHeart.className = 'heart';
  newHeart.style.setProperty(
  '--size',
  Math.floor(Math.random() * 30 - 10 + 1) + 5);

// newHeart.style.setProperty(
  //   '--hue',
  //   Math.floor(Math.random() * 150 - 10 + 1) + 10
  // )
  newHeart.style.setProperty('--hue', Math.floor(Math.random() * 360));
  newHeart.innerHTML = HEART_SVG;
  const svg = newHeart.querySelector('svg');
  $HEARTS.appendChild(newHeart);
  set(newHeart, { rotate: 'random(0, 360)', transformOrigin: '50% 50%' });
  to(svg, {
    y: '-100vmax',
    duration: 'random(0.5, 1.5)',
    onComplete: () => {
      newHeart.remove();
    } });

if (STATE.FIRING && !STATE.CLOSING) {
    requestAnimationFrame(fireHearts);
  } else {
    $HEARTS.innerHTML = '';
  }
};

CLOSE_BACKDROP_TL.pause();
const RAISE_TL = new timeline().
add(
to([$BEAR_ARM_LEFT, $BEAR_ARM_RIGHT], {
  duration: SPEEDS.SWITCH,
  scale: 1,
  rotate: 0 })).

add(
to([$BEAR_EAR_LEFT, $BEAR_EAR_RIGHT], {
  duration: SPEEDS.SWITCH,
  rotate: 0 }),

0).

add(
to($BEAR_HEART, {
  duration: SPEEDS.SWITCH,
  scale: 1.1 }),

0).

add(to($BEAR_NOSE, { duration: SPEEDS.SWITCH, y: 0 }), 0).
add(to($BEAR_MOUTH, { duration: SPEEDS.SWITCH, y: 0, scaleY: 1 })).
add(
to([$BEAR_CHEEK_LEFT, $BEAR_CHEEK_RIGHT], {
  duration: SPEEDS.SWITCH,
  opacity: 1,
  y: 0 }),

0).

add(
to([$BEAR_EYE_LEFT, $BEAR_EYE_RIGHT], {
  duration: SPEEDS.SWITCH,
  clipPath: 'inset(0 0 0 0)',
  y: 0 }),

0).

add(
to([$BEAR_PUPIL_LEFT, $BEAR_PUPIL_RIGHT], {
  duration: SPEEDS.SWITCH,
  y: 0 }),

0).

add(to($BEAR_HEART, { duration: SPEEDS.SWITCH, '--saturation': 100 }), 0).
add(to($BEAR, { duration: SPEEDS.SWITCH, '--saturation': 100 }), 0);
RAISE_TL.pause();

const BREATHING_TL = new timeline({ repeat: -1, yoyo: true }).
add(to($BEAR_BELLY, { scale: 1.025, duration: SPEEDS.BREATHING })).
add(to($BEAR_ARM_RIGHT, { rotate: 108, duration: SPEEDS.BREATHING }), 0).
add(to($BEAR_ARM_LEFT, { rotate: -108, duration: SPEEDS.BREATHING }), 0).
add(to($BEAR_NOSE, { y: '-=0.4', duration: SPEEDS.BREATHING }), 0).
add(
to([$BEAR_EYE_LEFT, $BEAR_EYE_RIGHT], {
  y: '-=0.4',
  duration: SPEEDS.BREATHING }),

0).

add(
to([$BEAR_EAR_LEFT, $BEAR_EAR_RIGHT], {
  y: '-=0.4',
  duration: SPEEDS.BREATHING }),

0).

add(to($BEAR_MUZZLE, { y: '-=0.4', duration: SPEEDS.BREATHING }), 0);

const start = () => {
  if (STATE.CLOSING) return;
  STATE.FIRING = true;
  OPEN_BACKDROP_TL.restart();
  RAISE_TL.play();
  BREATHING_TL.pause();
  fireHearts();
};

const end = () => {
  if (STATE.CLOSING || !STATE.FIRING) return;
  STATE.CLOSING = true;
  CLOSE_BACKDROP_TL.restart();
  RAISE_TL.reverse();
};

const tease = () => {
  to([$BEAR_EYE_RIGHT, $BEAR_EYE_LEFT], {
    duration: SPEEDS.SWITCH,
    clipPath: 'inset(0 0 0 0)' });

};

const sadden = () => {
  to([$BEAR_EYE_RIGHT, $BEAR_EYE_LEFT], {
    duration: SPEEDS.SWITCH,
    clipPath: 'inset(50% 0 0 0)' });

};

$BEAR.addEventListener('mousedown', start);
$BEAR.addEventListener('touchstart', start);
$BEAR.addEventListener('mouseup', end);
$BEAR.addEventListener('touchend', end);
$BEAR.addEventListener('mouseover', tease);
$BEAR.addEventListener('mouseleave', sadden);

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg