当前位置： 正文

鼠标悬停图片变形动画CSS3特效

2020-01-29 未分类 2.08k 推广

鼠标悬停图片变形动画CSS3特效

这是一款 CSS3 鼠标悬停图片遮罩层变形动画特效。该特效在鼠标悬停在图片上面的时候，遮罩层会变形为半圆形，同时出现提示标题等信息。
使用方法
在 HTML 文件中引入

  1. <link rel=“stylesheet” type=“text/css” href=“css/bootstrap-grid.min.css” />
  2. <link href=“https://cdn.bootcss.com/font-awesome/5.11.2/css/all.min.css” rel=“stylesheet”>

HTML 结构

  1. <div class=“demo”>
  2.     <div class=“container”>
  3.         <div class=“row”>
  4.             <div class=“col-md-4 col-sm-6”>
  5.                 <div class=“box”>
  6.                     <img  src=“images/img-1.jpg”>
  7.                     <div class=“box-content”>
  8.                         <h3 class=“title”>Williamson</h3>
  9.                         <span class=“post”>Web designer</span>
  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 class=“col-md-4 col-sm-6”>
  18.                 <div class=“box”>
  19.                     <img  src=“images/img-2.jpg”>
  20.                     <div class=“box-content”>
  21.                         <h3 class=“title”>Miranda Roy</h3>
  22.                         <span class=“post”>Web developer</span>
  23.                     </div>
  24.                     <ul class=“icon”>
  25.                         <li><a href=“#”><i class=“fa fa-search”></i></a></li>
  26.                         <li><a href=“#”><i class=“fa fa-link”></i></a></li>
  27.                     </ul>
  28.                 </div>
  29.             </div>
  30.             <div class=“col-md-4 col-sm-6”>
  31.                 <div class=“box”>
  32.                     <img  src=“images/img-3.jpg”>
  33.                     <div class=“box-content”>
  34.                         <h3 class=“title”>Steve Thomas</h3>
  35.                         <span class=“post”>Web developer</span>
  36.                     </div>
  37.                     <ul class=“icon”>
  38.                         <li><a href=“#”><i class=“fa fa-search”></i></a></li>
  39.                         <li><a href=“#”><i class=“fa fa-link”></i></a></li>
  40.                     </ul>
  41.                 </div>
  42.             </div>
  43.         </div>
  44.     </div>
  45. </div>

CSS 样式

  1. .demo{padding: 50px 0;}
  2. .box{
  3.     font-family: ‘Ubuntu’, sans-serif;
  4.     overflow: hidden;
  5.     position: relative;
  6. }
  7. .box:before{
  8.     content: ”;
  9.     background: #3498db;
  10.     width: 100%;
  11.     height: 100%;
  12.     opacity: 0;
  13.     position: absolute;
  14.     top: 0;
  15.     left: 0;
  16.     z-index: 1;
  17.     transition: all 0.4s ease;
  18. }
  19. .box:hover:before{
  20.     height: 70%;
  21.     border-radius: 0 0 250px 250px;
  22.     box-shadow: 0 0 20px #000;
  23.     opacity: 0.9;
  24. }
  25. .box img{
  26.     width: 100%;
  27.     height: auto;
  28.     transition: all 0.45s;
  29. }
  30. .box:hover img{
  31.     opacity: 0.8;
  32.     filter: hue-rotate(180deg);
  33. }
  34. .box .box-content{
  35.     color: #fff;
  36.     text-align: center;
  37.     width: 100%;
  38.     padding: 0 30px;
  39.     opacity: 0;
  40.     transform: translateX(-50%);
  41.     position: absolute;
  42.     top: 25%;
  43.     left: 50%;
  44.     z-index: 1;
  45.     transition: all 0.4s ease;
  46. }
  47. .box:hover .box-content{ opacity: 1; }
  48. .box .title{
  49.     font-size: 23px;
  50.     font-weight: 800;
  51.     letter-spacing: 1px;
  52.     text-transform: uppercase;
  53.     margin: 0 0 2px;
  54. }
  55. .box .post{
  56.     font-size: 16px;
  57.     text-transform: capitalize;
  58. }
  59. .box .icon{
  60.     padding: 0;
  61.     margin: 0;
  62.     list-style: none;
  63.     transform: translateX(-50%);
  64.     position: absolute;
  65.     left: 50%;
  66.     bottombottom: 10px;
  67. }
  68. .box .icon li{
  69.     display: inline–block;
  70.     margin: 0 2px;
  71.     transform: translateX(-200px);
  72.     transition: all 0.4s ease;
  73. }
  74. .box .icon li:nth-child(2){ transform: translateX(200px); }
  75. .box:hover .icon li{ transform: translateX(0); }
  76. .box .icon li a{
  77.     color: #fff;
  78.     background-color: #3498db;
  79.     font-size: 14px;
  80.     text-align: center;
  81.     line-height: 30px;
  82.     height: 35px;
  83.     width: 35px;
  84.     border: 3px solid #fff;
  85.     display: block;
  86.     transition: all 0.3s;
  87. }
  88. .box .icon li  a:hover{
  89.     color: #3498db;
  90.     background-color: #fff;
  91.     border-radius: 50%;
  92. }
  93. @media only screen and (max-width:990px){
  94.     .box { margin: 0 0 30px; }
  95. }

 

阅读全文
常见问题
下载地址失效了怎么版？
客服会第一时间检查下载地址，并发送到您的注册邮箱。如未及时处理可联系客服QQ或邮箱。
导入演示被中断了想重新导入怎么办？
https://themege.net/23822.html
不懂导入演示数据？无法一键导入演示数据？
https://themege.net/16186.html
原文链接：https://themege.net/1336.html，转载请注明出处。
0

猜你喜欢

2023-09-09 1.25k

2022-11-30 1.22k

2022-11-23 730

2022-11-16 934

2022-08-14 1.04k

2022-08-13 1.08k

评论0

请先