仿头条的点赞效果Html+css
觉得头条文章里面的点赞效果还是挺不错的,简单,简洁,和大部分主题都很搭,所以扒下来记住,以后方便整合使用
html页面代码
<button type="button" id="agree-btn" class="detail-like like">
<div class="digg-icon"><div class="inner"><i></i></div></div>
<span class="agree-num">1</span></button>
css样式代码
.p_like button[disabled] .digg-icon{
background: #fff2f2;
}
.p_like button[disabled] .digg-icon i {
-webkit-transform-origin: -16% 66%;
-moz-transform-origin: -16% 66%;
transform-origin: -16% 66%;
-webkit-animation: like .7s forwards;
-moz-animation: like .7s forwards;
animation: like .7s forwards;
background-image: url(https://lf3-cdn2-tos.bytescm.com/toutiao/toutiao_web_pc/svgs/like_active.b265cb30.svg);
}
.p_like button[disabled] .agree-num{
color: #f04142;
}
.detail-like {
text-align: center;
cursor: pointer;
color: #222;
outline: none;
background: white;
}
.detail-like .digg-icon {
position: relative;
border-radius: 24px;
width: 48px;
height: 48px;
background: #f8f8f8;
}
.detail-like .digg-icon .inner {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
font-size: 0;
}
.detail-like .digg-icon i {
display: block;
width: 24px;
height: 24px;
background: url(https://lf3-cdn2-tos.bytescm.com/toutiao/toutiao_web_pc/svgs/like.0caed57a.svg) no-repeat 50%;
background-size: contain;
}
.detail-like>span {
display: inline-block;
margin-top: 4px;
font-size: 12px;
line-height: 20px;
}
@-webkit-keyframes like {
0%,
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
20% {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
-webkit-animation-timing-function: cubic-bezier(.66, 0, .34, 1);
animation-timing-function: cubic-bezier(.66, 0, .34, 1)
}
48% {
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out
}
75% {
-webkit-transform: rotate(-1deg);
transform: rotate(-1deg);
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
}
@-moz-keyframes like {
0%,
to {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-moz-animation-timing-function: ease;
animation-timing-function: ease
}
20% {
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
-moz-animation-timing-function: cubic-bezier(.66, 0, .34, 1);
animation-timing-function: cubic-bezier(.66, 0, .34, 1)
}
48% {
-moz-transform: rotate(8deg);
transform: rotate(8deg);
-moz-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out
}
75% {
-moz-transform: rotate(-1deg);
transform: rotate(-1deg);
-moz-animation-timing-function: ease;
animation-timing-function: ease
}
}
@keyframes like {
0%,
to {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease
}
20% {
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
-webkit-animation-timing-function: cubic-bezier(.66, 0, .34, 1);
-moz-animation-timing-function: cubic-bezier(.66, 0, .34, 1);
animation-timing-function: cubic-bezier(.66, 0, .34, 1)
}
48% {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
transform: rotate(8deg);
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out
}
75% {
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
transform: rotate(-1deg);
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease
}
}
以上就是完整的代码案例,如果整合到typecho的点赞效果的话,可以参考这篇文章使用

typecho打造点赞功能(案例教程)
Typecho 默认是没有提供点赞相关的 API 的,需要涉及到数据库操作 编写函数 Typecho 提供了一个 functions.php,可以用来定义函数....
文章由官网发布,如若转载,请注明出处:https://www.dpaoz.com/1048
3 条评论
1.1k
发表评论
已有 3 条评论

热门文章
自媒体博客Spimes主题11w 阅读
Spimes主题专为博客、自媒体、资讯类的网站设计....
Spzac个人资讯下载类主题6.6w 阅读
用于作品展示、资源下载,行业垂直性网站、个人博客,....
Splity博客双栏主题4.8w 阅读
仿制主题,Typecho博客主题,昼夜双版设计,可....
vCard主题个人简历主题4.3w 阅读
一款个人简历主题,可以简单搭建一下,具体也比较简单....
热评文章
自媒体博客Spimes主题266 评论
Splity博客双栏主题170 评论
Spzac个人资讯下载类主题82 评论
Spzhi知识付费社区主题34 评论
Splinx博客图片主题33 评论
vCard主题个人简历主题27 评论
Pure轻简主题22 评论
Spkan视频影视类模板21 评论
看着是挺好看的:大哭:
@qwuaz
简单实用而已,现在已经不喜欢很花哨的东西了,网站主要还是内容