按钮悬停效果

下载代码

html

css

分享到微信朋友圈

html

css

body {
  background: #222;
}

a {
  text-decoration: none;
  -moz-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
  -webkit-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}

.lin-t {
  -moz-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.button {
  font-family: 'Aldrich', sans-serif;
  text-align: center;
  padding: 10px 10px;
  color: white;
  text-transform: uppercase;
}

.welcome-button {
  position: fixed;
  top: 40%;
  left: 50%;
  margin-left: -78px;
  -moz-transition: all 600ms ease-in;
  -o-transition: all 600ms ease-in;
  -webkit-transition: all 600ms ease-in;
  transition: all 600ms ease-in;
}
.welcome-button a {
  line-height: 30px;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  -moz-transition: all 600ms ease-in;
  -o-transition: all 600ms ease-in;
  -webkit-transition: all 600ms ease-in;
  transition: all 600ms ease-in;
}
.welcome-button a.out {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
.welcome-button.out {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}

[class*='bt-slider-'] {
  left: 100%;
  position: absolute;
  height: 100%;
  border-left: 1px solid white;
  z-index: 1000;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
[class*='bt-slider-'].out {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}

.bt-slide-l {
  left: 0;
}

.bt-slider-0 {
  -moz-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
  -webkit-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}

.bt-slider-1 {
  -moz-transition: all 800ms ease-in;
  -o-transition: all 800ms ease-in;
  -webkit-transition: all 800ms ease-in;
  transition: all 800ms ease-in;
}

.bt-slider-2 {
  -moz-transition: all 300ms ease-in;
  -o-transition: all 300ms ease-in;
  -webkit-transition: all 300ms ease-in;
  transition: all 300ms ease-in;
}

.bt-slider-3 {
  -moz-transition: all 500ms ease-in;
  -o-transition: all 500ms ease-in;
  -webkit-transition: all 500ms ease-in;
  transition: all 500ms ease-in;
}

.bt-slider-4 {
  -moz-transition: all 1000ms ease-in;
  -o-transition: all 1000ms ease-in;
  -webkit-transition: all 1000ms ease-in;
  transition: all 1000ms ease-in;
}

.bt-sl-solid-l {
  position: absolute;
  left: 0;
  height: 100%;
  border-left: 2px solid orange;
  z-index: 1001;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}
.bt-sl-solid-l.out {
  left: 50%;
}
.bt-sl-solid-l.down {
  height: 0%;
}

.bt-sl-solid-r {
  position: absolute;
  right: -1px;
  height: 100%;
  border-left: 2px solid orange;
  z-index: 1001;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}
.bt-sl-solid-r.out {
  right: 50%;
}
.bt-sl-solid-r.down {
  height: 0%;
}

JavaScript

//If you like this and wish to use it please give credit where it is due! -Kaigth :)

//variables
var document = window.document,

$_window = $(window),

timeout,

isAnimating = false,
    slideNum = 0,

$welcomeBarL = $(".bt-sl-solid-l"),
    $welcomeBarR = $(".bt-sl-solid-r"),
    $btSlideActive = $(".welcome-button").find(".bt-slide-l"),

$welcomeBtn = $(".welcome-button a");

//------//

//Delegation
$welcomeBtn.on('mouseenter', function() {
    var timeout,
        $slidebar = $('.bt-slider-' + slideNum),

animate = function() {

timeout = setTimeout(function() {
                clearTimeout(timeout);

if (slideNum === 5) {

isAnimating = false;
                    slideNum = 0;

} else {

isAnimating = true;
                    $slidebar = $('.bt-slider-' + slideNum);

$slidebar.removeClass('bt-slide-l');

slideNum++;

animate();

}

}, 100);
        };

animate();

});

$welcomeBtn.on('mouseout', function() {
    var timeout,
        $slidebar = $('.bt-slider-' + slideNum),

animate = function() {

timeout = setTimeout(function() {
                clearTimeout(timeout);

if (slideNum === 5) {

isAnimating = false;
                    slideNum = 0;

} else {

isAnimating = true;
                    $slidebar = $('.bt-slider-' + slideNum);

$slidebar.addClass('bt-slide-l');

slideNum++;

animate();

}

}, 100);
        };

animate();

});

$_window.on("load", function() {

timeout = setTimeout(function() {
        clearTimeout();

$welcomeBarL.removeClass("down");
        $welcomeBarR.removeClass("down");

}, 100);

timeout = setTimeout(function() {
        clearTimeout();

$welcomeBarL.removeClass("out");
        $welcomeBarR.removeClass("out");

}, 400);

timeout = setTimeout(function() {
        clearTimeout();

$welcomeBtn.removeClass("out");

}, 800);

timeout = setTimeout(function() {
        clearTimeout();

$btSlideActive.removeClass("out");

}, 1000);

});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg