代码：

<!DOCTYPE html>
<html>
<head>
<title>照片影集</title>
<meta charset="utf-8">
<style type="text/css">
body{background-color: black;}
.BK{width: 1000px;height: 600px;margin: 100px auto;position: relative;}
.photo{width: 200px;height: 100px;position: absolute;transition:all 2s;opacity: 0.4;}
.photo:nth-child(1){top: 280px;left: 300px; transform: rotate(-30deg);z-index: 5}
.photo:nth-child(2){top: 400px;left: 350px;transform: rotate(20deg);z-index: 4}
.photo:nth-child(3){top: 180px;left: 300px;transform: rotate(30deg);z-index: 3}
.photo:nth-child(4){top: 210px;left: 600px;transform: rotate(30deg);z-index: 2}
.photo:nth-child(5){top: 280px;left: 500px;transform: rotate(-10deg);z-index: 1}
.photo:hover{transform: scale(3);z-index: 10;opacity: 1;position: absolute;top: 50%; left: 50%;}
</style>
</head>
<body>
<div class="BK">
<img src="../图片/1.jpg" class="photo">
<img src="../图片/2.jpg" class="photo">
<img src="../图片/3.jpg" class="photo">
<img src="../图片/4.jpg" class="photo">
<img src="../图片/5.jpg" class="photo">
</div>
</body>
</html>

CSS之照片集效果的更多相关文章

  1. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  2. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  3. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  4. CSS 边框 阴影 效果

    CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...

  5. Css实现透明效果，兼容IE8

    Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...

  6. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  7. css 实现评分效果

    css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由  background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上 ...

  8. 纯 CSS 实现波浪效果！

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

  9. React 系列教程 1：实现 Animate.css 官网效果

    前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...

随机推荐

  1. ROWID伪列

    ROWID伪列概念: 在数据表中每一行所保存的记录,oracle会为每条记录分配一个唯一的地址编号,这个编号就是通过ROWID表示的. 所有的数据都利用ROWID进行定位. 观察rowid的存在 SQ ...

  2. CSRF token 无法被验证. ----Yii连接数据库后数据库错误日志报错

    CSRF token 无法被验证. 我使用的是mongodb+ yii1.1 What is CSRF, please see the details here.  http://en.wikiped ...

  3. eclipse导入android项目红叉和红色感叹号怎么解决

    解决办法如下:第一步:你要确保这个项目没有问题,有的项目本身就有问题,例如:xml文件,java程序等本身就有错.第二步:在Eclipse菜单中选择“Project”----〉Clean 解决不了,下 ...

  4. MVC 使用 Ueditor富文本编辑器

    一.Ueditor 1.下载Ueditor富文本编辑器 官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...

  5. .net(C#)在vs2010版本下的MVC如何才能运行静态页面（html）

    正如,我上篇写的那样,那是在测试下,我所实现的方法,但是作为WEB项目,终究要发布的,故我把发布和切换在这说一下. 据我实测,我在按照我上篇改了Views下的Webconfig文件后,在解决方案下建了 ...

  6. WinDbg 蓝屏dump分析教程

    一.WinDbg是什么?它能做什么? WinDbg是在windows平台下,强大的用户态和内核态调试工具.它能够通过dmp文件轻松的定位到问题根源,可用于分析蓝屏.程序崩溃(IE崩溃)原因,是我们日常 ...

  7. C++ 标准库string字符串的截取

    标准库的string有一个substr函数用来截取子字符串.一般使用时传入两个参数,第一个是开始的坐标(第一个字符是0),第二个是截取的长度. #include <iostream> #i ...

  8. C#webform LinQ

    LinQ的高级查询: 模糊查 con.Car.Where(r=>r.Name.Contains(cname)).ToList(); 以..开头 con.car.Where(r => r.n ...

  9. 根据UUID和MD5， 生成可以用作Token的字符串

    import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; import java.util. ...

  10. sessionStorage & localStorage & cookie

    sessionStorage & localStorage & cookie 概念 html5中的Web Storage包括了两种存储方式:sessionStorage和localSt ...