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后