zoukankan      html  css  js  c++  java
  • 一款基于css3非常实用的鼠标悬停特效

    今天给大家带来一款基于css3非常实用的鼠标悬停特效。这款特效,当鼠标经过时候一个半透明的遮罩层倒下来。效果很好,而且是纯css3实现的,代码很少,非常实用。 效果如下:

    在线预览   源码下载

    实现的代码:

    html代码:

     <div align="center" style="position: relative;">
            <div class="contener">
                <div class="txt_init">
                    LOW POLY BACKGROUND</div>
                <div class="opac">
                    Download</div>
            </div>
        </div>

    css3代码:

      .contener
    {
      width:310px;
      height:140px;
      background-image:url(fond.png);
      overflow: hidden;
      cursor: pointer;
      position:relative;
    }
    .txt_init
    {
      position: absolute;
      bottom: 5px;
      right: 5px;
      font-family: 'Roboto';
      font-size: 22px;
      color: #ffffff;
      font-weight: 500;
    }
    .opac
    {
      opacity: 0;
    }
    .contener:hover .opac
    {
      width:310px;
      position: absolute;
      z-index: 1;
      font-family: 'Roboto';
      font-size: 25px;
      color: #ffffff;
      font-weight: 300;
      line-height: 140px;
      height:140px;
      opacity: 1;
      background-color: rgba(0,0,0,0.7);
      -webkit-animation:oblik 0.4s ease-in;
      -webkit-transform-origin: 0% 100%;
      -moz-animation:oblik 0.4s ease-in;
      -moz-transform-origin: 0% 100%;
      -ms-animation:oblik 0.4s ease-in;
      -ms-transform-origin: 0% 100%;
      animation:oblik 0.4s ease-in;
      transform-origin: 0% 100%;
      
    }
    @-webkit-keyframes oblik {
      0% {opacity:0;-webkit-transform: rotate(-45deg);}
      100% {opacity:1;-webkit-transform: rotate(0deg);}   
    }
    @-moz-keyframes oblik {
      0% {opacity:0;-moz-transform: rotate(-45deg);}
      100% {opacity:1;-moz-transform: rotate(0deg);}   
    }
    @-ms-keyframes oblik {
      0% {opacity:0;-ms-transform: rotate(-45deg);}
      100% {opacity:1;-ms-transform: rotate(0deg);}   
    }
    @keyframes oblik {
      0% {opacity:0;transform: rotate(-45deg);}
      100% {opacity:1;transform: rotate(0deg);}   
    }

    注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/9986

  • 相关阅读:
    codevs 3115 高精度练习之减法 swap
    codevs 3116 高精度练习之加法
    poj 3984 迷宫问题
    codevs m进制转化成10进制
    codevs 1214 线段覆盖
    codevs 3143 二叉树的序遍历
    codevs 3145 汉诺塔
    HDU 5093 Battle ships [二分图匹配]
    HDU 5074 Hatsune Miku [dp] ——2014鞍山现场赛E题
    ZOJ 3793 First Digit (逗比题)
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4075364.html
Copyright © 2011-2022 走看看