html前端按钮效果

2018-05-08 阅读：7004 类型：前端分类：style 标签： style

常见按钮特效整理：

1 .zkbtn--上下抖动

.zkbtn{animation:td 1.5s infinite; -webkit-animation:td  1.5s infinite; }

@-webkit-keyframes td{
    0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}
    40%{-webkit-transform:translateY(-4px);}
    60%{-webkit-transform:translateY(-8px);}
}
@keyframes td{
    0%,20%,50%,80%,100%{-webkit-transform:translateY(0);transform:translateY(0);}
    40%{-webkit-transform:translateY(-4px);transform:translateY(-4px);}
    60%{-webkit-transform:translateY(-8px);transform:translateY(-8px);}

2 .amint-da---缓慢放大

.amint-da{
    animation: scaleOut 1s 1s infinite ease;
}
@-webkit-keyframes scaleOut {
    0% {
        transform: scale(0.95);
        opacity: 0.9;
    }
    50% {
        transform: scale(1);
        opacity: 0.95;
    }
    100% {
        transform: scale(1.05);
        opacity: 1;
    }
}

3 鼠标悬停缓慢向上移动-5px;

.p3{transition:all .2s linear;
-webkit-transition:all .2s linear;
-moz-transition:all .2s linear;
-ms-transition:all .2s linear;
-o-transition:all .2s }
.p3 li:hover{transform:translateY(-5px);}

4 .c_stykebrn按钮不停放大

.c_stykebrn{
	-moz-animation:fd  1s linear infinite backwards; -ms-animation:fd  1s linear infinite backwards; -o-animation:fd  1s linear infinite backwards; -webkit-animation:fd  1s linear infinite backwards; animation:fd  1s linear infinite backwards; 
}
@keyframes fd{
	0%{ 
	transform:scale(1);
	}
	50%{  
	transform:scale(1.1);
	} 
	100%{  
	transform:scale(1);
	}
}

5 .animated around按钮左右移动

.animated {
  animation-duration: 1s; /*动画时间*/
  animation-fill-mode: both; /*播放后的状态*/
  animation-duration: 2s; /*动画时间*/
   animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/
}
 
.around{
  animation-name:aroundAnimation; /*动画的名称*/
  transform-origin: center bottom; /*设置动画旋转元素的基点为*/
  cursor: pointer;
}
 


@keyframes aroundAnimation{
  0%,
  100%,
  20%,
  50%,
  80% {
  transition-timing-function: cubic-bezier(0.215,.61,.355,1); 
  transform: translate3d(0,0,0);
  }
  40%,
  43%{
  transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
  transform: translate3d(-20px,0,,0);
  }
  70%{
  transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
  transform: translate3d(-10px,0px,0);
  }
  80%{
  transform: translate2d(10px,0,0);
  }
}
2.
.laybtn{animation: showb 2s .2s linear both infinite; -webkit-animation: showb 2s .2s linear both infinite; -moz-animation: showb 2s .2s linear both infinite; -o-animation: showb 2s .2s linear both infinite; -ms-animation: showh 1s .2s linear both infinite;}
@-webkit-keyframes showb{
    0%,100%,20%,50%,80% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    40% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
    60% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

6 .animate-hotspot-down按钮上下抖动

@keyframes hotspot-down{25%{transform:translateY(-2px)}50%,100%{transform:translateY(0)}75%{transform:translateY(2px)}}
.animate-hotspot-down{-webkit-animation:hotspot-down 2s linear infinite;animation:hotspot-down 2s linear infinite}

7 .鼠标悬停刀片加抖动效果

.banner_btn{display: block; width: 312px; height:78px ; background: url(images/banner_btn_03.png) no-repeat center top; position: absolute; left: 50%; margin-left: -420px; bottom: 155px; color: #fff; font-size: 48px; font-family: '方正'; font-weight: bold; text-align: center; line-height: 78px; overflow: hidden;transition:all .2s linear;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-ms-transition:all .2s linear;-o-transition:all .2s linear;}
.banner_btn:before {
 content: ' ';
 position: absolute;
 background: #fff;
 width: 10px;
 height: 100px;
 top: 0;
 left: -200px;
 opacity: 0.2;
 -webkit-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
 -webkit-transform: skewX(-25deg);
         transform: skewX(-25deg);
         overflow: hidden;
}
.banner_btn:hover:before {
 width: 30px;
 left: 350px;
}
.banner_btn:hover{ color: #fff;transform:translateY(-2px);-webkit-transform:translateY(-2px);-moz-transform:translateY(-2px);-ms-transform:translateY(-2px);-o-transform:translateY(-2px); }

8、按钮左右走动

.junp img{
    webkit-animation: jump 3s linear normal both infinite;
    -o-animation: jump 3s linear normal both infinite;
    animation: jump 3s linear normal both infinite;
}
@keyframes  jump{
    0%{
        transform: translateX(0);
    }
    50%{
        transform: translateX(15px);
    }
    100%{
        transform: translateX(0);
    }

}

9、晃动效果

.sp1{
    -webkit-animation: fan 2s infinite;
    animation: fan 2s infinite;
}
.sp1{
    top:84px;
    right:173px;
}
@keyframes fan {
    0%{
        transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(360deg);
    }
}

10、缩小放大

.chatcar{ width:50px; height:50px; background:#000; animation:chatchars 2s ease;}
@keyframes chatchars{
0%{left: 120px; transform:scale(0.1);}
20%{left: 20px;}
40%{left: 40px;}
100%{left: 12px; transform:scale(1);}

11、挂在绳索上摇摆动画

.als {
  position: absolute;
  width: 5rem;
  height: 5rem;
  background:#000;
  -webkit-transform-origin: center -20rem;
  transform-origin: center -20rem;
  -webkit-animation: swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
  animation: swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
}
@keyframes swing {
  0% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  12.5% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  25% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  37.5% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
  50% {
    -webkit-transform: rotate(23deg);
            transform: rotate(23deg);
  }
  62.5% {
    -webkit-transform: rotate(-23deg);
            transform: rotate(-23deg);
  }
  75% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
  87.5% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
}

12.红包抖动效果

.swt-float{z-index:2147483650;position:fixed;top:0;left:2%;width:100px;top:40%;-webkit-animation:tada 1.5s linear normal both infinite;-o-animation:tada 1.5s linear normal both infinite;animation:tada 1.5s linear normal both infinite}
@-moz-keyframes tada{0%{-moz-transform:scale(1)}
10%,20%{-moz-transform:scale(.9) rotate(-3deg)}
30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg)}
40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg)}
100%{-moz-transform:scale(1) rotate(0)}
}
@-webkit-keyframes tada{0%{-webkit-transform:scale(1)}
10%,20%{-webkit-transform:scale(.9) rotate(-3deg)}
30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg)}
40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)}
100%{-webkit-transform:scale(1) rotate(0)}
}

14.打字效果

.shuru{animation:typing 4s steps(11,end) infinite,blink-caret .5s step-end infinite alternate}
@keyframes typing{0%{width:0}25%{width:22ch}100%{width:22ch}}
@keyframes blink-caret{50%{border-color:transparent}}
@-webkit-keyframes anim1{0%{top:0;opacity:1}100%{top:-100px;opacity:1}}

15.按钮不停旋转20度

.btn{
    -webkit-animation: swing 2s linear normal both infinite;
    -o-animation: swing 2s linear normal both infinite;
    animation: swing 2s linear normal both infinite;
}
@keyframes  swing{
    0%{  transform: rotate(5deg);  }
    50%{  transform: rotate(-5deg);  }
    100%{  transform: rotate(5deg);  }
}
@-webkit-keyframes  swing{
    0%{  -webkit-transform: rotate(5deg);  }
    50%{  -webkit-transform: rotate(-5deg);  }
    100%{  -webkit-transform: rotate(5deg);  }
}

16.鼠标悬停显示按钮

html:

<ul class="p4_cr">    
<li>    
<a href="">    
<a href="" class="pubtn p4_btn">按钮>></a>    
</a>    
</li>    
<li>

css:

.p4_btn{ display: block; width: 192px; height: 51px; font-size: 24px; color: #fff; line-height: 51px;
background: linear-gradient(90deg, #fc6550, #f92676); border-radius: 45px; position: absolute; 
left: 35px;bottom:-30px;}
.p4_cr li a.pubtn{transition: all 0.5s linear; -webkit-transition: all 0.5s linear; opacity: 0; }
.p4_cr li:hover{transform:translate(0px,-20px);-webkit-transform:translate(0px,-20px); }
.p4_cr li:hover a.pubtn{bottom: -30px;opacity: 1; color: #fff;}

15.按钮上下动

  目标{animation: float 4s ease infinite;}
  @keyframes float {
    0%,100% {
        transform: translate3d(0,0,0)
    }
    40% {
        transform: translate3d(0,-20px,0)
    }
  }

16.从小大的圆形

.mubiao{ width:5px;height:5px; margin: 300px auto; background: #000; border-radius:50%; animation:vs 3s linear infinite backwards}
@keyframes vs{0%{box-shadow:0 0 156px #000}
25%{box-shadow:0 0 0 80px #000}
50%{box-shadow:0 0 0 156px #000}
25%{box-shadow:0 0 0 80px #000}
100%{box-shadow:0 0 156px #000}
}

17.放大隐藏

.目标{ width: 50px; height: 50px; background: #000; -webkit-animation:scaleout 3.3s infinite ease-in-out; animation:scaleout 3.3s infinite ease-in-out;}
	@-webkit-keyframes scaleout {
	0% {
	-webkit-transform:scale(1.0)
	}
	100% {
		-webkit-transform:scale(2.1);
		opacity:0;
	}
	}@keyframes scaleout {
		0% {
		transform:scale(1.0);
		-webkit-transform:scale(1.0);
		opacity:0;
	}
	10% {
		transform:scale(1.0);
		-webkit-transform:scale(1.0);
		opacity:1;
	}
	100% {
		transform:scale(2.1);
		-webkit-transform:scale(2.1);
		opacity:0;
	}
}

18.放大缩小

.目标{ width: 50px; height: 50px; background: #000; animation:pulseScale 2s infinite;}
.pulseScale{-webkit-animation-name:pulseScale;animation-name:pulseScale}
@-webkit-keyframes pulseScale{50%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
100%{-webkit-transform:translateZ(0)}
}
@keyframes pulseScale{50%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
100%{transform:translateZ(0)}
}

19.鼠标悬停翻转

.swtBtn{-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear;}
.swtBtn:hover{-moz-transform:rotateY(360deg);-ms-transform:rotateY(360deg);-o-transform:rotateY(360deg);-webkit-transform:rotateY(360deg) ;transform:rotateY(360deg)}

20.按钮放大效果

<style>
.btn{ display: block; width: 200px; height: 50px; background-color: #D72602; position: relative; color: #fff; text-decoration: none; text-align: center; line-height: 50px; font-size: 25px; border-radius: 45px;}
.div2 {
	position: absolute;
	right: 0px;
	top: 0;
	bottom: 0;
	margin: auto;
	pointer-events: none;
	background-color: #ffffff;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	-o-border-radius: 100%;
	-ms-border-radius: 100%;
	border-radius: 100%;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
	display: inline-block;
	width: 200px;
	height: 150px;
	-webkit-animation: ball-scale 1s 0s ease-in-out infinite;
	-moz-animation: ball-scale 1s 0s ease-in-out infinite;
	-ms-animation: ball-scale 1s 0s ease-in-out infinite;
	-o-animation: ball-scale 1s 0s ease-in-out infinite;
	animation: ball-scale 1s 0s ease-in-out infinite;
}
@-webkit-keyframes ball-scale {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

@keyframes ball-scale {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}
</style> 
<a href="javascript:;" class="btn">
	了解详情
	<div class="div2"></div>
</a>