代码：

<!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. main函数的详解

    public : 公共的. 权限是最大,在任何情况下都可以访问. 原因: 为了保证让jvm在任何情况下都可以访问到main方法. static: 静态.静态可以让jvm调用main函数的时候更加的方便 ...

  2. poll()函数的使用

    分类: LINUX poll函数用于监测多个等待事件,若事件未发生,进程睡眠,放弃CPU控制权,若监测的任何一个事件发生,poll将唤醒睡眠的进程,并判断是什么等待事件发生,执行相应的操作.poll函 ...

  3. 7 -- Spring的基本用法 -- 5...

    7.5 Spring容器中的Bean 7.5.1 Bean的基本定义和Bean别名 <beans.../>元素是Spring配置文件的根元素,该元素可以指定如下属性: default-la ...

  4. Beam Search（集束搜索/束搜索）

    找遍百度也没有找到关于Beam Search的详细解释,只有一些比较泛泛的讲解,于是有了这篇博文. 首先给出wiki地址:http://en.wikipedia.org/wiki/Beam_searc ...

  5. H5一行显示两个正方形

    1)有时候一些图片会是正方形或者长方形,对于这样的图片一般都是居中显示到正方体内,代码如下:  .exhibition_list img{width:100%;position: relative;t ...

  6. F2工作流引擎参与者类型成员的交、并、互拆计算规则

          计算描述:计算规则指的是和其它“参与者类型成员”的之间的计算,必须求解处理人不为空的情况下才进行规则计算,各个“参与者类型成员”按序号顺序执行. 计算算法:并集(权重最低),交集(权重中) ...

  7. mysql5.7碰到的坑

    日志输出时区问题 输出日志有这些信息2016-08-16T02:23:09.831827Z 112241 [Note] Aborted connection 112241 to db: 'test' ...

  8. Microsoft Help Viewer

    Microsoft Help Viewer 1.0 Microsoft Help Viewer 2.0 Help Library 管理器 -Microsoft Help 查看器 打开VS 2010   ...

  9. java 事件处理机制：按下上下左右键控制小球的运动

    /** * 加深对事件处理机制的理解 * 通过上下左右键来控制一个小球的位置 */package com.test3;import java.awt.*;import javax.swing.*;im ...

  10. jquery_datatables

    环境准备 1.dataTables 下载:http://download.csdn.net/detail/marskuroky/8173839 2.jsonObject 下载:http://downl ...