1. 首页
  2. css

CSS重新创建Twitter心脏动画(只有一个元素,没有图像,没有JavaScript)

我最近在CodePen上看到了一个Twitter心脏动画的重新制作。如果我碰巧有一点时间,我总是浏览那些引起我注意的演示代码,看看里面是否有我可以使用或改进的地方。在这种情况下,我惊讶地看到演示使用的是图像精灵。后来我才知道Twitter就是这样做的。当然可以不用图像,对吧?我决定试一试。我还决定不使用JavaScript,因为这是复选框黑客的完美选择,它允许您通过表单元素和巧妙的CSS进行简单的打开/关闭切换。
p>结果:
!查看原始精灵原始twitter心脏精灵。在新选项卡中查看。
它有29帧,在计算之前,这个数字我没有问题。当它在我看来开始难看的时候,因为它是一个大素数,我不能把它除以2,4,或5这样漂亮的小数字得到一个整数。哦,好吧……这就是近似的好处。29与28非常接近,后者是4的倍数,后者是5的倍数(5 *>). So we could take this 29是28或30,以最适合我们的为准。
关于精灵的下一件事是它有三个组成部分:
– 心脏
– 心脏后面的气泡
– 周围的粒子心脏是由一个元素和两个伪元素组成的。心脏是元素本身,气泡是::before伪元素,粒子是::after伪元素。使用checkbox hack整个心脏及其其他部分将成为checkbox的。单击标签将切换复选框并允许我们处理这两种状态。在这种情况下,我们的HTML看起来像这样,一个复选框和一个包含unicode心脏的标签:Let\”s get the checkbox out of sight:We then set a color心脏的值取决于复选框是否选中。我们使用颜色选择器从精灵中提取实际值。Center and enlargeWe also set cursor: pointer在标签上增加font-size,因为它看起来太小了。Then we position it in the middle of the screen so we can see it better. Thank you, flexbox!body {display: flex;justify-content: center; /* horizontal alignment */margin: 0;height: 100vh; /* the viewport height */}/* vertical alignment, needs the height ofthe body to be equal to that of theviewport if we want it in the middle>We now have a heart that\”s grey when the checkbox isn\”t checked and crimson when it is:Animating the size growth of the heartLooking at the sprite, we see that the heart is scaled to 0从帧2到帧6。在第6帧之后,它开始增长,然后从某个点开始略有下降。这种grow是easeOutBack计时函数的完美用例。我们把grow的起始值设为19,因为这是一个很好的数字,考虑到我们的总帧数,这似乎是一个很好的近似值。现在我们需要决定如何进行缩放。我们不能使用scale()变换,因为这也会影响我们元素的任何后代或伪体,我们不希望当我们的心在时被缩放到0。因此,我们使用font-size.@keyframes heart { 0%, 17.5% { font-size: 0; }>The result of the above code can be seen in the following Pen:If we don\”t include the 0%或100%关键帧,它们使用我们为该元素设置的值自动生成(在我们的例子中是font-size: 2em),或者,如果我们没有这样做,根据默认值(在font-size的情况下是1em)。气泡现在让我们转到创建气泡的伪元素(还有粒子,我们将在下面讨论)。我们把position: relative放在我们的心脏标签上,这样我们就可以绝对定位它们。我们希望他们在心脏下面,所以我们用z-index: -1来做这个。我们想让他们在中间,所以在50%从top和left这是。气泡和粒子都是圆的,所以我们给它们33。我们将在这里开始使用SCSS语法,因为我们最终将使用它,因为我们需要做一些计算。我们使用的是rem单位,而不是em,因为元素的font-size正在被设置动画来改变心脏的大小。我们把::before伪码放在中间。我们也给它一个测试背景,只是为了看看它在那里,它看起来是正确的(我们稍后删除这个):$bubble-d: 4.5rem; // bubble diameter$bubble-r: .5 * $bubble-d; //>So far so good:From frame 2通过帧5,气泡从零增长到它的全部大小,并从一个深红色变成紫色。然后,通过第41帧,它在中间长出一个洞,直到这个洞和气泡本身一样大。成长的部分看起来像是一个动画的scale()转换可以做的工作。我们可以通过设置border-width从$bubble-r(气泡半径)到0的动画来获得增长的洞。请注意,我们还需要在气泡上设置box-sizing: border-box(伪::before),这样才能工作。We can compact the keyframes with a mixin:@mixin bubble($ext) {border-color: #cc8ef5;border-width: $ext;transform: scale(1);}@keyframes bubble {15% { @include bubble($bubble-r); }30%, 100% { @include bubble(0); }}我们还可以使伪对象继承心脏动画,将它们都切换到easeOutCubic类计时函数,并分别更改animation-name:We can check out what the above code produces in the following Pen:The particlesLooking at the sprite, we can see that we have seven groups of two round particles each and that these groups are distributed on a circle. Closeup of three consecutive frames in the sprite, showing the particles in groups around the heart.What changes about them is their opacity,它们的位置(因为组所在圆的半径增大)和大小。我们创建具有多个长方体阴影的粒子(每个粒子一个)

CSS重新创建Twitter心脏动画(只有一个元素,没有图像,没有JavaScript) 为WP2原创文章,链接:https://www.wp2.cn/css/css%e9%87%8d%e6%96%b0%e5%88%9b%e5%bb%batwitter%e5%bf%83%e8%84%8f%e5%8a%a8%e7%94%bb%ef%bc%88%e5%8f%aa%e6%9c%89%e4%b8%80%e4%b8%aa%e5%85%83%e7%b4%a0%ef%bc%8c%e6%b2%a1%e6%9c%89%e5%9b%be%e5%83%8f%ef%bc%8c/