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

课程结束后有两个效果：

效果一：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. CentOS7 install vsftpd

    #mkdir -p /var/ftp/xcl/ #yum install -y vsftpd#useradd -g ftp -M -d /var/ftp/xcl -s /sbin/nologin xc ...

  2. java中常遇到的问题

    一.乱码问题 =========================================================================================== 方 ...

  3. Kali

    http://zydhacker.blog.163.com/blog/static/211795073201447337920/

  4. 安卓---apk反编译

    转自:http://blog.csdn.net/vipzjyno1/article/details/21039349 在学习Android开发的过程你,你往往会去借鉴别人的应用是怎么开发的,那些漂亮 ...

  5. Redis安装（CentOS7/tar.gz）

    1. 将安装包redis-3.2.0.tar.gz上传到linux系统,位置随意. 2. 解压文件 .tar.gz 3. 解压后会在当前目录生成文件夹“redis-3.2.0”,将其拷贝到" ...

  6. Substring （nyoj 308)

    练习使用字符串函数了. 1.字串的反转也是它的字串,2.最长,3.最先出现 string: #include<iostream> #include<cstdio> #inclu ...

  7. cdh 安装记录

    安装文件准备 CDH 下载地址:http://archive.cloudera.com/cdh5/parcels/latest/ 下载操作系统对应的版本: 1．CDH-5.3.0-1.cdh5.3.0 ...

  8. CentOS6.5 部署VPN管理系统（StrongSwan+iKEv2+Freeradiu+Mysql+Daloradius）

    一.环境介绍 Server IP:192.168.30.133 System: CentOS 6.5 Client:Winodows 二.编译安装StrongSwan 1.下载StrongSwan w ...

  9. JavaSE中主要的类与方法

    1.instanceof:测试左边的对象是否是右边类的实例;  数组.length:返回的是数组的长度; 2.Scanner类     nextInt():读取键盘录入的整数;  next():读取键 ...

  10. centos php 扩展安装

    1. 安装mysqli扩展 1.进入php源代码目录:# cd /home/apps/web/php/php-5.3.5/ 2.再进入要添加的mysqli扩展源码目录:# cd ext/mysqli/ ...