需掌握的知识点：

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代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <link href="demoCSS.css" type="text/css" rel="stylesheet" />
  7. </head>
  8. <body>
  9. <figure class="test1">
  10.     <img src="img/1.jpg" />
  11.     <figcaption>
  12.         <h2>平移动画-多条文字</h2>
  13.         <p>多条图片简介文字</p>
  14.         <p>逐一飞入动画</p>
  15.         <p>利用动画延时达到效果</p>
  16.     </figcaption>
  17. </figure>
  18. <figure class="test2">
  19.     <img src="img/2.jpg" />
  20.     <figcaption>
  21.         <h2>旋转动画</h2>
  22.         <p>飞来飞去，飞来飞舞</p>
  23.         <div></div>
  24.     </figcaption>
  25. </figure>
  26. <figure class="test3">
  27.     <img src="img/3.jpg" />
  28.     <figcaption>
  29.         <h2>图片标题</h2>
  30.         <p>图片注解</p>
  31.     </figcaption>
  32. </figure>
  33. <figure class="test4">
  34.     <img src="img/4.jpg" />
  35.     <figcaption>
  36.         <h2>缩放动画</h2>
  37.         <p>图片注解</p>
  38.         <div></div>
  39.     </figcaption>
  40. </figure>
  41. </body>
  42. </html>

css代码：

  1. *{
  2.     margin:;
  3.     padding:;
  4. }
  5. figure{
  6.     position: relative;
  7.     width: 33%;
  8.     height: 350px;
  9.     float: left;
  10.     overflow: hidden;
  11. }
  12. figcaption{
  13.     position: absolute;
  14.     top: 0px;
  15.     left: 0px;
  16.     color: #fff;
  17.     font-family: "微软雅黑";
  18. }
  19. @media screen and (max-width: 600px){
  20.     figure{width: 100%}
  21. }
  22. @media screen and (min-width: 601px) and (max-width: 1000px){
  23.     figure{width: 50%}
  24. }
  25. @media screen and (min-width: 1001px){
  26.     figure{width: 33%}
  27. }
  28. figure figcaption p,h2,span,div{transition: all 0.35s;}
  29. figure img{opacity: 0.8;transition: all 0.35s;}
  30. .test1{background: #2F0000;}
  31. .test1 figcaption p{
  32.     background: #fff;
  33.     color: #333;
  34.     margin: 5px;
  35.     text-align: center;
  36.     transform: translate(-240px,0px);
  37. }
  38. .test1 figcaption{padding: 20px;}
  39. .test1:hover figcaption p{transform: translate(0px,0px);}
  40. .test1 figcaption p:nth-of-type(1){transition-delay: 0.05s;}
  41. .test1 figcaption p:nth-of-type(2){transition-delay: 0.1s;}
  42. .test1 figcaption p:nth-of-type(3){transition-delay: 0.15s;}
  43. .test1:hover img{opacity: 0.5;transform: translate(-50px,0px);}
  44. .test2{background: #030;}
  45. .test2 figcaption{width: 100%;height: 100%;}
  46. .test2 figcaption div{
  47.     border: 2px solid #fff;
  48.     width: 80%;
  49.     height: 80%;
  50.     position: absolute;
  51.     top: 10%;
  52.     left: 10%;
  53.     transform: translate(0px,-350px) rotate(0deg);
  54. }
  55. .test2 figcaption h2{
  56.     margin-top: 15%;
  57.     margin-left: 15%;
  58. }
  59. .test2 figcaption p{
  60.     margin-left: 15%;
  61.     transform: translate(0px,50px);
  62.     opacity:;
  63. }
  64. .test2:hover figcaption div{
  65.     transform: translate(0px,0px) rotate(360deg);
  66. }
  67. .test2:hover img{opacity: 0.5;}
  68. .test2:hover figcaption p{
  69.     transform: translate(0px,0px);
  70.     opacity:;
  71. }
  72. .test3{
  73.     background: #000;
  74. }
  75. .test3 figcaption{
  76.     top: 30%;
  77.     left: 15%;
  78. }
  79. .test3 figcaption h2{
  80.     -webkit-transform: skew(90deg);/*导致chrome卡死的原因是90deg无限大*/
  81. }
  82. .test3 figcaption p{
  83.     -webkit-transform: skew(90deg);
  84.     transition-delay: 0.1s;
  85. }
  86. .test3:hover figcaption h2{
  87.     -webkit-transform: skew(0deg);
  88. }
  89. .test3:hover figcaption p{
  90.     -webkit-transform: skew(0deg);
  91. }
  92. .test3:hover img{
  93.     opacity: 0.5;
  94. }
  95. .test4{
  96.     background: #000;
  97. }
  98. .test4 figcaption{width: 100%;height: 100%;}
  99. .test4 figcaption h2{
  100.     margin-top: 15%;
  101.     margin-left: 15%;
  102.     transform: scale(1.2,1.2);
  103.     opacity:;
  104. }
  105. .test4 figcaption p{
  106.     margin-top: 5px;
  107.     margin-left: 15%;
  108.     transform: scale(1.2,1.2);
  109.     opacity:;
  110. }
  111. .test4 figcaption div{
  112.     border: 2px solid #fff;
  113.     width: 80%;
  114.     height: 80%;
  115.     position: absolute;
  116.     top: 10%;
  117.     left: 10%;
  118.     transform: scale(1.2,1.2);
  119.     opacity:;
  120. }
  121. .test4:hover figcaption div{
  122.     transform: scale(1,1);
  123.     opacity:;
  124. }
  125. .test4:hover img{
  126.     opacity: 0.5;
  127.     transform: scale(1.2,1.2);
  128. }
  129. .test4:hover figcaption h2{
  130.     transform: scale(1,1);
  131.     opacity:;
  132. }
  133. .test4:hover figcaption p{
  134.     transform: scale(1,1);
  135.     opacity:;
  136. }

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. 隐式的处理SOAPHeader消息

    先用一下比较基础的隐式方式处理我的SOAPHeader消息,注意的是QName的使用,代码如下: public static void main(String[] args) { try { //创建 ...

  2. Sublime Text3 编辑器我的最爱

    简介 Sublime Text 3是一个神奇的文本编辑器,适合程序员.作家.它有很多亮点功能,比如多选择.Go Anything.命令面板.多选择可以让你同时编辑多出代码,Got Anything 像 ...

  3. js中prototype，__proto__，constructor之间的关系

    首先,我们需要了解三点: 1. 只要创建一个任意新函数,就会根据一个prototype属性,该属性指向函数的原型对象: 2. 每一个原型对象都会自动获得一个constructor属性,该属性只想pro ...

  4. JAVA-实例方法被覆盖，静态方法被隐藏Explain

    被覆盖比较好理解,类似于多态的实现. 被隐藏是指静态方法的访问是根据当前对象的表面类型来决定的,比如 Supers = new Sub(); s.greeting()访问的是Super的静态方法,如果 ...

  5. 【Hexo】（一）使用HEXO配置环境，创建Hello World

    现场直播,呵呵,就是我完成一步,就记录一下: 一.配置环境 1.安装 Node 下载地址:Node.js 2.安装 Git(win环境下) 下载地址:Git Git 绑定 GitHub账户: ①打开G ...

  6. 手机自动化培训：Appium介绍

    手机自动化培训:Appium介绍 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9088214 ...

  7. Android开发艺术2之Activity的启动模式

    Activity是Android的四大组件之一,他的重要性毋庸置疑,对于这么重要的一个组件,我们首先要知道这些都是由系统进行管理和回调的,要理解Activity的启动模式,我们首先来了解一下Andro ...

  8. Android开发 旋转屏幕导致Activity重建解决方法(转)

     文章来源:http://www.jb51.net/article/31833.htm Android开发文档上专门有一小节解释这个问题.简单来说,Activity是负责与用户交互的最主要机制,任何“ ...

  9. Spring基础学习(五)—事务管理

    一.事务基本认识 1.事务的概述      为了保证数据库中数据的一致性,数据的操作应当是离散的成组的逻辑单元.当它全部完成时,数据的一致性可以保持,而当这个单元中的一部分操作失败,整个事务应当全部视 ...

  10. Spring基础学习(二)—详解Bean(上)

         在Spring配置文件中,用户不但可以将String.int等字面值注入Bean中,还可以将集合.Map等类型注入Bean中,此外还可以注入配置文件中其他定义的Bean. 一.字面值     ...