[分享]css3按钮展开特效

在网页设计中，按钮特效是十分常见的，特别是在交互式网页中更是必不可少的元素。Css3的强大使按钮特效也更加丰富多彩，今天我们来看一下如何使用Css3实现按钮展开特效。 /CSS代码/ .button{...

在网页设计中，按钮特效是十分常见的，特别是在交互式网页中更是必不可少的元素。Css3的强大使按钮特效也更加丰富多彩，今天我们来看一下如何使用Css3实现按钮展开特效。

 /*CSS代码*/
    .button{
        display: inline-block;
        position: relative;
        padding: 10px 20px;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        background-color: #f00;
        border-radius: 4px;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    .button:hover{
        background-color: #0f0;
    }
    .dropdown{
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        padding: 10px;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        border-radius: 0 0 4px 4px;
        z-index: 1;
        transition: all 0.3s ease;
    }
    .button:hover .dropdown{
        display: block;
    } 

在以上的代码中，我们首先定义了一个class名为button的样式，这个样式是按钮的基础样式，其中包括了按钮的padding、字体大小、粗细、颜色和背景色等基本属性，并且为了做到使按钮在鼠标悬停时有过渡效果，我们需要加上transition属性。接着，我们再定义一个class名为dropdown的样式，这是用于展开特效的样式。其中，我们设置了display为none，即该样式下的元素默认是不显示的，同时设置该元素的position属性为absolute并定位到按钮下方。最后，在按钮的鼠标悬停事件里加上.dropdown的样式，使该样式下的元素显示。

以上就是实现按钮展开特效的基本代码。如果想使按钮展开时有更多的动效，可以加入更多的过渡动效，比如按钮展开时的位移、动画、渐变效果等等。有兴趣的话可以自行尝试一下哦！