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

课程结束后有两个效果：

效果一：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. Intellij Idea + Maven + Git + Struts2 HelloWorld

    1.在intellij Idea上新建Maven项目,输入相应的groupId,artifactId,项目名称: 2.在项目的pom文件中,引入struts2的核心依赖struts2-core: &l ...

  2. Noip 2016

    Day1 思路: 大致是 把一个环拆成链, 找某个人无非是向右找或向左找(即对当前点加或减) 若加上要移动的位置后坐标大于总人数, 就把当前坐标减去总人数, 若减去要移动的位置后坐标小于0, 就把当前 ...

  3. vedio_note2

    例化 for example ex_cnt ex_cnt_inst( //模块名 例化的名字 .clk(ckl_o), // . 后面是原模块的名字 括号里面是top里的名字 .rst_n(rst_n ...

  4. Malware Defender(HIPS主动防御软件) V2.8 免费版

    软件名称: Malware Defender(HIPS主动防御软件) V2.8 免费版 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win7 / Vista / Win2003 / Win ...

  5. KMP 算法 学习 整理

    我自己整理的KMP算法的PDF文件:http://pan.baidu.com/s/1o8yKIi2提取密码:8291 别的就不多说啥了,感谢来自海子 博客园的 资料--

  6. 工厂模式Assembly.Load(path).CreateInstance 反射出错解决办法

    项目结构: DALFactory 反射代码反射 //使用缓存 private static object CreateObject(string AssemblyPath,string classNa ...

  7. Java 内部类 this

    内部类访问外部类的一个例子: public class Abc { private class Bc { public void print() { System.out.println(Abc.th ...

  8. sharepoint:基于AD的FORM认证

    //来源:http://www.cnblogs.com/jindahao/archive/2012/05/07/2487351.html 需求: 1. 认证要基于AD 2. 登入方式要页面的方式(fo ...

  9. request相关研究

    一．什么是httpservletrequest 用来处理一个对Servlet的HTTP格式的请求信息. 二．httpservletrequest的作用是什么 优点: 公共接口类HttpServletR ...

  10. PHP奇怪现象

    <?php $a = 0.29; $b = (int)($a*100); echo $b; //输出28,PHP版本5.6.24 echo 0.1 + 0.2 - 0.3; //输出5.5511 ...