6种css3鼠标滑过动画效果
2024-06-01 22:33:18
<html><head><meta charset="utf-8" /><title>6种css3鼠标滑过动画效果</title><style type="text/css">/*****全局样式*****/*{padding:0;margin:0;font-family:"微软雅黑"}h2{margin:15px 0;font-weight: 300;}.content{margin: 0 auto;max-width:728px;margin-top:20px;text-align:center}footer{margin: 10px 0;font-size: 14px;}hr{margin: 20px 0;}code{font-size: 12px;}/*****鼠标悬停图片变大文字消失*****/.style1 ul li{float:left;margin:0 6px;position:relative;list-style:none}.style1 ul li{ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;}.style1 ul li img{width: 170px;height: 120px;border-radius: 2px;}.style1 ul li span{background:rgba(0, 0, 0, 0.5);color:#fff;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;line-height: 23px;position:absolute;bottom: 3px;width: 170px;left:0;font-size:12px;-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s;}.style1 ul li:hover {-webkit-transform: scale(1.1); /*1.1放大值*/-moz-transform: scale(1.1); -o-transform: scale(1.1);-ms-transform: scale(1.1); /* 本hover用的是：transform属性；scale是属性下放大；*/}.style1 ul li:hover span{ opacity:0}/*****鼠标悬停文字消失*****/.style2 ul li{float:left;margin:0 6px;position:relative;list-style:none}.style2 ul li img{width: 170px;height: 120px;border-radius: 2px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;}.style2 ul li span{background:rgba(0, 0, 0, 0.5);color:#fff;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;line-height: 23px;position:absolute;bottom: 3px;width: 170px;left:0;font-size:12px;-webkit-transition: all 0.5s; -moz-transition: all 0.5s;-o-transition: all 0.5s; -ms-transition: all 0.5s;/*其意相同：transition：all；初始过度属性 值0；*/}.style2 ul li:hover span{ opacity:0}/*opacit：0；代表完全消失；0.5半透明*//*****鼠标悬停整体旋转*****/.style3 ul li{float:left;margin:0 6px;position:relative;list-style:none}.style3 ul li{ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;}.style3 ul li img{width: 170px;height: 120px;border-radius: 2px;}.style3 ul li span{background:rgba(0, 0, 0, 0.5);color:#fff;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;line-height: 23px;position:absolute;bottom: 3px;width: 170px;left:0;font-size:12px;transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;}.style3 ul li:hover { transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg); /*css3旋转属性； 360deg（顺时针旋转360度）*/-ms-transform:rotate(360deg);}/*****鼠标悬停整体旋转放大*****/.style4 ul li{float:left;margin:0 6px;position:relative;list-style:none}.style4 ul li{transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in-out;}.style4 ul li img{width: 170px;height: 120px;border-radius: 2px;}.style4 ul li span{background:rgba(0, 0, 0, 0.5);color:#fff;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;line-height: 23px;position:absolute;bottom: 3px;width: 170px;left:0;font-size:12px;transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;}.style4 ul li:hover {transform:rotate(360deg) scale(1.2); -webkit-transform:rotate(360deg) scale(1.2); -moz-transform:rotate(360deg) scale(1.2); -o-transform:rotate(360deg) scale(1.2); /*transform 属性下 rotate（旋转）和scale（放大）属性；可以同时用*/-ms-transform:rotate(360deg) scale(1.2);}/*****鼠标悬停整体上升*****/.style5 ul li{float:left;margin:0 6px;position:relative;list-style:none}.style5 ul li{transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in-out;}.style5 ul li img{width: 170px;height: 120px;border-radius: 2px;}.style5 ul li span{background:rgba(0, 0, 0, 0.5);color:#fff;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;line-height: 23px;position:absolute;bottom: 3px;width: 170px;left:0;font-size:12px;transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;}.style5 ul li:hover {transform:translate(0,-10px); -webkit-transform:translate(0,-10px); -moz-transform:translate(0,-10px); -o-transform:translate(0,-10px); -ms-transform:translate(0,-10px);}/*****鼠标悬停图片放大缩小动画*****/@-webkit-keyframes play{50% {transform: scale(0.8);}100% {transform: scale(1);}}.style6 ul li{float:left;margin:0 6px;position:relative;list-style:none}.style6 ul li{transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in-out;}.style6 ul li img{width: 170px;height: 120px;border-radius: 2px;}.style6 ul li span{background:rgba(0, 0, 0, 0.5);color:#fff;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;line-height: 23px;position:absolute;bottom: 3px;width: 170px;left:0;font-size:12px;transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;}.style6 ul li:first-child:hover{animation: play 0.3s 50 linear;}.style6 ul li:last-child:hover{animation: play 0.3s 50 linear;position: relative;}.style6 ul li:last-child h1{position: absolute;color: red;top: 50px;font-size: 40px;left: 96px;}.style6 ul li:nth-child(2):hover {animation: play 0.3s 1 linear;}.style6 ul li:nth-child(3):hover {animation: play 0.3s 2 linear;}</style></head><body>
<body class="content"><div class="style1 "><h2>1.鼠标悬停图片变大文字消失</h2><ul><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停图片变大文字消失</span></li><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停图片变大文字消失</span></li><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停图片变大文字消失</span></li><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停图片变大文字消失</span></li></ul>
</div>
<div style="clear:both"></div><div class="style2"><h2>2.鼠标悬停文字消失</h2><ul><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停文字消失</span></li><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停文字消失</span></li><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停文字消失</span></li><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停文字消失</span></li></ul>
</div>
<div style="clear:both"></div><div class="style3"><h2>3.鼠标悬停整体旋转</h2><ul><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转</span></li><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转</span></li><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转</span></li><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转</span></li></ul>
</div>
<div style="clear:both"></div><div class="style4"><h2>4.鼠标悬停整体旋转放大</h2><ul><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转放大</span></li><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转放大</span></li><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转放大</span></li><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转放大</span></li></ul>
</div>
<div style="clear:both"></div><div class="style5"><h2>5.鼠标悬停整体上升</h2><ul><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体上升</span></li><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体上升</span></li><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体上升</span></li><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体上升</span></li></ul>
</div>
<div style="clear:both"></div><div class="style6"><h2>6.鼠标悬停心脏咔咔跳</h2><ul><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停心脏咔咔跳</span></li><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停心脏咔咔跳</span></li><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停心脏咔咔跳</span></li><li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停心脏咔咔跳</span></li></ul>
</div>
<div style="clear:both"></div><footer><code>放大 修改scale(放大的值)<br />旋转放大 修改rotate(旋转度数) scale(放大值)<br />上下左右移动 修改translate(x轴,y轴)</code><br /><hr /></footer></body>
</html>6种css3鼠标滑过动画效果相关推荐
- 鼠标动效html,5种纯CSS3鼠标hover按钮动画效果
这是一款鼠标hover按钮动画特效.该特效共有5种hover动画效果,它们在结构布局上使用flex来进行布局,并通过css transition来实现动画效果. 使用方法 HTML结构 该按钮特效使用 ...
- html hover 效果,8种css3技术的hover动画效果
hover动画,简言之就是鼠标移上去触发的动画,就是触发了鼠标的hover事件时能看到的动画! 1.简单动画 html bigsmall css .ech-big,.ech-small { trans ...
- html给文字加动态效果,20种配合场景的CSS3鼠标滑过文字动画特效
这是一组非常有创意的配合场景使用的CSS3鼠标滑过文字动画特效.这组鼠标滑过特效中,以20张不同的图片作为不同的场景,例如图片是一条公路,鼠标滑过这上面的文字时,就会在文字下边出现一条公路的动画效果. ...
- html5 鼠标旋转动画效果,CSS3鼠标滑过图片3D翻转动画特效
这是一款效果非常炫酷的CSS3鼠标滑过图片3D翻转动画特效.该特效基于Bootstrap网格系统来布局,通过简单的CSS3代码,在鼠标滑过图片时对图片进行3D翻转,效果非常的酷. 使用方法 HTML结 ...
- html5 css3鼠标滑过效果,Hover.css纯CSS3鼠标滑过特效动画库
Hover.css是一款非常简单实用的纯CSS3鼠标滑过特效动画库.有100多种效果可以选择,包括:2D动画.背景动画.边框动画.图标动画.发光渐变.阴影.对话框.折角等100多种特效. 使用方法 首 ...
- html鼠标移上去变色放大,CSS3 鼠标滑过图片突出放大效果 | 腾讯云
今天给大家分享一款简单实用的CSS3鼠标滑过图片放大特效,我们可以将它应用在相册中,或者是轮播展示的图片中,这样可以将鼠标移到图片上进行快速预览图片.同时你也可以在此基础上扩展它,比如给图片加投影和边 ...
- html5 css3鼠标滑过效果,纯CSS3鼠标滑过按钮流光效果
这是一款效果非常炫酷的纯CSS3鼠标滑过按钮流光效果.当用户用鼠标滑过按钮的时候,一道流光会瞬间滑过按钮,就像玻璃的反光效果,非常漂亮. 使用方法 HTML结构 该效果中的按钮是一个超链接元素. Li ...
- html5鼠标滑过图片 图片弹出层,纯CSS3鼠标滑过图片遮罩层动画特效
简要教程 这是一款使用纯CSS3制作的鼠标滑过图片遮罩层动画特效.该特效中,当鼠标滑过或悬停在图片上面时,会在图片上出现遮罩层动画,展示出图片的描述信息和链接图标按钮. 使用方法 在页面中引入boot ...
- html中图片鼠标滑过偏移,jQuery和css3鼠标滑过网格相邻图片浮动效果
这是一款效果十分炫酷的jQuery和css3鼠标滑过网格相邻图片浮动效果.插件中使用了jQuery Proximity plugin. 有很多种方法使用纯css来制作手风琴效果,其中使用最多的是使用: ...
最新文章
- 用PHP实现var_export
- NET工程师求职面试必杀技
- DrawerLayout
- IBatis.Net学习笔记五--常用的查询方式
- python如何去掉字符串‘\xa0’
- Leetcode-169 Majority Element
- 解决 PowerDesigner 错误 The generation has been cancelled…
- php中文网面试题_2020年PHP面试题大汇总（收藏）
- 转：技术宅逆天了！如何从按键音中听出周鸿祎的手机号码
- 启动计算机时听到嘀嘀声,笔记本电脑开机嘀嘀滴声音如何解决
- 读取NTFS的USN（获取文件的历史操作记录，即使这个文件已被删除）
- 大数据中心显示大屏幕用液晶拼接屏还是led显示屏？
- da2 Android版本固件,OPPOAce2官方系统刷机包（完整固件最新升级包ColorOS 7）
- kali上的一些密码破解工具
- Unity3D技术开发之战争迷雾效果
- Kibana 的安装 与 汉化
- win7+ubuntu双系统双固态硬盘安装
- TensoRF-张量辐射场论文笔记
- 40个吸引眼球的注册页面设计
- WinXP下虚拟摄像头驱动程序开发