博客文章点赞收藏按钮点击效果代码
代码语言: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