CSS3按钮冲击波交互效果,很实用!

主页 > 学习 > css >

张兵 次浏览

摘要:在我们使用的手机软件中,会有很多非常好的交互效果,通过css3也可以实现很多各种酷炫的交互效果。

 

在咱们运用的手机软件中,会有许多非常好的交互作用,经过css3也能够完成许多各种酷炫的交互作用。

如今就看一下按钮中比较多见的冲击波交互作用怎么经过css3迅速书写出来。

效果如图所示:

 1476435528484150.gif

效果原理: 主要是通过css3的:after伪类和过渡属性transition来进行控制。先制作一个圆形冲击波层

 当激活按钮的时候让冲击波层瞬间变成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;  }
 
 
<ul class="all">
    <li class="btn"><a href=/xx/css/"/index.html
    <li class="btn"><a href=/xx/css/"/index.html
    <li class="btn"><a href=/xx/css/"/index.html
    <li class="btn"><a href=/xx/css/"/index.html
</ul>

2、通过伪类:after 给a添加一个冲击波层,特殊的地方在于为了保证让冲击波效果从中间扩散,需要设置层的位置位于中间;

/* 通过伪类给按钮添加一个冲击波层 */
    .btn a:after {
        content: "";
        display: block;
        position: absolute;
        left: -50px;
        top: -80px;  /* 设置冲击波层位置在中间 */
        width: 200px;
        height: 200px; /* 设置冲击波层的尺寸 */
        background: rgba(255,255,255,0.6);
        border-radius: 50%;
        opacity: 0;
        transition: all 1s;
    }

3、添加激活按钮的效果,通过:active 给:after 设置瞬间过渡效果,这一步特殊的地方在于需要将过渡时间设置为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作用非常强大,这只是它其中的一种效果,除此之外

              还能实现更加强大的交互效果,感兴趣的朋友可以多尝试。


随机新闻