1.創(chuàng)建html

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.backgroundbackground-position: left; (結(jié)束為right)

3.animate-duration：1s;(動畫運行時間)

4.animation-iteration-count ：n / infinite ;(循環(huán)次數(shù) n 不限)

5.animation-timing-function: steps(28);

速度曲線，使用三次貝塞爾函數(shù)的數(shù)學(xué)函數(shù)來生成速度曲線

參數(shù)為steps時：

第一個參數(shù)指定了時間函數(shù)中的間隔數(shù)量(必須是正整數(shù))

第二個參數(shù)可選，接受 start 和 end 兩個值，指定在每個間隔的起點或是終點發(fā)生階躍變化，默認(rèn)為 end。

step-start等同于steps(1,start)，動畫分成1步，動畫執(zhí)行時為開始左側(cè)端點的部分為開始；

step-end等同于steps(1,end)：動畫分成一步，動畫執(zhí)行時以結(jié)尾端點為開始，默認(rèn)值為end。

steps() 第一個參數(shù) number 為指定的間隔數(shù)，即把動畫分為 n 步階段性展示，估計大多數(shù)人理解就是keyframes寫的變化次數(shù)

作者：AstarX

鏈接：https://www.jianshu.com/p/753c4ea0c18c

總結(jié)

以上是生活随笔為你收集整理的html直播点赞特效,CSS3实现红心点赞特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。