Welcome, Old Sport!

使用css3 transform:scale()制作背景hover效果

by ilikecss ON 2014/06/18 5040

transform:(scale)教程世界杯如火如荼,看世界杯的同时别忘了关注我的博客教程哦童鞋们。今天要教大家的是一款使用css3 transform属性制作的背景悬停效果,鼠标经过指定区域会触发区域hover的特殊效果,对网站整体用户体验性还是有一定帮助。在这之前大家一起来复习一下什么是transform

transform的含义是:改变,变形,缩放,转换; 在css里具有rotate() / skew() / scale() / translate()等样式特性。今天我们使用到的就是它的scale。
transform: scale(缩放的比例); (2)就是放大2倍,(-1)就是负1倍。

demo焦点对象是针对按钮实行,所以我们只需要设定按钮的样式:

a.btn-yellow-highlight {
    padding: 5px;
    display: inline-block;
    border: 5px solid #50688B;
    color: #50688B;
    background: #FFF;
}
.btn-yellow-highlight:before {
    display: block;
}

.btn-yellow-highlight:hover {
    background-color: #50688B;
    color: #FFF;
    padding: 5px;
    border: 5px solid #FFF;
}
.btn-yellow-highlight:after {
    background-color: rgba(255, 255, 255, 0.4);
    content: "";
    height: 100%;
    left: -2px;
    opacity: 0;
    padding: 2px;
    position: absolute;
    top: -2px;
    transform: scale(1.3);
    transition: transform 0.2s ease 0s, opacity 0.3s ease 0s;
    width: 100%;
    z-index: -1;
}
.btn-yellow-highlight:hover:after {
    opacity: 1;
    transform: scale(1);
}

transform: scale()目前对浏览器要求还是挺高的,目前支持的浏览器有IE10及以上、Firefox、Opera、Chrome; Safari和Chrome需要特殊的hack来解决(-webkit-)

cross-browser-list-scale

1条评论
  1. #1

    ilikecss说道:

    新改的评论样式,自沙一下! :lol:




TOP