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

课程结束后有两个效果：

效果一：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. dev gridcontrol 绑定int型及日期型的列默认当值为0时显示空白及格式化日期显示方式

    xmlns:sys="clr-namespace:System;assembly=mscorlib" 如只显示日期的时间部分 <dxg:GridColumn Header=& ...

  2. C#：继承多态的方法实现数的简单加减乘除运算

       // 定义一个抽象的父类     abstract class Figure     {         //声明抽象方法:         //父类中的所有家里人可以用的方法必须都应用到子类中 ...

  3. Logstash安装搭建（一）

    Logstash是一个具有实时管道的开源数据收集引擎.可以动态地统一不同来源的数据,并将数据归到不同目的地.也是一个管理事件和日志工具.你可以用它来收集日志,分析它们,并将它们储存起来以供以后使用. ...

  4. ORM了解

    1.hibernate通过读取Hibernate.cfg.xml文件创建SessionFactory,并通过SessionFactory创建Session(开始使用要打开,使用结束要关闭);通过Ses ...

  5. HaoZip(好压) 去广告纯净版 4.4

    软件名称: 好压 去广告纯净版 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win8 / Win7 / Vista / WinXP 软件大小: 6.3MB 图片预览: 软件简介: 好压去广 ...

  6. intellij 出现“Usage of API documented as @since 1.6+”的解决办法

    Usage of API documented as @since 1.6+ This inspection finds all usages of methods that have @since ...

  7. Redis同步操作失败的原因

    今天弄了下 Redis 的主从同步,设置方法其实很简单的,但崩溃的是遇到个莫名其妙的问题,始终同步不了.. 看了看错误日志: Unable to connect to MASTER: Invalid ...

  8. Chapter 2 Open Book——37

    I couldn't concentrate on Mike's chatter as we walked to Gym, and RE. didn't do much to hold my atte ...

  9. Vimperator技巧

    Vimperator技巧 什么是Vimperator?Firefox的一个插件,模拟vim操作. 1. 用]]打开"下一页"链接,[[打开"上一页"Vimper ...

  10. hdu 1846 Brave Game 简单博弈

    Problem Description 十年前读大学的时候,中国每年都要从国外引进一些电影大片,其中有一部电影就叫<勇敢者的游戏>(英文名称:Zathura),一直到现在,我依然对于电影中 ...