地  址:江苏省南京市玄武区玄武湖
电  话:4008-888-888
邮  箱:9490489@qq.com
商  务QQ:4163305195
网页页面设计方案:CSS3完成手机上按钮冲击性波互动实际效果
作者:管理员    发布于:2020-07-20 13:07   文字:【】【】【
在大家应用的手机上手机软件中,会有许多十分好的互动实际效果,根据css3还可以完成许多各种各样炫酷的互动实际效果。如今就看1下按钮中较为普遍的冲击性波互动实际效果怎样根据css3迅速撰写出来。
     实际效果如图所示:
实际效果基本原理:
      关键是根据css3的:after伪类和过渡特性transition来开展操纵。先制做1个圆形冲击性波层,当激活按钮的情况下让冲击性波层一瞬间变为0,释放出来后从0过渡到最大范畴,从而产生冲击性波实际效果;下列是完成流程:
     1、先提前准备基本构造和款式;
/* 基本款式 */
*{padding:0; margin:0; border:0; list-style:none;}
body{ background: #000;}
a{ color: #fff; text-decoration: none; display: block; width: 100px; height: 40px; border-radius: 5px;
background: rgba(31,91,147,0.8); text-align: center; line-height: 40px; transition: all .4s;}
a:hover{ background: rgba(31,91,147,1);}
.all{ overflow: hidden;}
.btn{ float: left; margin: 40px; position: relative; overflow: hidden;  }
 
 

                       2、根据伪类:after 给a加上1个冲击性波层,独特的地区在于以便确保让冲击性波实际效果从正中间外扩散,必须设定层的部位坐落于正中间;
/* 根据伪类给按钮加上1个冲击性波层 */
    .btn a:after {
        content: "";
        display: block;
        position: absolute;
        left: ⑸0px;
        top: ⑻0px;  /* 设定冲击性波层部位在正中间 */
        width: 200px;
        height: 200px; /* 设定冲击性波层的规格 */
        background: rgba(255,255,255,0.6);
        border-radius: 50%;
        opacity: 0;
        transition: all 1s;
    }
       3、加上激活按钮的实际效果,根据:active 给:after 设定一瞬间过渡实际效果,这1步独特的地区在于必须将过渡時间设定为0,让冲击性波涂层一瞬间为0,释放出来开的情况下从0过渡到最大范畴;激活实际效果的不一样部位能够产生不一样的互动实际效果;能够自主检测;
/* 设定激活按钮的实际效果,关键是后边的过渡時间; */
    .btn a:active:after {
        width: 0;
        height: 0;
        left: 50px;
        top: 20px; /*设定激活时冲击性波层的部位在正中间,确保是从正中间外扩散,不一样部位有不一样实际效果 */
        opacity: 1;
        transition-duration: 0s; /* 激活的情况下过渡時间0s一瞬间冲击性波涂层变为0,释放出来后过渡到上面.btn a:after的款式 */
    }
       总结:互动实际效果的完成是运用了伪类,:after功效十分强劲,这只是它在其中的1种实际效果,除此以外,还能完成更为强劲的互动实际效果。

文章内容均为高新科技潜心企业网站建设,的成都企业网站建设企业原創,转载请注明来自
Copyright © 2002-2020 网页制作流程_美国免费建站平台_网站制作维护_瑞蚁免费建站_免费个人网页制作 版权所有 (网站地图
地址:江苏省南京市玄武区玄武湖 电话:4008-888-888
邮箱:9490489@qq.com QQ:4163305195