文章目录
- 1.鼠标悬浮效果
- 1.1 渐动效果
- 1.2 渐变效果
- 1.3 边框效果
- 1.4 线行效果
- 1.5 图标效果
- 1.6 块状效果
- 1.7 边线效果
- 1.8 放大效果
- 1.9 渐出效果
- 1.10 痕迹效果
- 1.11 交叉效果
- 1.12 着重效果
- 1.13 详展效果
- 1.14 能动效果
- 1.15 明细效果
- 2.主要源码
- 2.1 源代码
- 源码下载
作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/134729643
html实现各种好看的鼠标滑过图片特效模板，html鼠标悬浮特效，html鼠标悬浮好看的动态效果，每种效果都非常好看，可以自己配置相对应的字体、颜色、背景、效果等动画效果，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
1.鼠标悬浮效果
1.1 渐动效果
这是一个渐动效果，渐动有一个微妙的图像过渡和显示标题。可以配置 文字字体、文字颜色、文字大小、背景颜色、线条颜色、动画效果。
1.2 渐变效果
这是一个渐变效果，渐变有一个微妙的图像过渡和显示标题，会有遮罩，透明的可以自己配置。可以配置 文字字体、文字颜色、文字大小、背景颜色、线条颜色、动画效果。
1.3 边框效果
这是一个边框效果，边框有一个微妙的图像过渡和显示标题，会有遮罩，透明的可以自己配置。可以配置 文字字体、文字颜色、文字大小、背景颜色、线条颜色、动画效果。
1.4 线行效果
这是一个线行效果，线行有线性变换和隐藏字幕。。可以配置 文字字体、文字颜色、文字大小、背景颜色、线条颜色、动画效果。
1.5 图标效果
这是一个图标效果，图标有一个隐藏的标题和图标，鼠标悬浮显示，移除隐藏。可以配置 文字字体、文字颜色、文字大小、背景颜色、线条颜色、动画效果。
1.6 块状效果
这是一个块状效果，有一个方形的动画和一个隐藏的标题，加上一个沉重的覆盖。可以配置 文字字体、文字颜色、文字大小、背景颜色、线条颜色、动画效果。
1.7 边线效果
这是一个边线效果，有一个厚厚的边框和一个隐藏的标题。可以配置 文字字体、文字颜色、文字大小、背景颜色、线条颜色、动画效果。
1.8 放大效果
这是一个放大效果，在一个带有边框的动画框中有一个标题(图像缩放了一点)。可以配置 文字字体、文字颜色、文字大小、背景颜色、线条颜色、动画效果。
1.9 渐出效果
这是一个渐出效果，有一个图像转换和隐藏的标题，还有一个彩色的覆盖层。可以配置 文字字体、文字颜色、文字大小、背景颜色、线条颜色、动画效果。
1.10 痕迹效果
这是一个痕迹效果，带痕迹的渐出效果，给人渐入的感觉。可以配置 文字字体、文字颜色、文字大小、背景颜色、线条颜色、动画效果。
1.11 交叉效果
这是一个交叉效果，交叉有一些很酷的线条动画。可以配置 文字字体、文字颜色、文字大小、背景颜色、线条颜色、动画效果。
1.12 着重效果
这是一个着重效果，有一个隐藏在动画框中的字幕。可以配置 文字字体、文字颜色、文字大小、背景颜色、线条颜色、动画效果。
1.13 详展效果
这是一个详展效果，有一个动画标题和边框效果。可以配置 文字字体、文字颜色、文字大小、背景颜色、线条颜色、动画效果。
1.14 能动效果
这是一个能动效果，有更多的动画和缩放图像。可以配置 文字字体、文字颜色、文字大小、背景颜色、线条颜色、动画效果。
1.15 明细效果
这是一个明细效果，有一个缩放背景和一个小标题。可以更改颜色、字体、效果等。可以配置 文字字体、文字颜色、文字大小、背景颜色、线条颜色、动画效果。
2.主要源码
2.1 源代码
这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标滑过图片动画特效 - xcLeigh</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link href="css/mystyle.css" rel="stylesheet" type='text/css' />
<link href="images/favicon.png" rel="icon">
</head>
<body>
<div class="container">
<div class="content">
<h2>渐动</h2>
<div class="grid">
<figure class="tile-1">
<img src="img/test1.jpg"/>
<figcaption>
<div>
<h2>这是一个 <span>渐动</span></h2>
<p>渐动有一个微妙的图像过渡和显示标题</p>
</div>
</figcaption>
</figure>
<figure class="tile-1 last">
<img src="img/test2.jpg" />
<figcaption>
<div>
<h2>这是一个 <span>渐动</span></h2>
<p>渐动有一个微妙的图像过渡和显示标题</p>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/myaction.js"></script>
</body>
</html>
源码下载
html实现各种好看的鼠标滑过图片特效模板（源码） 点击下载
💢 关注博主 带你实现畅游前后端
🏰 加入社区 带你体验马航不孤单
💯 神秘个人简介 带你体验不一样得介绍
💘 为爱表白 为你那个TA，体验别致的浪漫惊喜
🎀 酷炫邀请函 带你体验高大上得邀请
① 🉑提供云服务部署（有自己的阿里云）；
② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务；
如🈶合作请联系我，期待您的联系。
注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。
亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌
原文地址：https://blog.csdn.net/weixin_43151418/article/details/134729643（防止抄袭，原文地址不可删除）
