用CSS3打造一组闪亮的半透明按钮效果
这些闪亮的按钮使用了两个 DIV 实现,一个是按钮主要部分,一个是用来显示光泽。下面是在线演示,很漂亮吧?把鼠标放在按钮上试试,有惊喜哦!(温馨提示:在 Chrome,Firefox 和 Safari 浏览器中效果最佳,如果无法显示请刷新页面或者访问链接:在线演示)
HTML 部分非常简单,代码如下:
<div class="button gray"><div class="shine"></div>Button</div><div class="button blue"><div class="shine"></div>Button</div><div class="button green"><div class="shine"></div>Button</div><div class="button red"><div class="shine"></div>Button</div><div class="button purple"><div class="shine"></div>Button</div><div class="button orange"><div class="shine"></div>Button</div>
这些精美的效果用到了 CSS3 RGBA、box-shadow(阴影)、border-radius(边框圆角)和 linear-gradient(线性渐变),为了便于阅读,精简后的公共部分的代码如下:
.button { min-height: 1.5em; display: inline-block; padding: 12px 36px; margin: 40px 5px 5px 0px; cursor: pointer; opacity: 0.9; color: #FFF; font-size: 1em; letter-spacing: 1px; /* X轴偏移1像素、Y轴偏移2像素、不透明度为0.9的黑色文本阴影 */ text-shadow: rgba(0,0,0,0.9) 0px 1px 2px; background: #434343; border: 1px solid #242424; border-radius: 4px; /* 使用多层阴影实现按钮立体效果 第一层:Y轴偏移1像素、不透明度为0.25的白色外阴影效果 第二层:Y轴偏移1像素、不透明度为0.25的白色内阴影效果 第三层:偏移位0、不透明度为0.25的黑色外阴影效果 第四层:Y轴偏移20像素、不透明度为0.03的白色内阴影效果 第五层:X轴偏移-20像素、Y轴偏移20像素、不透明度为0.15的黑色内阴影效果 第六层:X轴偏移20像素、Y轴偏移20像素、不透明度为0.05的白色内阴影效果 */ box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px; /* 让变化的属性在100毫秒内匀速过渡 */ transition: all 0.1s linear;} .button:hover { /* 鼠标悬停时的按钮多层阴影效果,和按钮默认时相比只是第一层有变化: 第一层:X轴偏移2像素、Y轴偏移5像素、不透明度为0.5的黑色外阴影效果 */ box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;} .shine { display: block; position: relative; /* IE下面使用滤镜实现渐变效果 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* 使用水平的线性渐变实现按钮顶部的关泽效果 */ background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); padding: 0px 12px; top: -12px; left: -24px; height: 1px; box-shadow: rgba(255,255,255,0.2) 0px 1px 5px; /* 让变化的属性在300毫秒内以ease-in-out(先加速后减速)方式过渡 */ transition: all 0.3s ease-in-out;}
【用CSS3打造一组闪亮的半透明按钮效果】相关文章
5. CSS3 HTML5实例四(使用 RGBA 实现透明效果)
9. CSS3系列教程:透明度
本文来源:https://www.51html5.com/a909.html
﹝用CSS3打造一组闪亮的半透明按钮效果﹞相关内容
- 使用CSS3和RGBa创建超酷的按钮
- 利用CSS3 Gradients创建无图片水晶按钮
- QQ浏览器HD 1.5(aPad)闪亮登场:新增极速模式
- 一组免费的响应式 HTML5 & CSS3 网站模板
- 用CSS和jQuery打造3D窗帘切换特效
- CSS和CSS3按钮选择器对比
- 创造一款成功HTML5游戏的完整指南
- 如何创造一个出色的HTML5游戏引擎
- jQuery Flat Shadow – 轻松实现漂亮的长阴影效果
- jQuery Flat Shadow – 轻松实现漂亮的长阴影效果