button { background-color: #4CAF50; /* 设置按钮背景色 */ border: none; /* 去除按钮边框 */ color: white; /* 设置按钮文字颜色为白色 */ padding: 15px 32px; /* 设置按钮内边距 */ text-align: center; /* 设置文字居中显示 */ text-decoration: none; /* 去除文字下划线 */ display: inline-block; /* 设置为行内块元素,以便添加边框投影效果 */ font-size: 16px; /* 设置文字大小 */ margin: 4px 2px; /* 设置按钮间距 */ cursor: pointer; /* 鼠标放到按钮上时的指针样式 */ position: relative; /* 设置定位为相对定位 */ overflow: hidden; /* 超出部分隐藏 */ } button::before { content: ''; /* 伪元素,没有任何内容 */ position: absolute; /* 设置定位为绝对定位 */ top: 0; /* 设置离顶部的距离为0 */ left: 0; /* 设置离左边的距离为0 */ width: 100%; /* 设置宽度为100% */ height: 100%; /* 设置高度为100% */ background-color: rgba(255,255,0.2); /* 设置背景颜色为白色,透明度为0.2 */ border-radius: 50%; /* 设置为圆形 */ transform: scale(0); /* 设置缩放比例为0 */ transition: transform 0.5s ease-in-out; /* 设置过渡时间为0.5秒,缓和动画效果 */ z-index: 1; /* 设置z轴的值为1,让伪元素显示在按钮上层 */ } button:hover::before { transform: scale(2); /* 缩放比例为2:1 */ }
解释一下这段代码的作用:
- 第一段代码设置了按钮的样式,包括颜色、大小、字体、边距等,这里不赘述。
- 第二段代码使用伪元素before创建了一个背景,该背景在按钮的正上方,宽度、高度都为100%。该背景在初始状态下是隐藏的,透明度为0.2,是为了保证获取到按钮的颜色。
- 第三段代码设置了一个hover效果。当鼠标移动到按钮上方时,背景伪元素before会缓慢地放大。同时,透明度会保持0.2不变,即是背景保持半透明状态。通过这个过渡,按钮会看起来像闪闪发亮。
通过使用上述CSS代码,我们可以轻易地为按钮添加发光效果,增强按钮的视觉效果,提高用户体验。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。