js+css实现点赞爱心动画效果代码-html代码-BFW代码库

js+css实现点赞爱心动画效果代码

代码语言：html

所属分类：其他

代码描述：js+css实现点赞爱心动画效果代码，点一下，空心的爱消失，饱满的爱心回来了。

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
:root {
  --speed: 1s;
  --frames: 60;
  --size: 96px;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

button {
  width: var(--size);
  height: var(--size);
  padding: 0;
  border: 0;
  border-radius: calc(var(--size) * 0.125);
  aspect-ratio: 1;
  scale: 1;
  background: transparent;
  cursor: pointer;
}

button:is(:hover, :focus-visible) {
  background: hsl(0 0% 95%);
}

button img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 0 0;
     object-position: 0 0;
}

button[aria-pressed=true] img {
  -webkit-animation: sprite var(--speed) var(--timing-function, ease) forwards;
          animation: sprite var(--speed) var(--timing-function, ease) forwards;
}

@-webkit-keyframes sprite {
  to {
    object-position: 100% 0;
  }
}

@keyframes sprite {
  to {
    -o-object-position: 100% 0;
       object-position: 100% 0;
  }
}

.controls {
  display: inline-flex;
  gap: 0.5rem;
  position: fixed;
  top: 1rem;
  left: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
}

.track__holder {
  position: fixed;
  top: 50%;
  left: 50%;
  width: var(--size);
  aspect-ratio: 1;
  z-index: -1;
  translate: -50% -50%;
  opacity: 0;
  transition: opacity 0.2s;
}

:root:has(#show:checked) .track__holder {
  opacity: 0.5;
}

.track {
  p.........完整代码请登录后点击上方下载按钮下载查看