css3+js如何做一个动态点赞效果

如何利用css3+js做一个动态点赞效果，下面web建站小编给大家详细介绍一下具体代码！

1、html代码：

<span class="thumbs-up" data-text="点赞?"></span>

2、css3代码：

@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #FF6E00;
}

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Pacifico', serif;
  overflow: hidden;
}

span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

span::after {
  display:block;
  content: attr(data-text);
  position: absolute;
  background-color: #fff;
  border-radius: 10px;
  width:110px;
  text-align:center;
  height:42px;
  line-height:42px;
  font-size: 22px;
  cursor: pointer;
  color: #FF6E00;
  user-select: none;
  transition: transform 100ms ease-in;
  font-family: Microsoft YaHei,sans-serif;
}

span:active::after { transform: scale(0.9); }

.thumbs-up::after {
  animation: thumbs-up 100ms ease-in-out infinite;
}

@keyframes thumbs-up {
  50% { transform: scale(0.95); }
}

.shape {
  --size: 8px;
  position: absolute;
  top: calc(50% - var(--size));
  left: calc(50% - var(--size));
  width: calc(var(--size) * 2);
  height: calc(var(--size) * 2);
  animation: popup var(--d) cubic-bezier(.08,.56,.53,.98) forwards;
}

.square {
  border-radius: 4px;
  background-color: var(--c);
}

.circle {
  border-radius: 50%;
  background-color: var(--c);
}

.triangle {
  width: 0px;
  height: 0px;
  background-color: none;
  border-top: var(--size) solid transparent;
  border-bottom: calc(var(--size) * 2) solid var(--c);
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
}

.heart {
  --size: 6px;
  background-color: var(--c);
}
.heart::before, .heart::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--c);
  border-radius: 50%;
}
.heart::before { left: -50%; }
.heart::after { top: -50%; }

@keyframes popup {
  0% { opacity: 0; }
  60% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r));
  }
}

3、js代码：

const colors = ['#FC4F4F', '#FFBC80', '#FF9F45', '#F76E11']
const shapes = ['heart']

const randomIntBetween = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1) + min)
}

class Particle {
  constructor({ x, y, rotation, shape, color, size, duration, parent }) {
    this.x = x
    this.y = y
    this.parent = parent
    this.rotation = rotation
    this.shape = shape
    this.color = color
    this.size = size
    this.duration = duration
    this.children = document.createElement('div')
  }

  draw() {
    this.children.style.setProperty('--x', this.x + 'px')
    this.children.style.setProperty('--y', this.y + 'px')
    this.children.style.setProperty('--r', this.rotation + 'deg')
    this.children.style.setProperty('--c', this.color)
    this.children.style.setProperty('--size', this.size + 'px')
    this.children.style.setProperty('--d', this.duration + 'ms')
    this.children.className = `shape ${this.shape}`
    this.parent.append(this.children)
  }

  animate() {
    this.draw()

    const timer = setTimeout(() => {
      this.parent.removeChild(this.children)
      clearTimeout(timer)
    }, this.duration)
    }
}

function animateParticles({ total }) {
  for (let i = 0; i < total; i++) { const particle = new Particle({ x: randomIntBetween(-200, 200), y: randomIntBetween(-100, -300), rotation: randomIntBetween(-360 * 5, 360 * 5), shape: shapes[randomIntBetween(0, shapes.length - 1)], color: colors[randomIntBetween(0, colors.length - 1)], size: randomIntBetween(4, 7), duration: randomIntBetween(400, 800), parent }) particle.animate() } } let intervalTimer = setInterval(() => {
  animateParticles({ total: 8 })
}, 100)

const parent = document.querySelector('span')
parent.addEventListener("touchstart", () => {}, false);
parent.addEventListener('click', e => {
  if (intervalTimer) {
    clearInterval(intervalTimer)
    intervalTimer = null
    parent.classList.remove('thumbs-up')
  }
  animateParticles({ total: 40 })
})

PC端如何实现将网站添加到桌面的功能

javascript实现复制div文本内容（实测有效）

JavaScript获取指定网站状态码查询代码（2种实现方法）

JS获取当前电脑浏览器基本信息

盘点50个全面的正则表达式集合，从基本验证到高级匹配

标签： 点赞效果

上面是“css3+js如何做一个动态点赞效果”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_3236.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！