需掌握的知识点：

1.掌握两个HTML5新标签figure以及figcaption的用法

2.掌握transform的属性特点，并能熟练运用

3.学会通过transition及transform配合，制作动画

4.学会简单的媒体查询应用

figure ，HTML5语义化标签：

用于规定独立的流内容（图像、图表、照片、代码等）

figcaption，HTML5语义化标签：

与figure配套使用，用于标签定义figure元素的标题或注解

结构和用法：

transform属性：

1、translate（平移）-- transform:translate(10px,10px);

2、rotate（旋转）    -- transform:rotate(90deg);

3、scale（缩放）      -- transform:scale(0.5,0.5);

4、skew（扭曲）-     - transform:skew(50deg,0deg);

transition属性：

1、property：检索或设置对象中的参与过渡属性（all,transform...）

2、duration：过渡动画的持续时间

3、timing-function：检索火设置对象中过渡的动画类型

4、delay：检索或设置对象延迟过渡的时间

-- transition: property duration timing-function delay;

-- transition: all 2s ease-in 1s;

效果图：

html代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="demoCSS.css" type="text/css" rel="stylesheet" />
</head>
<body>
<figure class="test1">
    <img src="img/1.jpg" />
    <figcaption>
        <h2>平移动画-多条文字</h2>
        <p>多条图片简介文字</p>
        <p>逐一飞入动画</p>
        <p>利用动画延时达到效果</p>
    </figcaption>
</figure>
<figure class="test2">
    <img src="img/2.jpg" />
    <figcaption>
        <h2>旋转动画</h2>
        <p>飞来飞去，飞来飞舞</p>
        <div></div>
    </figcaption>
</figure>
<figure class="test3">
    <img src="img/3.jpg" />
    <figcaption>
        <h2>图片标题</h2>
        <p>图片注解</p>
    </figcaption>
</figure>
<figure class="test4">
    <img src="img/4.jpg" />
    <figcaption>
        <h2>缩放动画</h2>
        <p>图片注解</p>
        <div></div>
    </figcaption>
</figure>
</body>
</html>

css代码：

*{
    margin:;
    padding:;
}
figure{
    position: relative;
    width: 33%;
    height: 350px;
    float: left;
    overflow: hidden;
}
figcaption{
    position: absolute;
    top: 0px;
    left: 0px;
    color: #fff;
    font-family: "微软雅黑";
}
@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%}
}
figure figcaption p,h2,span,div{transition: all 0.35s;}
figure img{opacity: 0.8;transition: all 0.35s;}
.test1{background: #2F0000;}
.test1 figcaption p{
    background: #fff;
    color: #333;
    margin: 5px;
    text-align: center;
    transform: translate(-240px,0px);
}
.test1 figcaption{padding: 20px;}
.test1:hover figcaption p{transform: translate(0px,0px);}
.test1 figcaption p:nth-of-type(1){transition-delay: 0.05s;}
.test1 figcaption p:nth-of-type(2){transition-delay: 0.1s;}
.test1 figcaption p:nth-of-type(3){transition-delay: 0.15s;}
.test1:hover img{opacity: 0.5;transform: translate(-50px,0px);}
.test2{background: #030;}
.test2 figcaption{width: 100%;height: 100%;}
.test2 figcaption div{
    border: 2px solid #fff;
    width: 80%;
    height: 80%;
    position: absolute;
    top: 10%;
    left: 10%;
    transform: translate(0px,-350px) rotate(0deg);
}
.test2 figcaption h2{
    margin-top: 15%;
    margin-left: 15%;
}
.test2 figcaption p{
    margin-left: 15%;
    transform: translate(0px,50px);
    opacity:;
}
.test2:hover figcaption div{
    transform: translate(0px,0px) rotate(360deg);
}
.test2:hover img{opacity: 0.5;}
.test2:hover figcaption p{
    transform: translate(0px,0px);
    opacity:;
}
.test3{
    background: #000;
}
.test3 figcaption{
    top: 30%;
    left: 15%;
}
.test3 figcaption h2{
    -webkit-transform: skew(90deg);/*导致chrome卡死的原因是90deg无限大*/
}
.test3 figcaption p{
    -webkit-transform: skew(90deg);
    transition-delay: 0.1s;
}
.test3:hover figcaption h2{
    -webkit-transform: skew(0deg);
}
.test3:hover figcaption p{
    -webkit-transform: skew(0deg);
}
.test3:hover img{
    opacity: 0.5;
}
.test4{
    background: #000;
}
.test4 figcaption{width: 100%;height: 100%;}
.test4 figcaption h2{
    margin-top: 15%;
    margin-left: 15%;
    transform: scale(1.2,1.2);
    opacity:;
}
.test4 figcaption p{
    margin-top: 5px;
    margin-left: 15%;
    transform: scale(1.2,1.2);
    opacity:;
}
.test4 figcaption div{
    border: 2px solid #fff;
    width: 80%;
    height: 80%;
    position: absolute;
    top: 10%;
    left: 10%;
    transform: scale(1.2,1.2);
    opacity:;
}
.test4:hover figcaption div{
    transform: scale(1,1);
    opacity:;
}
.test4:hover img{
    opacity: 0.5;
    transform: scale(1.2,1.2);
}
.test4:hover figcaption h2{
    transform: scale(1,1);
    opacity:;
}
.test4:hover figcaption p{
    transform: scale(1,1);
    opacity:;
}

CSS3特效----图片动态提示效果的更多相关文章

  1. JavaScript函数实现鼠标指向后带图片的提示效果

    转载:http://www.cnblogs.com/jack86514/archive/2009/04/01/1427584.html 当我们在写一个网页程序的时候,很多方法可以提供页面的动态显示,从 ...

  2. 9种纯CSS3人物信息卡片动态展示效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  3. js实现tooltip动态提示效果（文字版）

    页面中经常用到鼠标移动到一个元素上面显示提示的功能,最开始的做法是在下面创建一个div然后动态显示这个div,但是这样需要加很多div,比较麻烦. 针对上面个的需求,这边写了一个tooltip动态提示 ...

  4. CSS3实现图片渐入效果

    很多网站都有那种图片渐入的效果,如:http://www.mi.com/minote/,这种效果用css3和一些js实现起来特别简单. 拿我之前做的页面来说一下怎么利用css3来实现图片渐入效果. 下 ...

  5. CSS3之图片3D翻转效果(网页效果--每日一更)

    今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...

  6. js、css3实现图片的放大效果

    今天看网易的网站上,当我把鼠标放上去的时候发现图片放大,移开图片缩小,于是自行尝试,结果如下. 方法一:使用js和css3 效果如图: 这样的实现非常简单,就是利用js的mouseover和 mous ...

  7. web CSS3 实现3D动态翻牌效果

    使用纯CSS3 实现翻牌效果  需要注意要给子盒子使用绝对定位,这样两个盒子可以完全重合在一起,需要给父盒子一个 transform-style: preserve-3d;让子盒子翻转时保持3D效果, ...

  8. CSS3 banner图片的标签效果

    放body看,你懂的:)

  9. jQuery动态提示消息框效果

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...

随机推荐

  1. mysql技术内幕InnoDB存储引擎-阅读笔记

    mysql技术内幕InnoDB存储引擎这本书断断续续看了近10天左右,应该说作者有比较丰富的开发水平,在源码级别上分析的比较透彻.如果结合高可用mysql和高性能mysql来看或许效果会更好,可惜书太 ...

  2. javascript . 02 break和continue、while、数组、冒泡排序

    1.1 知识点 NaN是number类型 null是object类型 /**  + 回车  多行注释 table 会为内部的tr td 自动补齐闭合标签 1.2 循环结构 1.2.1  Break和c ...

  3. MySQL基础入门-第一课 新建数据库(linux版本)

    MySQL linux 登录MySQL sudo ),name ),phone )  );  # 或者  ),name ),phone ));  数据类型 数据类型 大小(字节) 用途 格式 INT ...

  4. Page-Object设计模式

    自动化脚本初写之际一定是只求完成功能测试,页面by.id.by.name.by.xpath满篇飞.业务逻辑代码重复率也是越来越高.慢慢的写着写着开始重构,开始封装一些方法.代码量好一些的人会在代码开始 ...

  5. IOS开发创建开发证书及发布App应用(六)——打包应用

    6.打包应用 如下图,生成之后点击下面红框的按钮,按时间排序,然后点最新的一次生成 从右侧生成日志中找到如下图红框标识的部分,找到 -output ,把下面浅蓝色选中,这是app生成的文件夹路径 点击 ...

  6. 手机自动化测试：Appium源码分析之跟踪代码分析八

    手机自动化测试:Appium源码分析之跟踪代码分析八   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家 ...

  7. 2.XML高级用法

    XML命名空间提供了避免元素命名冲突的方法.而XML CDATA允许我们在XML中添加不被XML解析器解析的数据. 2.1 XML命名空间 一般情况下,我们编写的XML文档都是: XML文档1: &l ...

  8. Zookeeper的安装和初步使用

    1. Zookeeper集群角色 Zookeeper集群的角色:  Leader 和  follower  (Observer) zk集群最好配成奇数个节点 只要集群中有半数以上节点存活,集群就能提供 ...

  9. linux从入门到精通学习-NFS

    NFS网络文件系统 功能 nfs[network file system] 网络文件系统 是FreBSD系统支持的一种系统,允许在网络 上与其它人共享使用文件或文件夹 采用C/S模式 端口号 在vim ...

  10. iTunes制作iPhone手机铃声方法（mac版2017年4月更新）

    iTunes制作iPhone手机铃声方法(mac版2017年4月更新)   跟之前百度出来的不同,我自己使用后写的.     1.首先下载好你需要制作铃声的mp3文件,这里我放在桌面.       2 ...