查看: 477|回复: 1

[CSS3动画] 纯CSS3鼠标hover图片条纹遮罩层动画效果源码

[复制链接]
发表于 2019-8-5 09:39:45 | 显示全部楼层 |阅读模式




简要教程


这是一款纯CSS3鼠标hover图片条纹遮罩层动画特效。该特效在鼠标悬停图片上面时,背景遮罩层变形为棱形,中间显示图片,旁边是紫色条纹。同时展示图片的描述文字和链接图标等。

使用方法


HTML结构
  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">
  6. <div class="box-content">
  7. <h3 class="title">Williamson</h3>
  8. <span class="post">Web designer</span>
  9. </div>
  10. <ul class="icon">
  11. <li><a href="#"><i class="fa fa-search"></i></a></li>
  12. <li><a href="#"><i class="fa fa-link"></i></a></li>
  13. </ul>
  14. </div>
  15. </div>
  16. <div class="col-md-4 col-sm-6">
  17. <div class="box">
  18. <img src="images/img-2.jpg">
  19. <div class="box-content">
  20. <h3 class="title">Miranda Roy</h3>
  21. <span class="post">Web designer</span>
  22. </div>
  23. <ul class="icon">
  24. <li><a href="#"><i class="fa fa-search"></i></a></li>
  25. <li><a href="#"><i class="fa fa-link"></i></a></li>
  26. </ul>
  27. </div>
  28. </div>
  29. </div>
  30. </div>
复制代码
CSS样式


  1. .box{
  2. background: linear-gradient(#8E2DE2,#4A00E0);
  3. font-family: 'Merriweather Sans', sans-serif;
  4. border-radius: 7px;
  5. position: relative;
  6. overflow: hidden;
  7. }
  8. .box:before{
  9. content: "";
  10. background: -webkit-repeating-linear-gradient(45deg,rgba(0, 0, 0, 0.1) 10px,
  11. transparent 10px,transparent 20px,rgba(0,0,0,0.1) 20px,rgba(0,0,0,0.1) 30px,
  12. transparent 30px,transparent 40px,rgba(0,0,0,0.1) 40px,rgba(0,0,0,0.1) 50px,
  13. transparent 50px,transparent 60px,rgba(0,0,0,0.1) 60px,rgba(0,0,0,0.1) 70px,
  14. transparent 70px,transparent 80px,rgba(0, 0,0, 0.1) 80px,
  15. rgba(0, 0,0, 0.1) 90px,transparent 90px);
  16. width: 100%;
  17. height: 100%;
  18. opacity: 0;
  19. position: absolute;
  20. top: 0;
  21. left: 0;
  22. z-index: 0;
  23. transition: all 0.5s;
  24. }
  25. .box:hover:before{ opacity:1; }
  26. .box img{
  27. width: 100%;
  28. height: auto;
  29. transition: all 0.5s ease;
  30. -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  31. clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  32. }
  33. .box:hover img{
  34. opacity: 0.5;
  35. -webkit-clip-path: polygon(50% 0, 99% 50%, 50% 99%, 0 50%);
  36. clip-path: polygon(50% 0, 99% 50%, 50% 99%, 0 50%);
  37. }
  38. .box .box-content{
  39. color: #fff;
  40. text-align: center;
  41. width: 100%;
  42. opacity: 0;
  43. transform: translateX(-50%) translateY(-50%) rotate(-55deg);
  44. position: absolute;
  45. top: 50%;
  46. left: 50%;
  47. z-index: 1;
  48. transition: all 0.5s;
  49. }
  50. .box:hover .box-content{
  51. opacity: 1;
  52. transform: translateX(-50%) translateY(-50%) rotate(0deg);
  53. }
  54. .box .title{
  55. font-size: 25px;
  56. font-weight: 700;
  57. text-transform: uppercase;
  58. text-shadow: 0 0 5px #000;
  59. margin: 0 0 3px 0;
  60. }
  61. .box .post{
  62. font-size: 16px;
  63. text-shadow: 0 0 5px #000;
  64. text-transform: capitalize;
  65. display: block;
  66. }
  67. .box .icon{
  68. padding: 0;
  69. margin: 0;
  70. list-style: none;
  71. opacity: 0;
  72. transform: rotateX(180deg);
  73. position: absolute;
  74. right: 10px;
  75. top: 10px;
  76. transition: all 0.3s;
  77. }
  78. .box:hover .icon{
  79. opacity: 1;
  80. transform: rotate(0);
  81. }
  82. .box .icon li a{
  83. color: #4A00E0;
  84. background-color: #fff;
  85. font-size: 17px;
  86. text-align: center;
  87. line-height: 30px;
  88. width: 30px;
  89. height: 30px;
  90. margin: 0 0 7px;
  91. border-radius: 50%;
  92. display: block;
  93. transition: all .5s;
  94. }
  95. .box .icon li  a:hover{
  96. color: #8E2DE2;
  97. box-shadow: 0 0 15px #fff;
  98. }
  99. @media only screen and (max-width:990px){
  100. .box { margin: 0 0 30px; }
  101. }
  102. @media only screen and (max-width:479px){
  103. .box .title{ font-size: 20px; }
  104. }
复制代码

源码下载


游客,如果您要下载源码或者查看隐藏内容请回复

回复

使用道具 举报

发表于 2019-8-9 10:09:48 | 显示全部楼层
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表