css3点击向上平移代码

CSS3提供了许多炫酷的效果，其中包括向上平移的点击效果。

实现该效果的代码如下：

.button{
    position:relative;
    overflow:hidden;
}
.button:hover span{
     -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}
.button span{
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    padding: 10px 0;
    background: #333;
    color: #fff;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
    

解释：

• 将按钮元素设为相对定位，以便内部元素的半透明层使用绝对定位时相对于该元素进行定位。
• 定义半透明层的位置和大小：初始位置为离按钮底部一百个百分点的距离（即被遮挡住），宽度铺满按钮的整个宽度，高度外部不可见但是将鼠标悬停时向上抬起的变化部分也计算了进去，即padding-top：10px + margin-top：-10px。
• 定义样式过渡效果的时间、效果及属性：鼠标悬停在按钮上面时，半透明层的位置向上平移一百个百分点，代码分别使用了-webkit、-moz、-ms和无前缀的方式来支持各个浏览器。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！