博客文章点赞收藏按钮点击效果代码
代码语言:html
所属分类:布局界面
代码描述:博客文章点赞收藏按钮点击效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Inter:400,500,600,&display=swap'>
<style>
.like {
--color: #000;
--background: #fff;
--stroke: #6b7280;
--border-color: #e5e7eb;
--fill: #e5e7eb;
--a-color: #10b981;
--a-background: #ecfdf5;
--a-stroke: #10b981;
--a-border-color: #a7f3d0;
--a-fill: #a7f3d0;
--height: 66px;
--width: 66px;
--radius: 6px;
--duration: 0.3s;
--function: cubic-bezier(0, 0.88, 0.46, 1.36);
--shadow: rgba(0, 0, 0, 0.05);
position: relative;
background: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: var(--height);
width: var(--width);
padding: 0;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
cursor: pointer;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
}
.like:hover:before {
--b-shadow: 0 0 4px 1px var(--shadow);
}
.like:hover .icon {
--i-bottom: 3px;
}
.like:hover .shadow {
--s-opacity: 1;
}
.like:active:before {
--b-height: calc(var(--height) + 2px);
--b-radius: calc(var(--radius) * 5) calc(var(--radius) * 5) var(--radius)
var(--radius) / calc(var(--radius) * 1.6) calc(var(--radius) * 1.6)
var(--radius) var(--radius);
}
.like:active .icon {
--i-bottom: 17px;
}
.like:active .shadow {
--s-width: 20px;
}
.like:active .number {
--n-top: 2px;
}
.like.active:before {
--background: var(--a-background);
--border: var(--a-border-color);
}
.like.active .icon {
--fill: var(--a-border-color);
--stroke: var(--a-stroke);
}
.like.active .number {
--color: var(--a-color);
}
.like:before {
--delay: 50ms;
content: "";
z-index: -1;
position: absolute;
bottom: 0;
background: var(--background);
border: 1px solid var(--border, var(--border-color));
height: var(--b-height, calc(100% - 2px));
width: var(--b-width, calc(100% - 2px));
box-shadow: var(--b-shadow, none);
border-radius: var(--b-radius, var(--radius));
transition: border-radius var(--duration) var(--function) var(--delay), h.........完整代码请登录后点击上方下载按钮下载查看
网友评论0