点赞动画

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const getRandom = (min, max) => {
  return Math.random() * (max - min) + min;
};

const illoElem = document.querySelector('.illo');
const w = 160;
const h = 160;
const minWindowSize = Math.min(window.innerWidth, window.innerHeight);
const zoom = Math.min(20, Math.floor(minWindowSize / w));
illoElem.setAttribute('width', w * zoom);
illoElem.setAttribute('height', h * zoom);

let illo = new Zdog.Illustration({
  element: illoElem,
  dragRotate: true });

const TAU = Math.PI * 2; // easier to read constant

// fill bubble
new Zdog.RoundedRect({
  addTo: illo,
  width: 120,
  height: 80,
  fill: true,
  stroke: 4,
  cornerRadius: 14,
  color: '#fe6e7b' });

new Zdog.Shape({
  addTo: illo,
  path: [
  { x: 20, y: 40 },
  { x: 0, y: 60 },
  { x: -20, y: 40 }],

stroke: 4,
  fill: true,
  closed: false,
  color: '#fe6e7b' });

// shape heart
var heartPath = (() => {
  let path = [];
  const radius = 1.3;
  for (let i = 0; i < 7; i += 0.1) {
    let point = {
      x: radius * 16 * Math.pow(Math.sin(i), 3) * radius,
      y: -radius * (13 * Math.cos(i) * radius - 5 * Math.cos(2 * i) - 2 * Math.cos(3 * i) - Math.cos(4 * i)) };

path.push(point);
  }
  return path;
})();

new Zdog.Shape({
  addTo: illo,
  path: heartPath,
  closed: false,
  stroke: 2,
  color: '#fff',
  fill: true,
  translate: {
    z: 10 } });

// star shape
var starPath = (() => {
  let path = [];
  const starRadiusA = 25;
  const starRadiusB = 15;
  for (let i = 0; i < 10; i++) {
    let radius = i % 2 ? starRadiusA : starRadiusB;
    let angle = TAU * i / 10 + TAU / 4;
    let point = {
      x: Math.cos(angle) * radius,
      y: Math.sin(angle) * radius };

path.push(point);
  }
  return path;
})();

new Zdog.Shape({
  addTo: illo,
  path: starPath,
  translate: { z: -10 },
  lineWidth: 2,
  color: '#fff',
  fill: true });

// render & animate
const deg = Math.PI / 180;

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