您现在的位置是：网站首页> 编程资料编程资料
浅谈CSS3鼠标移入图片动态提示效果（transform）css3+伪元素实现鼠标移入时下划线向两边展开的效果纯css写的评分鼠标移入的效果附图纯CSS实现商品图片点击放大效果CSS实现鼠标移入时图片的放大效果及缓慢过渡效果的示例代码
2021-09-04
1604人已围观
简介 本篇文章主要介绍了浅谈CSS3鼠标移入图片动态提示效果（transform），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
第一次尝试着写博客，不好或者有误的地方希望大家多多指正呐，今天主要写的是关于CSS3的一个重要属性transform的一些用法，这些例子是之前在慕课网上学习某位老师的课程后自己敲的。
一、前言
1. transform是什么？
transform的含义是：改变，使....变形；转换
2. transform的常见属性有哪些？
transform的属性包括： translate()/rotate() / skew() / scale() /，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。
transform:translate()
含义：变动，位移；例如向右位移20像素，向上位移50像素（向左向下为负值） 实例如下
.test01{-webkit-transform:translate(20px,50px);-moz-transform:translate(20px,50px)}transform:rotate()
含义：旋转；“deg”是表示旋转的度数 例如“180deg”表示旋转“180度” 实例如下
.test02{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}transform:skew()
含义：倾斜 实例如下
.test03{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)} transform:scale()
含义：比例 1.8表示以1.8的比例放大 如果是放大整数倍如放大3倍 必须写成3.0 实例如下
.test03{-webkit-transform:scale(2.5);-moz-transform:scale(2.5)}3. transform的实例
demo01 说明：鼠标移入后 图片左移 内容依次进入
步骤：
1.写好html代码并通过css设置好内容和图片的初始样式（文字内容都在图片上）；
2.将描述内容通过transform属性位移到左侧 看不到为止（transform:translate(-600px,0);）；
3.接下来设置鼠标移入时(:hover)的样式 同样是利用transform 使内容左移的距离为0（transform:translate(0,0)）这里用到transition-delay属性主要是为了让三个内容分别延迟不同的时间 形成依次进入的效果。
/*图片左移 文字依次进入*/ .test1{background: #fff;} .test1 figcaption p{background: #fff;color:#333;margin:5px 0;transform: translate(-600px,0px);} .test1 figcaption{padding:20px} .test1:hover figcaption p{transform: translate(0,0);} .test1 figcaption p:nth-of-type(1){transition-delay: 0.2s;} .test1 figcaption p:nth-of-type(2){transition-delay: 0.3s;} .test1 figcaption p:nth-of-type(3){transition-delay: 0.4s;} .test1:hover img{transform: translate(-5px,0);} 图片标题
这里是图片的相关描述内容
这里是图片的相关描述内容
这里是图片的相关描述内容
demo02 说明：鼠标移入后 图片变模糊 矩形从图片外旋转进入图片中指定位置 文字从右侧飞过来 并逐渐显示
步骤：
1.写好html代码并通过css设置好内容和图片的初始样式（矩形文字都在图片上）；
2.将矩形通过transform属性位移到上方 看不到为止 并设置旋转的角度为0 transform: translate(0,-400px) rotate(0deg)；
3.接下来设置鼠标移入时(:hover)的样式 位移设置为0并旋转360度 transform: translate(0,0) rotate(360deg);
/*旋转*/ .test2{background: #ccc;} .test2 figcaption{width: 100%;height: 100%;} .test2 figcaption h2{margin:15% 0 0 15%} .test2 figcaption p{margin-left:15%;transform: translate(50px,0);opacity: 0;} .test2 figcaption div{border:2px solid #ccc;width: 80%;height: 80%;position:absolute;top:10%;left:10%;transform: translate(0,-400px) rotate(0deg);} .test2:hover figcaption div{transform: translate(0,0) rotate(360deg);} .test2:hover img{opacity: 0.6;} .test2:hover figcaption p{transform: translate(0,0);opacity: 1;} 图片标题
飞来飞去
demo03 说明：鼠标移入后 扭曲的字正常显示（因为例子中扭曲了90度 所以视觉上看不到文字）
步骤：
1.写好html代码并通过css设置好内容和图片的初始样式；
2.将文字内容扭曲90度 transform: skew(90deg)；
3.接下来设置鼠标移入时(:hover)的样式 将文字内容扭曲0度 transform: skew(0);
/*扭曲*/ .test3{background:#CCCCCC;} .test3 figcaption{position: absolute;left:15%;top:15%} .test3 figcaption h2{transform: skew(90deg);} .test3 figcaption p{transform: skew(90deg);} .test3:hover img{opacity: 0.6;} .test3:hover figcaption h2{transform: skew(0);} .test3:hover figcaption p{transform: skew(0);}图片标题
这里是图片的相关描述内容
demo04 说明：鼠标移入后 矩形和文字显示并缩小 图片也缩小
步骤：
1.写好html代码并通过css设置好内容和图片的初始样式
2.将内容放大1.2倍 这是为了鼠标移入后放大倍数变成1时形成缩小的效果 内容的透明度设置为0；
3.接下来设置鼠标移入时(:hover)的样式 内容放大倍数变成1也就是原始大小 图片缩小 透明度都变成1;
/*缩放*/ .test4{background: #000;} .test4 figcaption{width: 100%;height: 100%;} .test4 figcaption h2{margin:15% 0 0 15%;opacity:0;transform: scale(1.2);} .test4 figcaption p{margin-left:15%;opacity:0;transform: scale(1.2);} .test4 figcaption div{border:2px solid #ccc;width: 80%;height: 80%;position:absolute;top:10%;left:10%;transform: scale(1.2,1.2);opacity: 0;} .test4:hover figcaption div{transform: scale(1,1);opacity: 1;} .test4:hover img{opacity: 0.6;transform: scale(0.9,0.9);} .test4:hover figcaption h2{opacity: 1;transform: scale(1);} .test4:hover figcaption p{opacity: 1;transform: scale(1);}
图片标题
这里是图片的相关描述内容
demo05 说明：鼠标移入后 内容显示 并出现井字格
步骤：
1.写好html代码并通过css设置好内容和图片的初始样式（井字就是两个矩形的重叠）
2.将两个矩形缩小0.8 并设置透明度为0 内容也设置透明度为0；
3.接下来设置鼠标移入时(:hover)的样式 内容透明度设置为1 设置矩形缩放为1 这里利用到transition属性 主要是为了缩小放大过程逐渐变化;
/*井字格*/ .test5{background: #000;} .test5 figcaption{width: 100%;height: 100%;} .test5 figcaption h2{margin: 15% 0 0 18%;opacity: 0;} .test5 figcaption p{margin-left: 18%;opacity: 0;} .test5 figcaption div{position: absolute;} .test5 figcaption div.div01{width: 80%;height:70%;border-top: 2px solid #ccc;border-bottom: 2px solid #ccc;left:10%;top:15%;opacity: 0;transform: scale(0.8);} .test5 figcaption div.div02{width: 70%;height:80%;border-left: 2px solid #ccc;border-right: 2px solid #ccc;left: 15%;top:10%;opacity: 0;transform: scale(0.8);} .test5:hover div.div01{opacity: 1;transform: scale(1);transition: transform 0.3s ease-in} .test5:hover div.div02{opacity: 1;transform: scale(1);transition: transform 0.3s ease-in} .test5:hover figcaption p{opacity: 1;} .test5:hover figcaption h2{opacity: 1;} .test5:hover img{opacity: 0.6;} 图片标题
这里是图片的相关描述内容
以上是几个简单的小例子，之所以用figure和figcaption标签，主要是标签的语义化，截取动态图用到的是GifCam第一次用 挺好用的 很可爱 哈哈。
figure标签主要是用于规定独立的流内容（图片，图表，照片，代码等）而figcaption与figure标签配套使用，主要用于定义figure元素的标题
哦，对了，由于这几个例子写在一个html里面 所以提取出了部分公用的样式
body,figure,figcaption,h2,p{margin:0;padding:0;font-family: "微软雅黑";} figure{position: relative;overflow: hidden;float: left;width:33.33%;height: 350px;} figcaption{position: absolute;top: 0;left: 0;color:#fff;} figure img{width:101%;height: 360px;opacity: 0.8;transition: all 0.35s} figure figcaption p,h2,span,div{transition: all 0.35s} @media screen and (max-width: 600px) { figure{width: 100%;} } @media screen and (min-width:601px) and (max-width: 1000px) { figure{width: 50%;} } @media screen and (min-width: 1001px) { figure{width: 33.33%;} } 总结：
之所以选择写博客主要是为了锻炼自己的表达能力，培养一个总结知识点的好习惯，以前看别人写的一些好的文章时都很羡慕，自己却总是不知道从何下手，直到最近投简历的时候发现很多公司都要求注明自己的博客地址，所以有必要逼着自己写一下东西啦！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
相关内容
- 浅谈css sticker-footer 布局详解css布局实现左中右布局的5种方式CSS实现多行多列的布局的实例代码css Flex布局的可伸缩性(Flexibility)浅谈css网页的几种布局如何理解 CSS 布局和块级格式上下文详解使用CSS3的@media来编写响应式的页面 CSS布局方案小结
- 详解Sticky Footer 绝对底部的两种套路 CSS Sticky Footer 几种实现方式CSS Sticky Footer实现代码CSS实现Sticky Footer的示例代码详解CSS经典布局之Sticky footer布局css sticky footer经典布局的实现
- 通过CSS的滤镜实现火焰效果的示例CSS3 实现的火焰动画CSS3实现文字浮雕效果，镂刻效果，火焰文字如何通过 CSS 写出火焰效果
- CSS3 mask 遮罩的具体使用方法
- 浅谈前端开发中容易被忽略CSS特性CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- 用CSS3实现无限循环的无缝滚动的示例代码 用CSS3实现无限循环的无缝滚动的实例代码CSS动画实现背景无缝无限循环的实现示例
- 用纯CSS3实现网页中常见的小箭头
- 使用CSS制作立体导航栏html+css+js实现导航栏滚动渐变效果不可思议的CSS导航栏下划线跟随效果html+css 实现简易导航栏功能CSS中的导航栏和下拉菜单的实现纯CSS实现导航栏下划线跟随滑动效果div+css实现带箭头的面包屑导航栏CSS导航栏及弹窗示例代码纯CSS实现导航栏Tab切换效果CSS利用伪元素实现导航栏斜线分隔基于html和CSS3制作简单侧边导航栏
- CSS中提升优先级属性!important的用法问题总结浅谈CSS 权值 层叠 重要性(!important)css中提升优先级属性!important的用法总结从可维护性角度考虑css的!important规则的可用性强制CSS !important使用介绍css中!important的作用(IE6 IE7 FF)及其原理CSS优先级和!important与IE6的BUG讨论及解决方案CSS下!important属性
- css 实现矩形四个边角加粗的方法HTML5+CSS3绘制锯齿状的矩形使用Div+CSS纯图片实现圆角矩形的方法小结CSS3绘制圆角矩形的简单示例css添加一条属性能够绘制一个矩形框div+css制作圆角矩形的原理示例解读div+css用边框实现圆角矩形(多样式)纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）圆角矩形的html+css实现代码CSS高级技巧:圆角矩形-CSS教程-网页制作-网页教学网
