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

课程结束后有两个效果：

效果一：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. C++引用(&)详解

    C++引用详解 引用的概念 引用:就是某一变量(目标)的一个别名,对引用的操作与对变量直接操作完全一样. 引用的声明方法:类型标识符 &引用名=目标变量名: 如下:定义引用ra,它是变量a的引 ...

  2. spring framework - 整体架构

    Spring Framework 3.2 采用分层架构设计,包含一些列的功能要素,总结为以下几个部分 Core Container 该模块是Spring的核心容器,包含有Beans.Core.Cont ...

  3. 【转】Jmeter（三）-简单的HTTP请求(非录制)

    首先建立一个线程组(Thread Group),为什么所有的请求都要加入线程组这个组件呢?不加不行吗?答案当然是不行的.因为jmeter的所有任务都必须由线程处理,所有任务都必须在线程组下面创建. 选 ...

  4. zabbix 布署实践【4 服务器自动探索发现，并且自动关联模版】

    使用管理员登录zabbix后,在配置---自动发现--创建发现规则 如下:我们的需求是监听办公网内openstack的所有虚拟机,在其VM创建后,自动加到zabbix监控中来,并自动关联监控模版 可以 ...

  5. java web开发环境搭建：jdk1.8+eclipse+tomcat8.0

    一.安装JDK 1.下载jdk-8-windows-i586.exe 2.双击安装(可以将安装路径选择到自己喜欢的地方) 3.配置环境变量 1.我的电脑->2.右键单击-> 然后将%JAV ...

  6. python 命名规范

    参考Google开源项目风格指南:https://zh-google-styleguide.readthedocs.io/en/latest/google-python-styleguide/cont ...

  7. android弹出dialog后，activity得到焦点

    1.getWindow().setFlags(WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,WindowManager.LayoutParams.FLAG ...

  8. Nginx redirect

    if ($host != 'www.xxxxx.com' ) { rewrite ^/(.*)$ http://www.xxxx.com/$1 permanent; }

  9. Maven pom项目部署

    maven控制台运行程序 <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>exec- ...

  10. OpenCV程序在Debug时出现「PDB文件无法加载」的一个解决方法

    这几天毕设要用到OpenCV,按照网上的教程来搭建开发环境. 用的是OpenCV 3.0 beta + Visual Studio Community 2013.我的系统64位是Win 8.1,但在加 ...