仿头条的点赞效果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.veimoz.com/1048
3 条评论
3.5k
发表评论
已有 3 条评论
热门文章
自媒体博客Spimes主题34w 阅读
Spimes主题专为博客、自媒体、资讯类的网站设计....
vCard主题个人简历主题13w 阅读
一款个人简历主题,可以简单搭建一下,具体也比较简单....
Splity博客双栏主题11w 阅读
仿制主题,Typecho博客主题,昼夜双版设计,可....
Spzac个人资讯下载类主题11w 阅读
用于作品展示、资源下载,行业垂直性网站、个人博客,....
热评文章
自媒体博客Spimes主题418 评论
Splity博客双栏主题187 评论
Spzac个人资讯下载类主题89 评论
Splinx博客图片主题35 评论
Spzhi知识付费社区主题34 评论
三栏清新博客S_blog主题30 评论
vCard主题个人简历主题29 评论
Pure轻简主题28 评论
看着是挺好看的:大哭:
@qwuaz
简单实用而已,现在已经不喜欢很花哨的东西了,网站主要还是内容