hover效果的几种方式

1.改变透明度

#share_wrap a{display: inline-block;width: 48px;height: 44px;background: url(/images/financecorps/invite_icon.png) scroll no-repeat center center;background-position: -0px -0px;vertical-align: top;font-size: 12px;color: #191919;text-align: center;line-height: 1;padding: 52px 0 0 0;float: left;margin: 0 30px 0 30px;position:relative;}
#share_wrap a:hover{opacity:0.8;}

 

hover前      hover后

2.背景图片很复杂，建议用两张图叠加，hover后隐藏一张就好啦

html

<a href="url" class="floor2-link-regist" style="cursor:pointer;" target="_blank">
　　<img src="/images/julyrookie1/btn-hover.png"> <!--hover图片-->
　　<img src="/images/julyrookie1/btn-normal.png"> <!--正常背景-->
　　<span>注册领取</span>
</a>

css

a[class^="floor2-link-"]{
	display: block;
	width: 10%;
	position: absolute;
	top: 89%;
	border-radius: 24px;
	overflow: hidden;
}

a[class^="floor2-link-"]>img{
	width: 100%;
}

a[class^="floor2-link-"]>img:nth-of-type(2){
	position: absolute;
	top: 0;
	left: 0;
}

a[class^="floor2-link-"]>img:nth-of-type(3){
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}

a[class^="floor2-link-"]:hover>img:nth-of-type(2){ // 隐藏背景图片，显示hover图标
	display: none;
}

a[class^="floor2-link-"]>span{
	width: 100%;
	text-align: center; // 文字左右居中
	font-size: 2.5rem;
	color: #ffffff;
	position: absolute;
	top: 50%;
	z-index: 20;
	transform: translateY(-60%);  // 文字上下居中
	-webkit-transform: translateY(-60%);
	-moz-transform: translateY(-60%);
	-ms-transform: translateY(-60%);
	-o-transform: translateY(-60%);
}

  

hover前                                    hover后

3.灯光旋转照耀特效

html

<img src="/images/julyrookie1/floor2-lamp-left-bottom.png" class="floor2-lamp2">

css:

.floor2-lamp2{
	width: 19%;
	top: 69%;
	left: 18.5%;
	transform-origin: 0 32.4%;
	-webkit-transform-origin: 0 32.4%;
	-moz-transform-origin: 0 32.4%;
	-ms-transform-origin: 0 32.4%;
	-o-transform-origin: 0 32.4%;
	animation: floor2Lamp2 3s linear 0s infinite;
	-webkit-animation: floor2Lamp2 3s linear 0s infinite;
	-moz-animation: floor2Lamp2 3s linear 0s infinite;
	-ms-animation: floor2Lamp2 3s linear 0s infinite;
	-o-animation: floor2Lamp2 3s linear 0s infinite;
}
@keyframes floor2Lamp2{
	0%{
		transform: rotateZ(0deg);
		-webkit-transform: rotateZ(0deg);
		-moz-transform: rotateZ(0deg);
		-ms-transform: rotateZ(0deg);
		-o-transform: rotateZ(0deg);
	}
	40%,50%{
		transform: rotateZ(-30deg);
		-webkit-transform: rotateZ(-30deg);
		-moz-transform: rotateZ(-30deg);
		-ms-transform: rotateZ(-30deg);
		-o-transform: rotateZ(-30deg);
	}
	90%,100%{
		transform: rotateZ(0deg);
		-webkit-transform: rotateZ(0deg);
		-moz-transform: rotateZ(0deg);
		-ms-transform: rotateZ(0deg);
		-o-transform: rotateZ(0deg);
	}
}

　　

4.filter过滤效果

.pc-qb-feeds .pic-wrap .pic:hover, .pc-qb-feeds .single-pic .pic:hover {
    filter: brightness(1.3);
}

　   

hover前                                              hover后