图片/图形

CSS3鼠标悬停图片炫酷动画特效

创客主机


这是一款纯CSS3鼠标悬停图片炫酷动画特效。该特效中,当鼠标悬停在图片上面时,通过CSS3来制作炫酷的遮罩层动画特效。

使用方法

在页面中引入下面的bootstrap和font-awesome文件。

  1. <link  href="/path/to/bootstrap.css" rel="stylesheet">
  2. <link  href="/path/to/font-awesome.css" rel="stylesheet">

HTML结构

基本HTML DOM元素结构如下。

  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-4 col-sm-6">
  4.             <div class="box">
  5.                 <img src="images/img-1.jpg" alt="">
  6.                 <div class="box-content">
  7.                     <div class="content">
  8.                         <span class="post">Web developer</span>
  9.                         <h3 class="title">Steve Thomas</h3>
  10.                     </div>
  11.                     <ul class="icon">
  12.                         <li><a href="#"><i class="fa fa-search"></i></a></li>
  13.                         <li><a href="#"><i class="fa fa-link"></i></a></li>
  14.                     </ul>
  15.                 </div>
  16.             </div>
  17.         </div>
  18.         <div class="col-md-4 col-sm-6">
  19.             <div class="box">
  20.                 <img src="images/img-2.jpg" alt="">
  21.                 <div class="box-content">
  22.                     <div class="content">
  23.                         <span class="post">Web designer</span>
  24.                         <h3 class="title">Kristina</h3>
  25.                     </div>
  26.                     <ul class="icon">
  27.                         <li><a href="#"><i class="fa fa-search"></i></a></li>
  28.                         <li><a href="#"><i class="fa fa-link"></i></a></li>
  29.                     </ul>
  30.                 </div>
  31.             </div>
  32.         </div>
  33.     </div>
  34. </div>

CSS样式

然后通过下面的CSS样式来制作鼠标悬停遮罩层的动画特效。

  1. :root{
  2.     --color_1: #fff;
  3.     --main-color: #1dd1a1;
  4. }
  5. .box{
  6.     font-family: 'Niramit', sans-serif;
  7.     text-align: center;
  8.     position: relative;
  9.     overflow: hidden;
  10. }
  11. .box:before,
  12. .box:after,
  13. .box-content:before,
  14. .box-content:after{
  15.     content: '';
  16.     background: linear-gradient(transparent,rgba(0,0,0,0.9));
  17.     height: 100%;
  18.     width: 25%;
  19.     transform: translateY(-100%);
  20.     position: absolute;
  21.     left: 0;
  22.     top: 0;
  23.     z-index: 1;
  24.     transition: all 0.3s;
  25. }
  26. .box:hover:before,
  27. .box:hover:after,
  28. .box:hover .box-content:before,
  29. .box:hover .box-content:after{
  30.     transform: translateY(0);
  31. }
  32. .box:after{ left: 25%; }
  33. .box .box-content:before{ left: 50%; }
  34. .box .box-content:after{ left: 75%; }
  35. .box:hover:before{ transition-delay: 0.225s; }
  36. .box:hover:after{ transition-delay: 0.075s; }
  37. .box:hover .box-content:before{ transition-delay: 0.15s; }
  38. .box:hover .box-content:after{ transition-delay: 0s; }
  39. .box img{
  40.     width: 100%;
  41.     height: auto;
  42.     transition: all 0.3s ease 0s;
  43. }
  44. .box:hover img{ filter: grayscale(100%); }
  45. .box .box-content{
  46.     width: 100%;
  47.     height: 100%;
  48.     position: absolute;
  49.     bottom: 0;
  50.     left: 0;
  51.     transition: all 0.2s;
  52. }
  53. .content{
  54.     width: 100%;
  55.     padding: 7px 0;
  56.     opacity: 0;
  57.     position: absolute;
  58.     left: 0;
  59.     bottom: -30px;
  60.     z-index: 2;
  61.     transition: all 0.3s ease 0.1s;
  62. }
  63. .box:hover .content{
  64.     opacity: 1;
  65.     bottom: 5px;
  66. }
  67. .box .title{
  68.     color:#fff;
  69.     font-size: 25px;
  70.     font-weight: 500;
  71.     letter-spacing: 1px;
  72.     text-transform: uppercase;
  73.     margin: 0;
  74. }
  75. .box .post{
  76.     color: var(--main-color);
  77.     font-size: 16px;
  78.     font-style: italic;
  79.     text-transform: capitalize;
  80.     letter-spacing: 1px;
  81.     margin-bottom: 10px;
  82.     display: block;
  83. }
  84. .box .icon{
  85.     padding: 0;
  86.     margin: 0;
  87.     list-style: none;
  88.     transform: translateX(-50%);
  89.     position: absolute;
  90.     top: 15px;
  91.     right: -10px;
  92.     z-index: 2;
  93.     transition: all 0.5s ease 0.3s;
  94. }
  95. .box .icon li{
  96.     opacity: 0;
  97.     transform: scale(0) rotate(360deg);
  98.     transition: all 400ms;
  99. }
  100. .box:hover .icon li{
  101.     opacity: 1;
  102.     transform: scale(1) rotate(0);
  103. }
  104. .box .icon li a{
  105.     color: var(--color_1);
  106.     background-color: var(--main-color);
  107.     font-size: 20px;
  108.     line-height: 40px;
  109.     height: 40px;
  110.     width: 40px;
  111.     margin-bottom: 10px;
  112.     border-radius: 50%;
  113.     display: block;
  114.     position: relative;
  115.     transition: all 0.3s;
  116. }
  117. .box .icon li a:hover{
  118.     text-decoration: none;
  119.     color: var(--main-color);
  120.     background-color: var(--color_1);
  121.     border-radius: 0 20px 0 20px;
  122. }
  123. @media only screen and (max-width:990px){
  124.     .box{ margin-bottom: 30px; }
  125. }
  126. @media only screen and (max-width:479px){
  127.     .box .title{ font-size: 20px; }
  128. }
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!