基于html5鼠标悬停图片动画展示效果
2024-06-05 08:01:16
分享一款基于html5鼠标悬停图片动画展示效果。里面包含两款不同效果的html5图片展示效果。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
<div class="wrap" id="wrap"><div style="float: left; padding-top: 30px; text-align: center; width: 100%; font-weight: bolder;color: #ff6600;">这是第一种风格</div><!-- 这个是第一种风格 Satrt--><main><ul class="ul items"><li><figure class="effect-winston"><img src="data:image/480_yugao.jpg" alt="轻网站公|lila"><figcaption><h2>轻网站公告 <span>lila</span></h2><p><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-demo"></i></a><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-buy"></i></a></p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-winston"><img src="data:image/480_0111.jpg" alt="丽拉|lila"><figcaption><h2>丽拉 <span>lila</span></h2><p><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-demo"></i></a><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-buy"></i></a></p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-winston"><img src="data:image/480_0110.jpg" alt="塔尔|taal"><figcaption><h2>塔尔 <span>taal</span></h2><p><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-demo"></i></a><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-buy"></i></a></p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-winston"><img src="data:image/480_0109.jpg" alt="格瑞斯|grace"><figcaption><h2>格瑞斯 <span>grace</span></h2><p><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-demo"></i></a><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-buy"></i></a></p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-winston"><img src="data:image/480_0108.jpg" alt="赛唯|seawee"><figcaption><h2>赛唯 <span>seawee</span></h2><p><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-demo"></i></a><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-buy"></i></a></p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-winston"><img src="data:image/480_0107.jpg" alt="克里|cree"><figcaption><h2>克里 <span>cree</span></h2><p><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-demo"></i></a><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-buy"></i></a></p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-winston"><img src="data:image/480_0106.jpg" alt="伊丽丝|iris"><figcaption><h2>伊丽丝 <span>iris</span></h2><p><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-demo"></i></a><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-buy"></i></a></p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-winston"><img src="data:image/480_0105.jpg" alt="玛雅|maaya"><figcaption><h2>玛雅 <span>maaya</span></h2><p><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-demo"></i></a><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-buy"></i></a></p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-winston"><img src="data:image/480_0104.jpg" alt="卡那|Carnac"><figcaption><h2>卡那 <span>Carnac</span></h2><p><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-demo"></i></a><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-buy"></i></a></p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li></ul></main><!-- 这个是第一种风格 End--><div style="float: left; padding-top: 30px; text-align: center; width: 100%; font-weight: bolder;color: #ff6600;">这是第二种风格</div><!-- 这个是第二种风格 Satrt--><main><ul class="ul items"><li><figure class="effect-jazz"><img src="data:image/480_soft_days.jpg" alt="云上的日子|soft days"><figcaption><h2>云上的日子<br><span>soft days</span></h2><p>单页</p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-jazz"><img src="data:image/480_wedding_blessing.jpg" alt="婚礼的祝福|wedding blessing"><figcaption><h2>婚礼的祝福<br><span>wedding blessing</span></h2><p>喜帖</p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-jazz"><img src="data:image/480_taste.jpg" alt="美食艺术家|taste"><figcaption><h2>美食艺术家<br><span>taste</span></h2><p>餐厅</p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-jazz"><img src="data:image/480_dreamer.jpg" alt="梦想家|dreamer"><figcaption><h2>梦想家<br><span>dreamer</span></h2><p>商城</p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-jazz"><img src="data:image/480_maple_leaf.jpg" alt="枫叶街|maple leaf"><figcaption><h2>枫叶街<br><span>maple leaf</span></h2><p>商城</p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-jazz"><img src="data:image/480_My_Own_Secret.jpg" alt="秘密|My Own Secret"><figcaption><h2>秘密<br><span>My Own Secret</span></h2><p>店铺</p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-jazz"><img src="data:image/480_wonder_world.jpg" alt="奇世界|wonder world"><figcaption><h2>奇世界<br><span>wonder world</span></h2><p>企业</p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-jazz"><img src="data:image/480_misical_diary.jpg" alt="音乐日记|misical diary"><figcaption><h2>音乐日记<br><span>misical diary</span></h2><p>音乐</p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-jazz"><img src="data:image/480_guess.jpg" alt="猜想|guess"><figcaption><h2>猜想<br><span>guess</span></h2><p>博客</p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li></ul></main></div>
via：http://***/Article/34610
转载于:https://www.cnblogs.com/liaohuolin/p/4464902.html
基于html5鼠标悬停图片动画展示效果相关推荐
- css鼠标悬停图片剪辑路径效果
下载地址 一款css鼠标悬停图片剪辑路径效果,当鼠标悬停在图片上时,图片按一定路径放大的动画特效,生动形象,让图片灵活起来. dd:
- html5鼠标悬停图片放大的原理,jQuery当鼠标悬停时放大图片的效果实例
这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果.今天就把制作该效果的经验与大家一同分享.先看看最终效果演示: HT ...
- html中实现鼠标悬停放大,如何实现鼠标悬停图片放大的效果。
在网页上我们经常看到鼠标悬停在一个图片上,这张图片会慢慢的放大,感觉是像放大镜放大的效果,当鼠标移开的时候,图片有恢复原来的样子,今天就实现这种效果. 实现原理以思路: 1,首先这是一张图片在悬停时放 ...
- html5鼠标悬停提示框,HTML5鼠标悬停动画提示框特效源码，前端必备
效果图 今天给各位官人带来的是,HTML5鼠标悬停动画提示框特效源码! 效果炫图生动,给网站带来较好的交互体验! 由于代码过长需要文档版源码来我的前端群581549454,已上传到群文件 废话不多说, ...
- html 图片墙效果,基于html5实现的图片墙效果
温馨提示:本信息由[金聪采编]搜集整理发布,版权归原作者及发布者所有,您如有异议请 举报 或者 版权申诉. 本文实例讲述了基于html5实现的图片墙效果,分享给大家供大家参考.具体实现方法如下: 这里 ...
- html鼠标感应图片,jQuery实现的感应鼠标悬停图片色彩渐显效果
本文实例讲述了jQuery实现的感应鼠标悬停图片色彩渐显效果.分享给大家供大家参考.具体实现方法如下: 超个性的感应鼠标悬停图片色彩渐显效果 ul.gallery { width: 750px; /* ...
- 鼠标悬停显示图片html5,JavaScript 鼠标悬停图片，显示隐藏文本
Unsplash 当我们在浏览网页的时候,描述性的文本通常不会跟在图片之后,而是当我们将鼠标移至图片上时,才会将文本显示出来,这样的好处是,以突显图片为主,并节省布局空间 HTML 结构如下 世界上最 ...
- android陀螺仪实现背景移动demo,基于HTML5陀螺仪实现移动动画效果
这次给大家带来基于HTML5陀螺仪实现移动动画效果,基于HTML5陀螺仪实现移动动画效果的注意事项有哪些,下面就是实战案例,一起来看一下. 最近用ofo小黄车App的时候,发现以前下方扫一扫变成了一个 ...
- css3鼠标悬停图片特效，图片悬停效果
css3鼠标悬停图片特效,图片悬停效果 代码如下: <title>css3鼠标悬停图片特效,图片悬停效果源码</title><style>*{box-sizing: ...
最新文章
- python精要（７9）－模块与包组织(2)－相对导入
- c++17(9)-多参数列表
- c++11多线程之packaged_task＜＞介绍与实例
- jquery网页刷新后控件失效_jquery动态增减控件如何才能不刷新页面
- 5h Oralcle进阶直播课，限时免费报名，手慢无！
- python绘制等距曲线_python应用之猪肉价格曲线的绘制
- c语言学生管理系统用户登录,c语言学生管理系统之用户登陆
- 【遗传算法】求解TSP问题
- java验证码不显示_chrome无法显示Java生成的验证码图片
- 微信公众平台原创声明功能公测 自媒体原创保护的福音
- 国内外主流云计算开发平台对比图 云开发平台
- SyntaxError: Non-UTF-8 code starting with ‘\xb5‘ in file问题如何解决？？？求助求助！！！
- Gstore官网学习二：安装（笔者自带填坑）
- MySQL中 反引号、单引号 和 双引号 的区别
- 一个程序员的成长进阶路径
- 学习笔记(11):OmniPlan项目管理就该这样学-拆分任务
- 7-5 宿舍谁最高？ (20 分)
- codeforces 1706.D1 Chopping Carrots (Easy Version)
- Trojan协议流量分析
- 驱动程序开发：SPI设备驱动