css实现点赞动画

html-css013

css实现点赞动画,第1张

一.使用 transition 实现

会用到 steps(count, position) 方法,它是一个 timing function ,会把过渡分成 count 步 position 的默认值是 end ,还可以为 start 。假如现在有一个动画分成5段, end 会在第一段的时间执行完后才到第一段的终点即第二段的起点,一次类推执行动画,当执行到最后一段时,到达不了最后一步的终点就会到回到起点重新开始执行动画;而 start 是先到第一段的终点,等第一段的时间执行完后,到达第二段的终点,以此类推,能到达最后一段的终点。

具体实现如下:

效果图:

未完待续。。。

这个很简单,点击时用js改变图片,不过你这个图上的赞踩应该是icon字体,那么只要改变它的颜色就行,防止赞和踩同时被点只要用js判断其中一个元素的颜色是否被改变就行了,如果改变的话就不执行动作,但问题是你要有后端配合,否则一刷新又变回去了

可以使用Random类,这里我只准备了3种不同的爱心,来看看代码如何实现吧:

//首先定义 3个代表不同爱心的drawable,以及他们的和drawables

private Drawable red

private Drawable yellow

private Drawable blue

private Drawable[] drawables

//接下去我们初始化:

//初始化显示的图片

drawables = new Drawable[3]

red = getResources().getDrawable(R.mipmap.red)

yellow = getResources().getDrawable(R.mipmap.yellow)

blue = getResources().getDrawable(R.mipmap.blue)

//赋值给drawables

drawables[0]=red

drawables[1]=yellow

drawables[2]=blue

这样,下次取值时候只要使用如下代码,就能随机获取到爱心了:

drawables[random.nextInt(3)]//表示0-2的随机数,注意,3是取不到的。