文字烟雾效果按钮

开发工具:DW
关键技术:CSS

HTML代码部分：
<button class="button26">
<span>
<h2 index="1">烟</h2>
<h2 index="2">雾</h2>
<h2 index="3">效</h2>
<h2 index="4">果</h2>
</span>
</button>
CSS部分：
.button26 h2{
transition: .4s;
display: inline-block;
font-style:normal;
color:#FFFFFF;
font-weight: 400;
}
.button26{
margin-left: 41.5%;
margin-top: 20%;
background-color: #2F3545;
}
.button26:hover h2{
animation: button26 1s 0ms 1 forwards;
}
@keyframes button26 {
0%{
filter: blur(0px);
opacity: 1;
transform: translateY(0px);
}
50%{
filter: blur(3px);
opacity: 0;
transform: translateY(-10px) translateX(8px);
}
52%{
transform: translateY(0px) translateX(-10px);
}
100%{
filter: blur(0px);
opacity: 1;
}
}
.button26 i[index='2']{
animation-delay: 50ms;
}
.button26 i[index='3']{
animation-delay: 100ms;
}
.button26 i[index='4']{
animation-delay: 150ms;
}
.button26{
width: 248px;
height: 60px;
border-radius: 25px;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
filter: blur(0px);主要这个属性设置羽化效果像素越大羽化效果越大。