资料来源：慕课网（点击这里）

课程结束后有两个效果：

效果一：CSS制作照片墙（点击这里）

效果二：旋转出现文字效果（点击这里）

实现代码：

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="utf-8" />

     <title>CSS实现照片墙</title>

     <style>

         body{background-color:#eee;}

         h1{text-align:center;}

         .container{

                 /*

                 background-color:#3F3;

                 */

                 width:950px;

                 height:450px;

                 margin:60px auto;

                 position:relative;

             }

         img{padding:10px 10px 15px;background-color:#fff;

             border:1px solid #ddd;

             top:50px;left:200px;

             /*

             考虑到浏览器的兼容性这里加上了-webkit-和-moz-，

             分别是用于Chrome和Safari浏览器的前缀

             及-moz-是Firefox的前缀

             */

             -webkit-transform:rotate(-30deg);

             -moz-transform:rotate(-30deg);

             rotate(-30deg);

             /*设置动画时间长度*/

             -webkit-transition:2s;

             -moz-transition:2s;

             transition:2s;

             /*制作放大效果*/

             }

         img:hover{

             -webkit-transform:rotate(0deg);

             -moz-transform:rotate(0deg);

             rotate(0deg);

             -webkit-transform:scale(0.5);

             -moz-transform:scale(0.5);

             transform:scale(0.5);

             box-shadow:-10px 10px 15px #ccc;

             }

     </style>

 </head>

 <body>

 <h1>照片墙制作</h1>

 <div class="container">

     <img src="data:images/5.jpg">

 </div>

 </body>

 </html>

实现代码二：

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset="utf-8" />

 <style>

     .mainDiv{

         width:100px;

         height:100px;

         margin:100px auto;

         text-align: center;

         line-height: 100px;

         font-weight: bold;

         color:#ddd;

         background:#ddd;

         border:1px solid #ddd;

         -webkit-transform:rotate(0deg) scale(1);

         -moz-transform:rotate(0deg) scale(1);

         transform:rotate(0deg) scale(1);

         -webkit-transition:2s;

         -moz-transition:2s;

         transition:2s;

     }

     .mainDiv:hover{

         color:#000;

         background:#f00;

         border:1px solid #ddd;

         -webkit-transform:rotate(720deg) scale(2);

         -moz-transform:rotate(720deg) scale(2);

         transform:rotate(720deg) scale(2);

     }

 </style>

 <title>css3特效</title>

 </head>

 <body>

 <div class="mainDiv">您好</div>

 </body>

 </html>

CSS制作照片墙的更多相关文章

  1. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  2. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  3. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  4. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  5. 纯CSS制作水平垂直居中“十字架”

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

  6. jQuery & CSS 制作金属质感的选择按钮

    如果能把 CSS 运用好,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一组结合 jQuery & CSS 制作的充满金属质感的选择框效果,绝对是超级精美的效果. 在线演 ...

  7. DIV+CSS制作二级横向弹出菜单，略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  8. 纯CSS制作三角（转）

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

  9. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

随机推荐

  1. PHP判断一个变量是否可以通过foreach进行遍历

    <?php if( !is_array( $items ) && !$items instanceof Traversable ) //Throw exception here ...

  2. Scala 控制结构

    Scala内建的控制结构屈指可数,仅有if, while, for, match, try和函数调用而已. 几乎所有的Scala控制结构都会产生某个值(while和 do while虽然不能产生有意义 ...

  3. tableviewcell 点击 设置

    table?.separatorInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0) //设置cell 下边线 位置 table?.se ...

  4. Postman怎么用？

    国庆期间的工作就是搞清楚postman怎么用?

  5. vector,list,deque

    stl提供了三个最基本的容器:vector,list,deque. vector和built-in数组类似,它拥有一段连续的内存空间,并且起始地址不变,因此它能非常好的支持随即存取,即[]操作符,但由 ...

  6. windows中操作文件和目录的函数

    1.文件操作函数       CreateFile();//创建或打开文件      ReadFile();//从文件读      WriteFile();//向文件写      SetFilePoi ...

  7. 用TextKit实现图文混排(转载)

    Textkit是iOS7新推出的类库,其实是在之前推出的CoreText上的封装,有了这个TextKit,以后不用再拿着CoreText来做累活 了,根据苹果的说法,他们开发了两年多才完成,而且他们在 ...

  8. EntityFramework批量Insert

    先说解决办法:使用SqlBulkCopy. 然后问题是:这个和EF没有半点关系,还要拼DataSet. 再是解决办法:你可以自己封装一个,也可以使用人家写好的 EntityFramework.Bulk ...

  9. spring security：ajax请求的session超时处理

    当前端在用ajax请求时,如果没有设置session超时时间并且做跳转到登录界面的处理,那么只是靠后台是很难完成超时的一系列动作的:但是如果后台 没有封装一个ajax请求公共类,那么在ajax请求上下 ...

  10. 项目有叉号， 但是没有代码错误的时候， 是JDK版本的问题

    windows---proferences---java--compiler进入项目--properties---java Compiler进入项目--properties---Myeclipse-- ...