一颗红心,三手准备,分别基于图片(img)/SCSS(样式)/SVG动画实现动态拉轰的点赞按钮特效

一颗,红心,三手,准备,分别,基于,图片,img,scss,样式,svg,动画,实现,动态,按钮,特效 · 浏览次数 : 205

小编点评

## Summary of the code This code contains three different animation methods for a single element. The element's color and shadow dynamically change based on the current animation frame. **Key Points:** * Three animations are defined using the `@keyframes` rule. * Each animation changes the element's position and shadow position based on the frame index. * The animations use the `background-position-x` property to achieve this effect. * The animations use different frame counts to achieve the desired animation effect. * The code uses `background-image` to control the background image sequence, which affects the animation. * Hover states are also handled for a more interactive effect. **Overall, the code demonstrates the use of various animation techniques to achieve a visually engaging effect.** **Additional Notes:** * The code is written in SCSS. * The `background-image` approach allows for smooth transitions between frames. * The use of different frame counts for each animation creates a smooth animation with varying speeds. * The code efficiently implements different animation techniques with minimal code duplication.

正文

华丽炫酷的动画特效总能够让人心旷神怡,不能自已。艳羡之余,如果还能够探究其华丽外表下的实现逻辑,那就是百尺竿头,更上一步了。本次我们使用图片、SCSS样式以及SVG图片动画来实现“点赞”按钮的动画特效,并比较不同之处。

图片实现

最简单,也最容易理解的实现方式就是使用图片。曾几何时,几乎所有前端特效都需要借助图片来完成。

实现原理很简单,通过不同的关键帧来“拼接”一段完整的动画影片,每一帧即该动画的每一个瞬间“状态”。

首先声明必要的盒子模型:

<div class="heart"></div>

这里以div为例子,声明伪类对象heart。

随后通过样式对heart伪类进行控制:

.heart {  
  cursor: pointer;  
  height: 50px;  
  width: 50px;  
  background-image:url( 'https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png');  
  background-position: left;  
  background-repeat:no-repeat;  
  background-size:2900%;  
}  
  
.heart:hover {  
  background-position:right;  
}  
  
.is_animating {  
  animation: heart-burst .8s steps(28) 1;  
}  
  
@keyframes heart-burst {  
  from {background-position:left;}  
  to { background-position:right;}  
}

这里指定背景图片位置,只显示最左侧的背景元素,鼠标悬停时则只显示最右侧背景元素,然后当鼠标点击div时,触发@keyframes heart-burst动画,从左侧移动至右侧,一共进行28帧的侧移动作:

这样就完成了一段流畅的动画特效:

See the Pen <a href="https://codepen.io/v3ucom/pen/yLjNERX"> Untitled</a> by 刘悦的技术博客 (<a href="https://codepen.io/v3ucom">@v3ucom</a>) on <a href="https://codepen.io">CodePen</a>.

需要注意的是,这里需要借助JavaScript绑定单击事件,所以需要引入zepto.min.js文件

https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js

通过zepto.min.js库就可以很方便的操作页面节点:

$(".heart").on('click touchstart', function(){  
  $(this).toggleClass('is_animating');  
});  
  
$(".heart").on('animationend', function(){  
  $(this).toggleClass('is_animating');  
});

逻辑是单击事件触发动画,动画执行过程中再次点击则移除动画效果。

此种方式依赖多帧背景图、CSS动画以及JavaScript事件绑定,显然成本有些高,同时多帧图片平铺导致体积过大,也会占用系统带宽,得不偿失。

纯SCSS(样式)实现

使用纯CSS样式也可以完成这样的特效,但CSS3原生语法太过复杂,这里我们使用SCSS语法,SCSS是 CSS3的超集,在保证兼容性的前提下,允许使用变量、 嵌套、 混合、导入等特性, 在编写逻辑复杂的CSS代码时,可以简化逻辑,提高CSS的代码可读性。

首先还是创建基本盒子模型:

<input id="toggle-heart" type="checkbox"/>  
<label for="toggle-heart">❤</label>

这里通过复选框和标签元素来控制点赞按钮的状态。

随后编写SCSS逻辑:

$bubble-d: 4.5rem; // bubble diameter  
$bubble-r: .5*$bubble-d; // bubble-radius  
  
@mixin bubble($ext) {  
  transform: scale(1);  
  border-color: #cc8ef5;  
  border-width: $ext;  
}  
  
body {  
  display: flex;  
  justify-content: center;  
  margin: 0;  
  height: 100vh;  
}  
  
[id='toggle-heart'] {  
  position: absolute;  
  left: -100vw;  
    
  &:checked + label {  
    color: #e2264d;  
    will-change: font-size;  
    animation: heart 1s cubic-bezier(.17, .89, .32, 1.49);  
      
    &:before, &:after {  
      animation: inherit;  
      animation-timing-function: cubic-bezier(.21, .61, .35, 1);  
    }  
      
    &:before {  
      will-change: transform, border-width, border-color;  
      animation-name: bubble;  
    }  
  }  
}  
  
[for='toggle-heart'] {  
  align-self: center;  
  position: relative;  
  color: #aab8c2;  
  font-size: 2em;  
  cursor: pointer;  
    
  &:before, &:after {  
    position: absolute;  
    z-index: -1;  
    top: 50%; left: 50%;  
    border-radius: 50%;  
    content: '';  
  }  
    
  &:before {  
    box-sizing: border-box;  
    margin: -$bubble-r;  
    border: solid $bubble-r #e2264d;  
    width: $bubble-d; height: $bubble-d;  
    transform: scale(0);  
  }  
}  
  
@keyframes heart {  
  0%, 17.5% { font-size: 0; }  
}  
  
@keyframes bubble {  
  15% { @include bubble($bubble-r); }  
  30%, 100% { @include bubble(0); }  
}

这里首先将复选框按钮移出界面,随后定义bubble对象,这里bubble指的是点击后膨胀的紫色(#cc8ef5)泡泡,直径是4.5rem,并且圆角修饰:$bubble-r: .5*$bubble-d

随后通过id选择器toggle-heart状态判断元素状态,触发heart和bubble动画,在一秒内动态的改变heart元素以及bubble元素的位置、大小以及边框透明度,从而完成动态特效。

接着添加烟花特效:

body {  
  display: flex;  
  justify-content: center;  
  margin: 0;  
  height: 100vh;  
  background: linear-gradient(135deg, #121721, #000);  
  font: 1em verdana, sans-serif;  
}  
  
[id='toggle-heart'] {  
  position: absolute;  
  left: -100vw;  
}  
[id='toggle-heart']:checked + label {  
  color: #e2264d;  
  filter: none;  
  will-change: font-size;  
  -webkit-animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);  
          animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);  
}  
[id='toggle-heart']:checked + label:before, [id='toggle-heart']:checked + label:after {  
  -webkit-animation: inherit;  
          animation: inherit;  
  -webkit-animation-timing-function: ease-out;  
          animation-timing-function: ease-out;  
}  
[id='toggle-heart']:checked + label:before {  
  will-change: transform, border-width, border-color;  
  -webkit-animation-name: bubble;  
          animation-name: bubble;  
}  
[id='toggle-heart']:checked + label:after {  
  will-change: opacity, box-shadow;  
  -webkit-animation-name: sparkles;  
          animation-name: sparkles;  
}  
[id='toggle-heart']:focus + label {  
  text-shadow: 0 0 3px white,  0 1px 1px white, 0 -1px 1px white,  1px 0 1px white, -1px 0 1px white;  
}  
  
[for='toggle-heart'] {  
  align-self: center;  
  position: relative;  
  color: #888;  
  font-size: 2em;  
  filter: grayscale(1);  
  -webkit-user-select: none;  
     -moz-user-select: none;  
      -ms-user-select: none;  
          user-select: none;  
  cursor: pointer;  
}  
[for='toggle-heart']:before, [for='toggle-heart']:after {  
  position: absolute;  
  z-index: -1;  
  top: 50%;  
  left: 50%;  
  border-radius: 50%;  
  content: '';  
}  
[for='toggle-heart']:before {  
  box-sizing: border-box;  
  margin: -2.25rem;  
  border: solid 2.25rem #e2264d;  
  width: 4.5rem;  
  height: 4.5rem;  
  transform: scale(0);  
}  
[for='toggle-heart']:after {  
  margin: -0.1875rem;  
  width: 0.375rem;  
  height: 0.375rem;  
  box-shadow: 0.32476rem -3rem 0 -0.1875rem #ff8080, -0.32476rem -2.625rem 0 -0.1875rem #ffed80, 2.54798rem -1.61656rem 0 -0.1875rem #ffed80, 1.84982rem -1.89057rem 0 -0.1875rem #a4ff80, 2.85252rem 0.98418rem 0 -0.1875rem #a4ff80, 2.63145rem 0.2675rem 0 -0.1875rem #80ffc8, 1.00905rem 2.84381rem 0 -0.1875rem #80ffc8, 1.43154rem 2.22414rem 0 -0.1875rem #80c8ff, -1.59425rem 2.562rem 0 -0.1875rem #80c8ff, -0.84635rem 2.50595rem 0 -0.1875rem #a480ff, -2.99705rem 0.35095rem 0 -0.1875rem #a480ff, -2.48692rem 0.90073rem 0 -0.1875rem #ff80ed, -2.14301rem -2.12438rem 0 -0.1875rem #ff80ed, -2.25479rem -1.38275rem 0 -0.1875rem #ff8080;  
}  
  
@-webkit-keyframes heart {  
  0%, 17.5% {  
    font-size: 0;  
  }  
}  
  
@keyframes heart {  
  0%, 17.5% {  
    font-size: 0;  
  }  
}  
@-webkit-keyframes bubble {  
  15% {  
    transform: scale(1);  
    border-color: #cc8ef5;  
    border-width: 2.25rem;  
  }  
  30%, 100% {  
    transform: scale(1);  
    border-color: #cc8ef5;  
    border-width: 0;  
  }  
}  
@keyframes bubble {  
  15% {  
    transform: scale(1);  
    border-color: #cc8ef5;  
    border-width: 2.25rem;  
  }  
  30%, 100% {  
    transform: scale(1);  
    border-color: #cc8ef5;  
    border-width: 0;  
  }  
}  
@-webkit-keyframes sparkles {  
  0%, 20% {  
    opacity: 0;  
  }  
  25% {  
    opacity: 1;  
    box-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080, -0.32476rem -2.0625rem 0 0rem #ffed80, 2.1082rem -1.26585rem 0 0rem #ffed80, 1.41004rem -1.53985rem 0 0rem #a4ff80, 2.30412rem 0.85901rem 0 0rem #a4ff80, 2.08305rem 0.14233rem 0 0rem #80ffc8, 0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080;  
  }  
}  
@keyframes sparkles {  
  0%, 20% {  
    opacity: 0;  
  }  
  25% {  
    opacity: 1;  
    box-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080, -0.32476rem -2.0625rem 0 0rem #ffed80, 2.1082rem -1.26585rem 0 0rem #ffed80, 1.41004rem -1.53985rem 0 0rem #a4ff80, 2.30412rem 0.85901rem 0 0rem #a4ff80, 2.08305rem 0.14233rem 0 0rem #80ffc8, 0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080;  
  }  
}

新增sparkles对象,通过动态的控制元素的彩色阴影来表现点击后的烟花动态效果:

See the Pen <a href="https://codepen.io/v3ucom/pen/eYrNLWY"> Untitled</a> by 刘悦的技术博客 (<a href="https://codepen.io/v3ucom">@v3ucom</a>) on <a href="https://codepen.io">CodePen</a>.

这里为了增加效果对比度,将背景设置为深色,同时为点赞按钮增加亮色边框:

[id='toggle-heart']:focus + label {  
  text-shadow:   
    0 0 3px #fff,   
    0 1px 1px #fff, 0 -1px 1px #fff,   
    1px 0 1px #fff, -1px 0 1px #fff;  
}

大体上,利用transform属性控制元素的绝对定位、颜色、边框以及盒子模型阴影来完成此种特效,带宽资源占用层面,明显比图片更具优势。

SVG实现

SVG是矢量图形,不受像素的影响,从而使得它在不同的平台或者媒体下表现出的兼容性更好,与此同时,SVG对动画的支持较好,其DOM结构可以被其特定语法或者CSS控制,从而轻松的实现动画效果。

首先依然声明盒子模型:

<label class="like">  
  <input type="checkbox"/>  
  <div class="hearth"/>  
</label>

随后定义样式:

:root {  
  --size: 100px;  
  --frames: 62;  
}  
  
html {  
  background-color: #15202B;  
  min-height: 100vh;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  user-select: none;  
}  
  
input {  
  display: none;  
}  
  
.like {  
  display: block;  
  width: var(--size);  
  height: var(--size);  
  cursor: pointer;  
  border-radius: 999px;  
  overflow: visible;  
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
  -webkit-tap-highlight-color: transparent;  
}  
  
.hearth {  
  background-image: url('https://assets.codepen.io/23500/Hashflag-AppleEvent.svg');  
  background-size: calc(var(--size) * var(--frames)) var(--size);  
  background-repeat: no-repeat;  
  background-position-x: calc(var(--size) * (var(--frames) * -1 + 2));  
  background-position-y: calc(var(--size) * 0.02);  
  width: var(--size);  
  height: var(--size);  
}  
  
input:checked + .hearth {  
  animation: like 1s steps(calc(var(--frames) - 3));    
  animation-fill-mode: forwards;  
}  
  
@keyframes like {  
  0% {  
    background-position-x: 0;  
  }  
  100% {  
    background-position-x: calc(var(--size) * (var(--frames) * -1 + 3));  
  }  
}  
  
@media (hover: hover) {  
  .like:hover {  
    background-color: #E1255E15;  
    .hearth {  
      background-position-x: calc(var(--size) * (var(--frames) * -1 + 1));  
    }  
  }  
}

和普通图片如出一辙,通过background-image来控制背景SVG图片的顺序,对背景的横坐标进行侧移动画操作,只不过帧数提高到62帧:

See the Pen <a href="https://codepen.io/v3ucom/pen/MWGwXPv"> Untitled</a> by 刘悦的技术博客 (<a href="https://codepen.io/v3ucom">@v3ucom</a>) on <a href="https://codepen.io">CodePen</a>.

可以看到这里通过input:checked状态就可以触发@keyframes like横移动画,并不需要单独撰写JavaScript逻辑。

结语

三种动画特效实现方式各有千秋,但从可维护性以及成本控制角度上看,SCSS显然是最优解。

与一颗红心,三手准备,分别基于图片(img)/SCSS(样式)/SVG动画实现动态拉轰的点赞按钮特效相似的内容:

一颗红心,三手准备,分别基于图片(img)/SCSS(样式)/SVG动画实现动态拉轰的点赞按钮特效

华丽炫酷的动画特效总能够让人心旷神怡,不能自已。艳羡之余,如果还能够探究其华丽外表下的实现逻辑,那就是百尺竿头,更上一步了。本次我们使用图片、SCSS样式以及SVG图片动画来实现“点赞”按钮的动画特效,并比较不同之处。 图片实现 最简单,也最容易理解的实现方式就是使用图片。曾几何时,几乎所有前端特效

5.1 C++ STL 集合数据容器

Set/Multiset 集合使用的是红黑树的平衡二叉检索树的数据结构,来组织泛化的元素数据,通常来说红黑树根节点每次只能衍生出两个子节点,左面的节点是小于根节点的数据集合,右面的节点是大于根节点的集合,通过这样的方式将数据组织成一颗看似像树一样的结构,而平衡一词的含义则是两边的子节点数量必须在小于等1的区间以内。Set集合天生去重,所有元素都会根据元素的键值自动的排序,并且Set元素在确定后无法

[转帖]LSM树详解

https://zhuanlan.zhihu.com/p/181498475 LSM树(Log-Structured-Merge-Tree)的名字往往会给初识者一个错误的印象,事实上,LSM树并不像B+树、红黑树一样是一颗严格的树状数据结构,它其实是一种存储结构,目前HBase,LevelDB,Ro

玫瑰花变蚊子血,自动化无痕浏览器对比测试,新贵PlayWright Vs 老牌Selenium,基于Python3.10

也许每一个男子全都有过这样的两个女人,至少两个。娶了红玫瑰,久而久之,红的变了墙上的一抹蚊子血,白的还是床前明月光;娶了白玫瑰,白的便是衣服上沾的一粒饭黏子,红的却是心口上一颗朱砂痣。--张爱玲《红玫瑰与白玫瑰》 Selenium一直都是Python开源自动化浏览器工具的王者,但这两年微软开源的Pl

【单片机入门】(四)应用层软件开发的单片机学习之路-----ESP32开发板PWM控制电机以及中断的使用

引言 各位大佬,晚上好啊,在上一篇博客中,我们讲了什么是UART串口通讯,以及使用USB转TTL使得单片机可以和c#上位机做一个串口通讯,接下来,为大家带来PWM的概念原理,以及实际案例,使用PWM对电机进行速度调制,因为本课程的最后是做一个红外遥控的智能小车,所以是需要电机四个,驱动四个,轮胎四个

以开发之名 | 小红书:用年轻人的方式开发年轻人喜欢的应用

2013年,小红书在上海成立,同年12月,小红书推出海外购物分享社区。一个开放式的体验型分享社区走进了数亿用户的生活。每个人都能在这个开放社区,分享自己的生活笔记,给有同样需求的人种草。 小红书用户“一只雪梨酱”的车胎出现了裂痕,她拍了一张照片并附上文字 “这种情况需要换胎吗?”发了一篇小红书笔记,

[转帖]周鸿祎与齐向东:在政企安全的大路上,各走一边

https://m.thepaper.cn/baijiahao_4387848 9月3日,360政企安全新战略发布会在北京召开,正式宣布与奇安信彻底“分家”后,360的政企安全战略进入3.0时代。 在会议上,周鸿祎与往常一样身着红色T恤,显得意气冲冲,坦言道:“今天我把原来不喜欢、不认可的一些业务卖

硬件开发笔记(二十一):外部搜索不到的元器件封装可尝试使用AD21软件的“ManufacturerPart Search”功能

前言 这是一个AD的一个强大的新功能,能招到元器件的原理图、3D模型还有价格厂家,但是不一定都有,有了也不一定有其3D模型。 ManufacturerPart Search 在设计工具中选择即用型元件 直接搜索,搜索到需要使用的元器件。在Altium Designer中,直接选中设备元件。无需使用第

硬件开发笔记(十七):RK3568底板电路串口、485、usb原理图详解

前言 原理图有一些常用电路。 本篇就将集中常用电路分析完,如uart口,涉及usart串口、rs485、usb口。 串口 串行接口简称串口,也称串行通信接口或串行通讯接口(通常指COM接口),是采用串行通信方式的扩展接口。串行接口(Serial Interface)是指数据一位一位地顺序传送。其特点

RK3588开发笔记(四):基于定制的RK3588一体主板升级镜像

前言 方案商定制的主板,加入了360°环视算法功能,涉及到了一些库的添加,重新制作了依赖库的镜像,镜像更新的原来的板子上。 定制的板子 升级接口type-c 设计接口是type-c,需要通过type-c数据线转USB连接电脑,这里开发板都是USB对USB口的线,设计有所不同。 升级按键方法 这里的按