css3鼠标放上去效果-[{“

翻译”：[{“文本”：”

CSS3鼠标进入图片的动态表明功效n

n这次给大家带来CSS3鼠标进图动态提示效果，

实现CSS3鼠标进图动态提示效果有哪些注意事项，下面就是一个实际案例，上去看看吧。

n我

第一次尝试写博客，如果不好或错误，希望你能原谅我，明天我将主要写一些关于 CSS3 重要属性 transform 的用法，这是我在网上学习了 MOOC 老师的课程后自己输入的。

n

一、前言

n

1. 什么是转换？

n

转变的意义是：改变，使...变种;转换

n

2. 变换的共同属性是什么？

n

Transform的属性分别包括：translate（）/rotate（）/skew（）/scale（）/以及x和y，例如rotatex（）和rotatey（）等。

n

转换：翻译（）

n

含义：变化，位移;例如向右20像素和向下50像素（向左向上的负值）如下

n

.test01{-webkit-transform:translate(20px,50px);-moz-transform:translate(20px,50px)}

n

登录后复制

n

变换：旋转（）

n含义：旋转;“度”是旋转的程度，如“180度

”表示旋转，“180度”是下面的示例

n

.test02{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}

n

登录后复制

n

变换：斜（）

n

含义：倾斜示例如下

n

.test03{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}　

n

登录后复制

n

转换：缩放（）

n含义：比例列1.8

表示将列放大1.8，如果是放大整数倍，如3倍放大，则必须写成3.0，示例如下

n

.test03{-webkit-transform:scale(2.5);-moz-transform:scale(2.5)}

n

登录后复制

n

3. 转换实例

n

说明：键盘移入后，图片向左移动，内容依次移动

n

n

步骤：

n

1、编写HTML代码，通过CSS设置内容和图片的初始样式（文字内容在图片上）;

n

2. 将描述向左移动，直到它不可见（转换：翻译（-600px，0）;);

n

3.拿出来设置键盘移入（：hover）时的样式，借助transform，内容左侧的距离为0（transform：translate（0，0）），这里用的是过渡-延迟属性，主要是将三个内容延迟不同时间，产生按顺序步进的效果。

n

/*图片左移 文字依次进入*/
.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);}

n

登录后复制

n

n

登录后复制

n

描述：键盘移入后，图片变得模糊，圆圈从图片外侧旋转，步入图片手，文字从左侧飞出，逐步显示

步骤n

n

步骤：

n

1.编写html代码，通过CSS设置内容和图片的初始样式（圆形文字在图片上）;

n

2. 在变换属性中移动圆圈，直到它不可见，并将旋转角度设置为 0transform：平移（0，-400px）旋转（0度）;

n

3.拿起它并设置键盘移入（：悬停）时的样式偏移为0并旋转360度变换：翻译（0，0）旋转（360度）;

n

/*旋转*/
.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 p{border:2px solid #ccc;width: 80%;height: 80%;position:absolute;top:10%;left:10%;transform: translate(0,-400px) rotate(0deg);}
.test2:hover figcaption p{transform: translate(0,0) rotate(360deg);}
.test2:hover img{opacity: 0.6;}
.test2:hover figcaption p{transform: translate(0,0);opacity: 1;}

n

登录后复制

n

n

登录后复制

n

说明：键盘移入后扭曲的单词正常显示（因为文本在机箱中扭曲了 90 度，所以文本在视觉上不可见）。

n

n

步骤：

n

1. 编写HTML代码，通过CSS设置内容和图片的初始样式

n

2.扭曲文本内容90度变换：歪斜（90度）;

n

3.取出并设置键盘移入（：悬停）时的样式，使文本内容扭曲0度：skew（0）;

n

/*扭曲*/
.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);}

n

登录后复制

n

n

登录后复制

n

Demo04 说明：键盘移入圆圈，显示并缩小文字后，图片也会缩小

n

n

步骤：

n

1. 编写HTML代码，通过CSS设置内容和图片的初始样式

n2.将内容放大

1.2倍，是将键盘移入后放大倍率设为1时的效果降低，内容透明度设置为0;

n

3.取出键盘移入（：hover）时设置样式，内容放大到1，即缩小原始尺寸图片，使透明度为1;

n

/*缩放*/
.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 p{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 p{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);}

n

登录后复制

n

n

登录后复制

n

Demo05 说明：移入键盘后，将显示内容并出现井字游戏

n

n

步骤：

n

1.编写HTML代码，并通过CSS设置内容和图像的初始样式（井字游戏是两个方块的重叠）。

n2.将

两个圆圈缩小0.8，并将透明度设置为0;

n

3.拿出来设置键盘移入时的样式内容透明度（：hover），将圆圈缩放设置为1，这里借助过渡属性，主要是减少缩放过程逐渐变化;

n

/*井字格*/
.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 p{position: absolute;}
.test5 figcaption p.p01{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 p.p02{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 p.p01{opacity: 1;transform: scale(1);transition: transform 0.3s ease-in}
.test5:hover p.p02{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;}

n

登录后复制

n

n

登录后复制

n

以上就是几个简单的小反例，之所以使用图和无花果标题标签，主要是标签的语义，动态地图的截取是GifCam第一次用的很帅哈哈。

n图形标记主要用于

指定独立的流内容（图像、图表、照片、代码等），而 figcaption 与图形标签一起使用，主要用于定义图形元素的标题

n

哦，顺便说一下，因为这些反例是用HTML写的，所以提取了一些常见的样式

n

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,p{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%;}
}

n

登录后复制

n

总结：

n

之所以选择写博客，主要是磨练自己的表达能力，养成总结知识点的好习惯，原本看了一些别人写的好文章都羡慕不已，但总是不知道从哪里下手，直到最近我提交简历的时候，我发现很多公司都需要自己的博客地址， 所以有必要强迫自己写点东西！

n

相信看完本文的案例，大家已经掌握了方向，对于更多精彩，请关注PHP英文网的其他相关文章！“，”to“：”en“，”sentLen“：{”srcSentLen“：[25，1，1，71，5css3鼠标放上去效果，94，5，12，23，25，10，28，93，5，29，49，14，13，26，51，14，13，24，17，14，13，25，51，14，13，22，32，14，11，49，71，127，5，14，13，14，13，57，14，11，49，88，83，14，13，13，13，53，15，11，38，42，58，15，13，15，13，37，13，59，15，13css3鼠标放上去效果，13，32，15，11，50，39，81，15，13，15，13，

78，5，85，43，15，13，11，122，44]，”transSentLen“：[87,0,1,224,5,259,5,18,29,49,26,55,144,5,29,152,14,29,26,127,14,29,24,49,14,29,25,197,14,29,35,102,14,14,122,101,330,5,14,29,14,29,219,14,14,129,159,148,14,29,14,29,182,15,14,86,69,127,15,29,15,29,142,15,14,86,191,198,15,29,15,29,111,15,14,131,71,223,15,29,15,29,225,5,207,110,15,29,16,419,177]}}]}]