[分享]css3手指点击背景渐变

CSS3手指点击背景渐变是一种比较常见的特效，可以使页面看起来更加美观和舒适。通过使用CSS3的属性，我们可以轻松地实现这种效果，下面是具体的代码实现。/设置按钮样式/ .button{ width:...

CSS3手指点击背景渐变是一种比较常见的特效，可以使页面看起来更加美观和舒适。通过使用CSS3的属性，我们可以轻松地实现这种效果，下面是具体的代码实现。

/*设置按钮样式*/
.button{
     width:100px;
     height:40px;
     color:#fff;
     text-align:center;
     line-height:40px;
     border-radius:20px;
     background:linear-gradient(#5fc9f8, #14d4c3); /* 背景渐变*/
     box-shadow:0 0 2px #333;
     cursor:pointer; /*设置手型光标*/
}
/*设置按钮按下样式*/
.button:active{
     box-shadow:0 0 5px #333;
     background:linear-gradient(#14d4c3, #5fc9f8); /* 背景渐变反转*/
} 

上面的代码中，首先我们定义了一个.button类，它的宽高为100px和40px，并设置按钮样式，包括颜色、居中、圆角等。我们使用了background属性，设置背景渐变，从上往下渐变，起始颜色为#5fc9f8，结束颜色为#14d4c3。此外，我们还使用了box-shadow属性，为按钮添加了一层阴影效果，使其看起来更立体。最后，我们设置了cursor属性，将光标设置为手型。

在按钮按下时，我们使用了:active伪类，重新定义了按钮的样式，为其添加更深的阴影和从下往上的背景渐变，这样就可以实现手指按下按钮的效果了。

总的来说，通过使用CSS3的属性，我们可以很轻松地实现手指点击背景渐变效果，为我们的页面增添美感和趣味性。