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