JQuery製作Button滑入动画

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');});

範例网址
https://codepen.io/amanda328/pen/OoMeZJ

以上为个人学习纪录
参考书籍为外挂OUT!JQuery高手精技