jquery结合css实现红心点赞动画按钮效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery结合css实现红心点赞动画按钮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> @charset "utf-8"; body { color: #333333; padding: 50px; } a { color: #7ac9ed; } p { margin: 0px; padding: 0px; } #container { margin: 0 auto; width: 900px; font-family: arial; } #container h3 { font-family: "Microsoft YaHei"; } .heart { background: url(//repo.bfw.wiki/bfwrepo/image/5f9e99b7a03e1.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; } .feed p { font-family: "Microsoft YaHei",'Georgia', Times, Times New Roman, serif; font-size: 25px; } .feed { clear: both; margin-bottom::20px; height: 150px; position: relative; } .likeCount { font-family: 'Georgia', Times, Times New Ro.........完整代码请登录后点击上方下载按钮下载查看
网友评论0