记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航
查看: 6630|回复: 0
收起左侧

[HTML5/CSS3] 用CSS3打造一组闪亮的半透明按钮效果[含1P]

[复制链接]
发表于 2017-7-4 08:43:33 | 显示全部楼层 |阅读模式
分享一组闪亮的半透明 CSS3 按钮效果。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 动画按钮效果
下一篇:CSS 中的分离、抽象和层叠
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】

QQ|QQ群:133515734|站长博客|百度网盘|许进龙|手机触屏版|国际动画教程网 ( ICP13037175 )