html5 幽灵按钮,弥散阴影幽灵按钮
這幾年設計圈比較流行高飽和度漸變色和彌散陰影效果，彌散陰影有一個特點就是投影的顏色和物體顏色保持一致，下面來介紹運用css3實現的彌散陰影幽靈按鈕，效果如下圖所示。
彌散陰影幽靈按鈕效果
第一步：
首先搭建結構。按鈕整體用一個盒子div承載，設置類名為btns，每個按鈕用a標簽。彌散陰影和小箭頭我們使用偽元素:before和:after去制作。
html:
more
more
more
第二步：
書寫css樣式，實體化a標簽作為按鈕，添加漸變背景色。
彌散陰影使用偽元素:before實體化定位制作，注意背景顏色繼承父元素，層級設置為-1在按鈕的下方，添加filter:blur(5px)濾鏡屬性設置投影為高斯模糊并且調整定位坐標向下。
css:
*{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;
}
樣式書寫完畢，按鈕的靜態效果已經實現，如下圖所示。
默認效果
第三步：
添加鼠標移上小箭頭出現移動效果。
小箭頭我們使用偽元素: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:
more
more
more
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;
}
最終效果如下圖。
最終效果
總結
以上是生活随笔為你收集整理的html5 幽灵按钮,弥散阴影幽灵按钮的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python 队列实现_python中实
- 下一篇： tensorflow.python.fr