最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

JQuery製作Button滑入動畫

XAMPP下载 admin 792浏览 0评论
 1.Hover改變字體大小及背景透明度
HTML中配置fadeBtn類別名稱按鈕
<a href=”#” class=”fadeBtn”>Button</a>
CSS設定按鈕大小及顏色
.fadebtn {
width: 150px;
height: 50px;
line-height: 50px;
color: #000;
font-size: 18px;
font-weight: bold;
text-align: center;
display: inline-block;
overflow: hidden;
background-color: #ddd;
border: 2px solid #fff;
box-shadow: 0 0 3px #555;
}

JQuery寫入效果
$(‘.fadebtn’).hover(function(){
$(this).stop().animate({opacity: ‘0.5’,fontSize:’22px’},300);
},function(){
$(this).stop().animate({opacity: ‘1’ ,fontSize: ’18px’},300);
});
2.Hover改變BorderRadius圓角
HTML中配置cssAnim類別名稱按鈕
<a href=”#” class=”cssAnim cssAnim2″>Button</a>
CSS設定按鈕大小及顏色
.cssAnim {
padding: 15px 0;
width: 150px;
color: #000;
font-weight: bold;
text-align: center;
display: inline-block;
overflow: hidden;
background-color: #cfcfcf;
border: 1px solid #999;
transition: all 0.3s linear;
margin-left: 0.6em;
}

.bdrRaidus {
border-radius: 15px;
}

.bgColor {
color: #fff;
background: #000;
}
JQuery寫入效果
$(‘.cssAnim’).hover(function(){
$(this).addClass(‘bgColor’);
},function(){
$(this).removeClass(‘bgColor’);
});

$(‘.cssAnim2’).hover(function(){
$(this).addClass(‘bdrRaidus’);
},function(){
$(this).removeClass(‘bdrRaidus’);
});
3.Hover製造rotateX效果
HTML中配置cssAnim類別名稱按鈕
<a href=”#” class=”cssAnim cssAnim2″>Button</a>
CSS設定X軸旋轉角度
.rotateX {
transform: rotateX(360deg);
}
JQuery寫入效果
$(‘.cssAnim3’).hover(function(){
$(this).addClass(‘rotateX’);
},function(){
$(this).removeClass(‘rotateX’);
});
4.Hover製造rotateY效果
HTML中配置cssAnim類別名稱按鈕
<a href=”#” class=”cssAnim cssAnim2″>Button</a>
CSS設定Y軸旋轉角度
.rotateY {
transform: rotateY(360deg);
}
JQuery寫入效果
$(‘.cssAnim3’).hover(function(){
$(this).addClass(‘rotateY’);
},function(){
$(this).removeClass(‘rotateY’);
});

转载请注明:XAMPP中文组官网 » JQuery製作Button滑入動畫

您必须 登录 才能发表评论!