css3实现hover特效----案例

第一篇

css3实现hover特效----案例_第1张图片

css3实现hover特效----案例_第2张图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>



*{
    margin: 0;
    padding: 0;
}

     .product-item .btn-box {
    width:100%;
    height:40px;
    position:relative;
    margin-top:30px;
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -ms-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
    overflow:hidden
}
.product-item .btn-box p {
    position:absolute;
    top:0;
    font-size:16px;
    line-height:40px;
    width:100%;
    -moz-transition:all .3s ease;
    -o-transition:all .3s ease;
    -webkit-transition:all .3s ease;
    transition:all .3s ease
}
.product-item .btn-box a {
    position:absolute;
    top:40px;
    -moz-transition:all .3s ease;
    -o-transition:all .3s ease;
    -webkit-transition:all .3s ease;
    transition:all .3s ease;
    width:210px;
    height:40px;
    line-height:38px;
    background:#ff6200;
    font-size:16px;
    color:#ffffff;
    left:39px
}
 .product-item .btn-box a:hover {
    background:#f24e14
}
.product-item:hover .btn-box p {
    -moz-transform:scale(0,0);
    -ms-transform:scale(0,0);
    -webkit-transform:scale(0,0);
    transform:scale(0,0);
    visibility:hidden
}
.product-item:hover .btn-box a {
    top:0
}
 .product-item {
    background:#ffffff;
    width:288px;
    height:270px;
    text-align:center;
    display:inline-block
}
 .product-item:hover {
    box-shadow:0 15px 30px rgba(0,0,0,0.1)
}
 .product-item .title {
    font-size:16px;
    color:#333333;
    padding-top:26px
}
 .product-item .tags-box {
    padding-top:7px;
    height:26px
}
 .product-item .tags-box .tag {
    color:#A5A5A5
}
.product-item .tags-box .tag-special {
    width:78px;
    text-align:center;
    line-height:24px;
    display:inline-block;
    background:#ff6200;
    color:#ffffff
}
 .product-item .rate-box {
    color:#ff6200;
    padding-top:20px
}
 .product-item .rate-box .rate {
    font-size:48px
}
 .product-item .rate-box .unit {
    font-size:24px
}
 .product-item .rate-desc {
    color:#B0B0B0;
    padding-top:-2px
}
 .product-item .btn-box.disabled a {
    background:#ddd;
    color:#ffffff
}
 .product-item .btn-box.disabled a:hover {
    background:#ddd
}

 style>
head>
<body>
       <div class="product-item">
        <div class="title">回报div>
        <div class="tags-box"> 
            <span class="tag">消费信贷限量产品 span>
        div>
        <div class="rate-box"> 
            <span class="rate">8.0span>
            <span class="unit">%span>
        div>
        <p class="rate-desc">约定年化收益率p>
        <div class="btn-box"> 
            <p>30000美元起投 p> 
            <a fen="home_recommend_product_link_04" href="###" target="_blank">立即抢购 
            a>
        div> 
    div>
body>
html>

第二篇

这里写图片描述

hover 显示上下两条线

html

<header class="header1">
    <nav class="header-bd">
        <div class="wrap">
            <h1 class="fn-fl logo"><a href="https://www.qbm360.com/" title="钱保姆,您的理财保姆">a>h1>
            <ul class="fn-fr item-ul">
                <li class="active"><a href="https://www.qbm360.com/" title="首页" class="effect-link-line">首页a>li>
                <li><a href="https://www.qbm360.com/financing.html" title="我要理财" class="effect-link-line">我要理财a>li>
                <li id="introItem"><a href="https://www.qbm360.com/about/intro.html" title="信息披露" class="effect-link-line">信息披露a>li>
                <li><a href="https://www.qbm360.com/bbsindex.html" title="钱粉圈" class="effect-link-line">钱粉圈a>li>
                <li><a href="https://www.qbm360.com/member/index.html" title="我的保姆" class="effect-link-line"><span>我的保姆span>a>li>
            ul>
        div>
    nav>
header>

css

/*S header*/
.header1{height: 110px;width: 100%;position: absolute;z-index: 9999;top:0;}

.header1 .header-bd{height: 80px;background: url("../images/header-bd-bg.png") repeat-x #000;}
.header1 .header-bd .logo{width: 415px;height: 47px;padding-top:18px;}
.header1 .header-bd .logo a{display: block;width: 415px;height: 44px;background: url("../images/logo1.png") no-repeat;}
.header1 .header-bd ul{padding-top: 24px;}
.header-bd ul li{float: left;display: block;margin: 0 20px;}
.header-bd ul li:last-child {margin-right: 0}
.header1 .header-bd ul li a{display: inline-block;padding: 11px 4px;color: #fff;font-size: 16px;}
.effect-link-line {position: relative;}
.effect-link-line:after,.effect-link-line:before{position: absolute;left: 0;width: 100%;height: 1px;background: #fff;background: rgba(255,255,255,0.45);content: '';opacity: 0;-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;    -moz-transition: opacity 0.3s, -moz-transform 0.3s;transition: opacity 0.3s, transform 0.3s;    -webkit-transform: translateY(-8px);-moz-transform: translateY(-8px);transform: translateY(-8px)}
.effect-link-line:before {top: 4px; -webkit-transform: translateY(-8px);-moz-transform: translateY(-8px);transform: translateY(-8px);}
.effect-link-line:after {bottom: 4px;-webkit-transform: translateY(8px);-moz-transform: translateY(8px);transform: translateY(8px);}
.effect-link-line:hover:before,
.effect-link-line:hover:after{opacity: 1;-webkit-transform: translateY(0px);-moz-transform: translateY(0px);transform: translateY(0px)}
.active .effect-link-line:before,
.active .effect-link-line:after {opacity: 1;-webkit-transform: translateY(0px);-moz-transform: translateY(0px);transform: translateY(0px);}

第三篇

css3实现hover特效----案例_第3张图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
      a {
      display:block;
      width:210px;
      height:44px;
      line-height:42px;
      text-align: center;
      border:1px solid #e5e5e5;
      margin:0 auto;
      text-decoration: none;
      position:relative
  }
  a span {
      color:#333;
      font-size:16px;
      position:relative;
      z-index:20;
  }
   a:after {
      position:absolute;
      bottom:0;
      left:0;
      content:'';
      width:100%;
      height:0;
      display:block;
      background:#fd5004;
      transition:height .2s ease;
      -webkit-transition:height .2s ease
  }
  a:hover span {
      color:#fff;
      text-decoration: none;

  }
  a:hover::after {
      height:100%
  } 

    style>
head>
<body>
    <a href="###">
        <span>立即下载span>
    a>

body>
html>

你可能感兴趣的:(css3动画)