[分享]css3按钮带动画

CSS3是前端开发中极为重要的一项技术，可用于实现各种动画效果。其中，使用CSS3开发带有动画效果的按钮，可以大大提升网页的交互性和美观度。.button { display: block; marg...

CSS3是前端开发中极为重要的一项技术，可用于实现各种动画效果。其中，使用CSS3开发带有动画效果的按钮，可以大大提升网页的交互性和美观度。

.button {
    display: block;
    margin: 0 auto;
    padding: 20px 35px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    border-radius: 25px;
    box-shadow: 0px 5px 0px #333;
    background: linear-gradient(#222, #111);
    transition: all 0.2s ease-in-out;
}
 
.button:hover {
    background: linear-gradient(#111, #222);
    box-shadow: 0px 0px 0px #333;
    transform: translateY(5px);
} 

在这段CSS3代码中，button类对应一个带动画效果的按钮，它包括了按钮的颜色、边框、字体、大小、圆角、阴影和渐变等样式。其中，transition属性指定了按钮的动画效果，这里使用了缓动函数，使按钮的颜色过渡更加自然。而:hover伪类是控制鼠标指向按钮时的动画效果，使按钮背景色和阴影保持渐变变化，同时在鼠标悬停时使按钮下移5个像素，增加了按钮的立体感。