查看: 957|回复: 3

[HTML5动画] CSS3图片鼠标悬停动画特效代码教程

[复制链接]
发表于 2019-8-11 22:18:38 | 显示全部楼层 |阅读模式





简单教程



实现CSS3图片鼠标悬停动画特效。该特效在鼠标悬停到图片上面的时候,利用CSS3制作上下关门的动画效果,非常炫酷。

代码结构


HTML代码

  1. <div class="htmleaf-container">
  2. <header class="htmleaf-header">
  3. <h1>CSS3图片鼠标悬停动画特效 <span>Hover Effect Style</span></h1>
  4. <div class="htmleaf-links">
  5. <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.zzfriend.com/" title="蚂蚁开源社区" target="_blank"><span>蚂蚁开源社区</span></a>
  6. <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.zzfriend.com/edu/web/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
  7. </div>
  8. </header>
  9. <div class="demo">
  10.         <div class="container">
  11.             <div class="row">
  12.                 <div class="col-md-4 col-sm-6">
  13.                     <div class="box">
  14.                         <img src="images/img-1.jpg" alt="">
  15.                         <div class="box-content">
  16.                             <h3 class="title">Williamson</h3>
  17.                             <span class="post">web developer</span>
  18.                         </div>
  19.                         <ul class="icon">
  20.                             <li><a href="#"><i class="fa fa-search"></i></a></li>
  21.                             <li><a href="#"><i class="fa fa-link"></i></a></li>
  22.                         </ul>
  23.                     </div>
  24.                 </div>
  25.                 <div class="col-md-4 col-sm-6">
  26.                     <div class="box">
  27.                         <img src="images/img-2.jpg" alt="">
  28.                         <div class="box-content">
  29.                             <h3 class="title">Kristina</h3>
  30.                             <span class="post">web designer</span>
  31.                         </div>
  32.                         <ul class="icon">
  33.                             <li><a href="#"><i class="fa fa-search"></i></a></li>
  34.                             <li><a href="#"><i class="fa fa-link"></i></a></li>
  35.                         </ul>
  36.                     </div>
  37.                 </div>
  38.                 <div class="col-md-4 col-sm-6">
  39.                     <div class="box">
  40.                         <img src="images/img-3.jpg" alt="">
  41.                         <div class="box-content">
  42.                             <h3 class="title">Miranda Roy</h3>
  43.                             <span class="post">web developer</span>
  44.                         </div>
  45.                         <ul class="icon">
  46.                             <li><a href="#"><i class="fa fa-search"></i></a></li>
  47.                             <li><a href="#"><i class="fa fa-link"></i></a></li>
  48.                         </ul>
  49.                     </div>
  50.                 </div>
  51.             </div>
  52.         </div>
  53.     </div>
复制代码


CSS代码

  1. <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />
  2. <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
  3. <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式,使用时可以不引用-->
  4. <!--以上引入CSS-->

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


源码下载



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

回复

使用道具 举报

发表于 2019-8-19 13:30:57 | 显示全部楼层
厉害了  下载来看看好东西
回复 支持 反对

使用道具 举报

发表于 2019-8-19 16:54:48 | 显示全部楼层
我要币我要币我要币我要币
回复 支持 反对

使用道具 举报

发表于 2019-8-21 09:00:01 | 显示全部楼层
seeeseeeseee
回复 支持 反对

使用道具 举报

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

本版积分规则

关闭

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



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

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

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

 豫公网安备 41078102000103号

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