为了账号安全,请及时绑定邮箱和手机立即绑定

CSS3实现红心点赞特效

2018.09.06 14:29 5499浏览

1.创建html

<view class="feed" bindtap='addAnimateFun' id="feed1">
<view class="heart {{addAnimate}}" id="like1" rel="like" style="background-position: {{cssAnimate}} center;"></view>

</view>

2. css

.heart {
background: url(http://demo.htmleaf.com/1511/201511131551/images/web_heart_animation.png);
background-position: left;
background-repeat: no-repeat;
height: 100px;
width: 100px;
cursor: pointer;
position: absolute;
left: -14px;
background-size: 2900%;
}

.heart:hover,
.heart:focus {
background-position: right;
}

@-webkit-keyframes heartBlast {
0% {
background-position: left;
}
100% {
background-position: right;
}
}

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

.heartAnimation {
display: inline-block;
-webkit-animation-name: heartBlast;
animation-name: heartBlast;
-webkit-animation-duration: .8s;
animation-duration: .8s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-timing-function: steps(28);
animation-timing-function: steps(28);
background-position: right;
}

@-webkit-keyframes dorsyHover {
0% {
-webkit-box-shadow: 0 0 1px 1px #aaa30a;
}
50% {
-webkit-box-shadow: 0 0 1px 1px #fdfbc4;
}
100% {
-webkit-box-shadow: 0 0 1px 1px yellow;
}
}

@-webkit-keyframes dorsyDelete {
0% {
-webkit-transform: rotate(0deg);
}
40% {
-webkit-transform: rotate(10deg);
}
80% {
-webkit-transform: rotate(-10deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}

3.js 点击事件添加类名

4.核心语义

1.background

  1. background-position: left; (结束为right)
    3.animate-duration:1s;(动画运行时间)
    4.animation-iteration-count :n / infinite ;(循环次数 n 不限)
    5.animation-timing-function: steps(28);

速度曲线,使用三次贝塞尔函数的数学函数来生成速度曲线

参数为steps时:
第一个参数指定了时间函数中的间隔数量(必须是正整数)
第二个参数可选,接受 start 和 end 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end。
step-start等同于steps(1,start),动画分成1步,动画执行时为开始左侧端点的部分为开始;
step-end等同于steps(1,end):动画分成一步,动画执行时以结尾端点为开始,默认值为end。

steps() 第一个参数 number 为指定的间隔数,即把动画分为 n 步阶段性展示,估计大多数人理解就是keyframes写的变化次数



作者:AstarX
链接:https://www.jianshu.com/p/753c4ea0c18c


点击查看更多内容
22人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消