社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > css教程 > CSS3鼠标移入图片动态提示效果

CSS3鼠标移入图片动态提示效果

不言
发布： 2018-06-25 16:35:48
原创
3004 人浏览过

本篇文章主要介绍了浅谈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);}
登录后复制

        <!--移动-->
        <figure class="test1">
            <img src="img/altimg05.jpg">
            <figcaption>
                <h2>图片标题</h2>
                <p>这里是图片的相关描述内容</p>
                <p>这里是图片的相关描述内容</p>
                <p>这里是图片的相关描述内容</p>
            </figcaption>
        </figure>
登录后复制

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 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;}
登录后复制

        <!--旋转-->
        <figure class="test2">
            <img src="img/altimg05.jpg">
            <figcaption>
                <h2>图片标题</h2>
                <p>飞来飞去</p>


                <p></p>
            </figcaption>
        </figure>
登录后复制

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);}
登录后复制

        <!--扭曲-->
        <figure class="test3">
            <img src="img/altimg05.jpg">
            <figcaption>
                <h2>图片标题</h2>
                <p>这里是图片的相关描述内容</p>
            </figcaption>
        </figure>
登录后复制

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 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);}
登录后复制

        <!--缩放-->
        <figure class="test4">
            <img src="img/altimg05.jpg">
            <figcaption>
                <h2>图片标题</h2>
                <p>这里是图片的相关描述内容</p>
                <p></p>
            </figcaption>
        </figure>
登录后复制

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 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;}
登录后复制

        <!--井字格-->
        <figure class="test5">
            <img src="img/altimg05.jpg">
            <figcaption>
                <h2>图片标题</h2>
                <p>这里是图片的相关描述内容</p>
                <p class="p01"></p>
                <p class="p02"></p>
            </figcaption>
        </figure>
登录后复制

以上是几个简单的小例子，之所以用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,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%;}
}
登录后复制

总结：

之所以选择写博客主要是为了锻炼自己的表达能力，培养一个总结知识点的好习惯，以前看别人写的一些好的文章时都很羡慕，自己却总是不知道从何下手，直到最近投简历的时候发现很多公司都要求注明自己的博客地址，所以有必要逼着自己写一下东西啦！

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

使用CSS3来实现滚动视差效果

CSS3 3D旋转rotate效果的使用介绍

以上是CSS3鼠标移入图片动态提示效果的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
CSS3鼠标移入图片 CSS3鼠标移入
来源：php.cn
上一篇：js和CSS3实现卡牌旋转切换效果 下一篇：CSS的table-layout属性的用法
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
div 元素不响应 JS onmouseover 所以，我有一个基本的工作示例，我移动光标/鼠标，生成一个具有某些样式的div，表示基于clientX的波浪状图案。仅当我将addEventlistener添加到window时才有效...
来自于 2024-04-02 20:47:52
0
1
308
PHP 中的数组：添加新条目时的令人惊讶的结果 所以我正在编写代码，允许我收集Instaloaderpython库收集的图像，并将它们放入我网站上的图库中。我已经设法毫无问题地收集和显示这些内容，但是我现在已经开始为每篇文章实现...
来自于 2024-03-31 14:10:42
0
1
405
我的网站在桌面上显示正常，但在手机屏幕上显示不正常 我使用HTML/CSS设计我的个人网站。但文字并没有缩放到手机上。请参考下面的图片。桌面上的网站看起来很棒，但在移动设备上显示效果不佳。手机显示我的谷歌驱动器嵌入甚至不适合手机屏幕...
来自于 2024-03-30 15:09:41
0
1
352
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板