html实现各种好看的鼠标滑过图片特效模板

news2024/11/18 6:14:53

文章目录

  • 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(防止抄袭,原文地址不可删除)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1276407.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

windows系统如何配置yarn环境变量

启动前端项目&#xff0c;突然遇到报错&#xff1a; 原因在于没有安装yarn&#xff0c;或没有配置环境变量。 全局安装 yarn 可在vsCode中输入&#xff0c;也可在命令行输入&#xff08;winR&#xff0c;输入cmd&#xff09; npm install -g yarn添加环境变量 找到yarn的安…

【算法】单调栈题单——字典序最小⭐(一种类型的模板题)

文章目录 题目列表316. 去除重复字母⭐⭐⭐⭐⭐&#xff08;类型题模板&#xff1a;单调栈&#xff0c;字典序最小&#xff09;221021天池-03. 整理书架&#xff08;保留数量为 limit 的字典序最小&#xff09;402. 移掉 K 位数字&#xff08;最多删除 k 次 前导零的处理&…

从0开始学习JavaScript--JavaScript 单元测试

JavaScript单元测试是保障代码质量和可维护性的关键步骤之一。通过编写和运行单元测试&#xff0c;开发者可以确保代码在不断迭代的过程中依然具有正确的行为。本文将深入探讨JavaScript单元测试的核心概念、工具使用和最佳实践&#xff0c;并通过丰富的示例代码演示其实际应用…

mac 系统 vmware 安装centos8

选择镜像 安装系统 依次设置有告警的项目 设置用户名密码 设置root密码 重启系统 重启成功进入下面界面 勾选&#xff0c;点击done 点击箭头所指按钮 输入密码登录 安装成功了 设置网络 打开终端 切换root用户 输入下面指令 su root 输入root的密码 安装git

振动温度一体式传感器的工作原理及其在设备状态监测中的作用

振动温度一体式传感器是一种先进的监测设备&#xff0c;可以同时测量和监测目标物体的振动和温度信息。它结合了振动传感技术和温度传感技术&#xff0c;为工业领域提供了全面而高效的设备状态监测解决方案。在振动温度一体式传感器中&#xff0c;有线和无线两种类型分别在设备…

[github全教程]github版本控制最全教学------- 大厂找工作面试必备!

作者&#xff1a;20岁爱吃必胜客&#xff08;坤制作人&#xff09;&#xff0c;近十年开发经验, 跨域学习者&#xff0c;目前于新西兰奥克兰大学攻读IT硕士学位。荣誉&#xff1a;阿里云博客专家认证、腾讯开发者社区优质创作者&#xff0c;在CTF省赛校赛多次取得好成绩。跨领域…

iOS简单理解区分MVC、MVP、MVVM

MVC、MVP、MVVM 前言 这篇文章简单介绍MVC、MVP和MVVM三种架构&#xff0c;并配上一个简单的Swift demo来区分MVC和MVVM两种架构。 MVC 传统MVC 下图是传统结构MVC&#xff0c;可以看到这种结构是紧耦合的&#xff0c;不推荐使用。 苹果的MVC 如下图&#xff0c;这是苹果…

【翻译】直流电动机的控制

直流电&#xff08;DC&#xff09;电机由于其转矩易于控制&#xff0c;速度控制范围广&#xff0c;已广泛应用于可调速驱动或可变转矩控制中。然而&#xff0c;直流电机有一个主要的缺点&#xff0c;即它们需要机械装置&#xff0c;如换向器和刷子来连续旋转。这些机械部件需要…

windows配置go调用python的编译环境

go是支持调用python代码的&#xff0c;之前写了几篇linux的部署教程&#xff0c;因为觉得windows的不复杂就没有写&#xff0c;结果今天新部署一个Windows的环境&#xff0c;有些步骤想不起来了&#xff0c;好记性不如烂笔头&#xff0c;还是记录一下吧。 这些是之前写的linux…

FlowJo软件的简单介绍 掌控流式细胞分析的科技巨匠 FlowJo10

FlowJo 10 for Mac是一款强大的流式细胞数据分析软件&#xff0c;具有以下功能&#xff1a; 数据导入与预处理&#xff1a;FlowJo 10可以轻松导入各种类型的流式细胞数据&#xff0c;并对数据进行预处理&#xff0c;包括去噪、背景校正等&#xff0c;以确保数据的准确性和可靠…

STM32F407-14.3.9-01输出比较模式

输出比较模式 此功能用于控制输出波形&#xff0c;或指示已经过某一时间段。 当捕获/比较寄存器与计数器之间相匹配时&#xff0c;输出比较功能&#xff1a; ● 将为相应的输出引脚分配一个可编程值&#xff0c;该值由输出比较模式&#xff08;TIMx_CCMRx 寄存器中的 OCxM⑦…

[网鼎杯 2020 青龙组]singal 1

前言 在主函数中找到了一个vm的译码器&#xff0c;译码器主要是解释传入的opcode&#xff0c;然后对我们输入的字符操作&#xff0c;这里我们发现他是单字节比较的&#xff0c;方法很多可以使用单字节映射&#xff0c;也可以是使用符号化执行&#xff0c;当然也可以硬着头皮去…

Docker 环境中 Spring Boot 应用的 Arthas 故障排查与性能优化实战

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…

EasyExcel两行表头

例子&#xff1a; 代码&#xff1a; StorageService localStorageService storageFactory.getLocalStorageService();String path "";// 文件信息String dateTime DateUtils.formatTimestampToString(new Date());String title "xxx统计";String fil…

TZOJ 1379 C语言合法标识符

答案&#xff1a; #include <stdio.h> #include <string.h> int main() {char arr[60];int n 0, i 0, num 0, flag;scanf("%d", &n);getchar(); //读取回车键while (n--) //循环N次{gets(arr);num strlen(arr); //num为字符串长度flag 1; …

Echarts大屏可视化_05 折线图的定制开发

继续跟着pink老师学习Echarts相关内容&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 折线图1 1.引入 折线图选取示例地址 标题没有用到就给他删了 直接引入 注意这里是line下面的chart 获取dom元素一定不…

java餐饮刀削面快餐店点餐服务系统springboot+jsp

网上点餐省去了客户很多不必要的时间和麻烦&#xff0c;给商家带来更多利益。同时&#xff0c;网上点餐可以辅助餐饮企业营销。传统的点餐是需要配备一个专业的服务员负责菜品介绍并记录顾客点单&#xff0c;确认后上交至后台厨房&#xff0c;厨房根据菜品种类安排做菜顺序最终…

Spring 多数据源搭建

目录 前言 正文 1.Druid 介绍和使用 2.其他多数据源解决方案 总结 前言 对于复杂的业务和项目&#xff0c;可能在一个单体项目中存在需要连接多个数据库的情况。这时&#xff0c;就会使用到多数据源&#xff0c;实际中遇到的可能性比较大。 正文 如果一个项目中需要连…

Unity Image - 镜像

1、为什么要使用镜像 在游戏开发过程中&#xff0c;我们经常会为了节省 美术图片资源大小&#xff0c;美术会将两边相同的图片进行切一半来处理。如下所示一个按钮 需要 400 * 236&#xff0c;然而美术只需要切一张 74*236的大小就可以了。这样一来图集就可以容纳更多的图片。…

Centos7使用阿里云镜像加速服务安装Docker

文章目录 一、前提说明二、安装docker1、创建docker文件夹2、安装所需的软件包3、设置Docker仓库4、安装docker5、启动验证使用阿里云镜像加速服务 三、卸载docker 一、前提说明 需要先安装好虚拟机&#xff0c;可以查看这篇https://blog.csdn.net/qq_36433289/article/detail…