首页 > 代码库 > 利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果
利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果
1.颜色小tip知识
在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色
在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更亮的颜色
单个颜色实现 hover 和 active 时的明暗变化效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>单个颜色实现 hover 和 active 时的明暗变化效果</title> <style type="text/css"> a { text-decoration: none; } .rubby { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 260px; text-align: center; padding: 40px; font-size: 200%; font-weight: bolder; background-color: #00aabb; color: #fff; cursor: pointer; border-radius: 1em; } .rubby:before { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 1em; background-color: rgba(255,255,255,.2); z-index: -1; } .rubby:hover:before { content: ""; } .rubby:after { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.3); border-radius: 1em; z-index: -1; } .rubby:active:after { content: ""; } </style></head><body> <a href="#none" class="rubby">.Rubby</a></body></html>
文章转载
【CSS进阶】伪元素的妙用--单标签之美
利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。