Heim  >  Artikel  >  Web-Frontend  >  twitter点赞动画详解_html/css_WEB-ITnose

twitter点赞动画详解_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:31:391667Durchsuche

今天在微博上看到@过气网红一丝 的一篇微博,codepen上贴出了twitter点赞那个动画效果的源码,地址 http://codepen.io/yisi/pen/LpXVJb 。我看了下效果很好看,源码也很简单,涉及到css3一些简单的动画,现在来介绍一下这个动画所用到的一些技术。

先上效果图,为了能看得清楚我把动画时间间隔设置的大了一些。

把源码贴出来:没用到js,只用到了html以及css。

html代码如下

<h1>Twitter heart button animation</h1><input type="checkbox" name="" id="btn" /><label class="btn-love" for="btn"></label><a href="http://codepen.io/chrisgannon/pen/NGLKWO" target="_blank">The SVG version</a>

 

css代码如下 

 1     body { 2           text-align: center; 3     } 4  5     h1 { 6       text-align: center; 7       color: #555; 8       font-weight: normal; 9     }10 11     #btn {12       position: absolute;13       left: -100%;14       top: -100%;15       opacity: 0;16       z-index: -1;17     }18 19     .btn-love {20       position: absolute;21       z-index: -1;22       left: 0;23       right: 0;24       top: 0;25       bottom: 0;26       margin: auto;27       height: 100%;28       width: 100%;29       cursor: pointer;30     }31     .btn-love:after {32       content: "";33       position: absolute;34       left: 0;35       right: 0;36       top: 100px;37       margin: 0 auto;38       background: url(https://abs.twimg.com/a/1446862637/img/t1/web_heart_animation.png) 0 0 no-repeat;39       background-size: 2900%;40       height: 100px;41       width: 100px;42     }43 44     #btn:checked + .btn-love:after {45       -webkit-animation: heart-burst steps(28) .8s 1 both;46               animation: heart-burst steps(28) .8s 1 both;47     }48 49     @-webkit-keyframes heart-burst {50       0% {51         background-position: left;52       }53       100% {54         background-position: right;55       }56     }57 58     @keyframes heart-burst {59       0% {60         background-position: left;61       }62       100% {63         background-position: right;64       }65     }

 

 

css前面的代码也很好懂,我就从31行处开始说吧。这就是给前面对应的class为”btn-love“的label标签设置其背景图片。可以看到背景图片加的是一个链接,这个链接后的背景图片就是下面这个长图。

看到这里大家也能猜到,就是用个长图设置开始显示的位置和结束时的位置,并设置其变化的时间,一帧一帧的播放,来模拟一个动画效果。

 

#btn:checked + .btn-love:after {      -webkit-animation: heart-burst steps(28) .8s 1 both;              animation: heart-burst steps(28) .8s 1 both;    }

 

:checked 是css3里用来匹配所有选中的 input 元素,这个应该并没有什么疑问。

 

再看大括号里面是个动画效果用到了css3里面的 animation属性,这个属性是一个简写属性,用来设置以下的几个动画属性的。

animation-name:规定需要绑定到选择器的keyframe名称。

animation-duration:规定完成动画所花费的时间,以秒或者毫秒计算。

animation-timing-function:规定动画的速度曲线。其值可取 ease| linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps([, [ start | end ] ]?) | cubic-bezier(x1, y1, x2, y2)

animation-delay:规定在动画开始之前的延迟。

animation-iteration-count:规定动画应该播放的次数。

animation-direction:规定是否应该轮流反向播放动画。

animation-play-state:属性规定动画正在运行还是暂停。

animation-fill-mode:规定动画在播放前与播放完毕,其动画效果是否可见。

 

括号里面一共设置了5个值。 

第一个值设置的是animation-name。heart-burst就是该动画所设置的动画名。

第二个值设置的是animation-timing-function。steps(28)是什么意思呢?正因为上述动画并不是线性的,而是类似于一帧一帧的图片播放,所以就要引入step()这个函数,下面详细说下这个函数以及这个属性的具体用法。

animation-timing-function这个属性可以取以下的几个值。

ease:动画缓慢开始,接着加速,最后减慢,默认值;

linear:动画从头到尾的速度是相同的;

ease-in:以低速开始;

ease-out:以低速结束;

ease-in-out:动画以低速开始和结束;

step函数指定了一个阶跃函数

第一个参数指定了时间函数中的间隔数量(必须是大于零正整数)。将动画分成不同的步骤。

第二个参数是可选的,接受 start 和 end 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end。

step-start等同于steps(1,start),动画分成一步,动画执行时为开始左侧端点的部分为开始;

step-end等同于steps(1,end):动画分成一步,动画执行时以结尾端点为开始,默认值为end。

并且animation-timing-function这个属性是针对于每一帧和每一帧动画之间的设定,并不是整个@keyframes,并且并不等同与@keyframes里设置的关键帧。

还以当前这个例子举例。可以看到下面的代码,是直接从0%变换到100%的,

@keyframes heart-burst {      0% {        background-position: left;      }      100% {        background-position: right;      }    }

 若给0%与100%其中再加上任意一个状态,我们来看一下效果就变成了如下动图(为了观察明显,依旧延长了动画时间)

 

你会发现,动画就出现了问题。

 

第三个值按照简写的顺序的话应该是animation-delay?其实并不是,这里应该是animation-duration。在animation里只设置一个以秒或者毫秒的值时,将其值默认为animation-duration的值。若设置两个值时,则会按照先给animation-duration后animation-delay的顺序赋给相应值。所以0.8s是设置完成整个动画一共多少时间。我们可以尝试将这个0.8s的值设置更大,看到的是动画变慢,而不是动画设置延迟变大,从而验证了我的说法。

第四个值是给animation-iteration-count设置值。所以设置的1是设置动画循环的次数,若改为2则可以看到动画在一遍播放结束之后会播放第二遍。

第五个值是给animation-fill-mode设置值。animation-fill-mode属性一共有4个值,分别如下。

none:不改变默认行为。

forwards:当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。

backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。

both:向前和向后填充模式都被应用。

可以看到上面设置的是both,如果我们将both取消掉的时候可以看到如下的动画。 (!!!这里字体大小修改了好多遍还是不知道什么原因总是调整不过来,所以将就看吧。。!!!)

 

 

可以看到其并不保持点赞后的“红心”状态,完成动画后立即恢复到动画初始帧。所以我们可以得出来both设置的目的是在动画开始和结束后维持其动画所在的那一帧。

 

这个动画里没有涉及到的是animation-delay,animation-direction和animation-play-state。animation-delay就是设置动画延迟的时间,上面已经说过。animation-direction 属性定义是否应该轮流反向播放动画,有两个值可取分别是normal和alternate。normal为默认值即不轮播,alternate设置动画轮流反向播放。animation-play-state设置动画是暂停还是播放。这个一般应该与js相结合使用,点击改变该属性对应的值,实现动画的暂停与播放。比如点击一下后暂停播放,再点击一下后继续播放动画。那么其值paused与running也就很好理解了。

上面差不多就是根据这个twitter点赞动画简单介绍了一下css animation属性的常用方法。

 

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn