这几年设计圈比较流行高饱和度渐变色和弥散阴影效果，弥散阴影有一个特点就是投影的颜色和物体颜色保持一致，下面来介绍运用css3实现的弥散阴影幽灵按钮，效果如下图所示。
弥散阴影幽灵按钮效果
第一步：
首先搭建结构。按钮整体用一个盒子div承载，设置类名为btns，每个按钮用a标签。弥散阴影和小箭头我们使用伪元素:before和:after去制作。
html:
<div class="btns">
<a href="#">
more
</a>
<a href="#">
more
</a>
<a href="#">
more
</a>
</div>
第二步：
书写css样式，实体化a标签作为按钮，添加渐变背景色。
弥散阴影使用伪元素:before实体化定位制作，注意背景颜色继承父元素，层级设置为-1在按钮的下方，添加filter:blur(5px)滤镜属性设置投影为高斯模糊并且调整定位坐标向下。
css:
<style>
*{padding: 0; margin: 0; list-style: none;}
/*设置整体居中和按钮分布*/
.btns{
width: 800px;
height: 60px;
margin: 100px auto;
display: flex;
justify-content: space-around;
}
/*实体化按钮*/
.btns a{
width: 130px;
height: 60px;
border-radius:10px;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 60px;
font-size: 20px;
position: relative;
}
/*设置渐变背景色*/
.btns a:nth-child(1){
background: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
}
.btns a:nth-child(2){
background: linear-gradient(120deg, #00f2fe 0%, #4facfe 100%);
}
.btns a:nth-child(3){
background: linear-gradient(120deg, #7579ff 0%, #b224ef 100%);
}
/*弥散阴影*/
.btns a:before{
content:"";
position: absolute;
width: 100%;
height: 100%;
background:inherit;
filter: blur(5px);
left: 0;
top: 5px;
z-index: -1;
}
</style>
样式书写完毕，按钮的静态效果已经实现，如下图所示。
默认效果
第三步：
添加鼠标移上小箭头出现移动效果。
小箭头我们使用伪元素:after去制作。设置小箭头默认透明度opacity:0，鼠标移上设置透明度为1，显示小箭头，注意添加transition过渡会有淡入显示视觉效果。
鼠标移上a设置:after添加animation动画控制水平位移transform:translateX()。
css:
/*小箭头默认*/
.btns a:after{
content:">";
position: absolute;
transform: translateX(5px);
opacity: 0;
}
/*小箭头鼠标移上*/
.btns a:hover:after{
/*淡入显示*/
opacity: 1;
transition: 0.5s;
/*鼠标移上添加位移动画*/
animation:yi 1.2s infinite;
}
@keyframes yi{
0%{ transform: translateX(5px);}
50%{transform: translateX(10px);}
100%{transform: translateX(5px);}
}
添加小箭头后，鼠标移上效果如下图。
鼠标移上出现箭头
第四步：
添加线框滑动效果。这个效果需要在a标签内部添加四个span定位并实体化，背景颜色继承父元素，层级z-index设置为-1在按钮的下方，并且给线框设置四个不同方向的位移，把线框移动到按钮外面。
html:
<div class="btns">
<a href="#">
more
<!--线框-->
<span class="line left"></span>
<span class="line down"></span>
<span class="line right"></span>
<span class="line up"></span>
</a>
<a href="#">
more
<!--线框-->
<span class="line left"></span>
<span class="line down"></span>
<span class="line right"></span>
<span class="line up"></span>
</a>
<a href="#">
more
<!--线框-->
<span class="line left"></span>
<span class="line down"></span>
<span class="line right"></span>
<span class="line up"></span>
</a>
</div>
css:
/*线框默认*/
.btns .line{
position: absolute;
background:inherit;
z-index: -1;
}
/*实体化定位位移*/
/*左右线框*/
.btns .left,.btns .right{
width:1px;
height:80%;
top:10%;
}
.btns .left{
left:0;
transform: translate(0,138%);
}
.btns .right{
right:0;
transform: translate(0,-138%);
}
/*上下线框*/
.btns .up,.btns .down{
width:80%;
height:1px;
left:10%;
}
.btns .up{
top:0;
transform: translate(-138%,0);
}
.btns .down{
bottom:0;
transform: translate(138%,0);
}
线框实体化后效果如下图。
线框实体化
第五步：
设置线框初始不透明度为0，鼠标移上按钮a，把线框位移回原来的位置transform:translate(0,0)，并且把不透明的设置为1，添加过渡效果transition。
css:
/*线框默认*/
.btns .line{
position: absolute;
background:inherit;
z-index: -1;
/*初始不透明度*/
opacity: 0;
/*过渡*/
transition:0.5s;
}
/*按钮鼠标移上控制线框*/
.btns a:hover .line{
transform: translate(0,0);
opacity: 1;
}
最终效果如下图。
最终效果
网友评论