代码：

<!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. Java多线程总结之线程安全队列Queue

    在Java多线程应用中,队列的使用率很高,多数生产消费模型的首选数据结构就是队列.Java提供的线程安全的Queue可以分为阻塞队列和非阻塞队列,其中阻塞队列的典型例子是BlockingQueue,非 ...

  2. Oracle Data Guard的配置

    概述 Oracle Data Guard 是针对企业数据库的最有效和最全面的数据可用性.数据保护和灾难恢复解决方案.它提供管理.监视和自动化软件基础架构来创建和维护一个或多个同步备用数据库,从而保护数 ...

  3. BIOS MCSDK 2.0 学习笔记（二）————使用Platform Library创建工程

    [TOC] Platform Library提供了一组适用于开发板的API函数.我们可以使用它来快速入手开发板. 1.启动CCS,建立一个空的工程 2.添加include路径 "C:\Pro ...

  4. Android实现帧动画，以及出场时的动画

    最近有个小需求,在数据上传的时候加一个上传的动画,然后就寻思着自己写一个帧动画 上传开始的时候调用动画,上传结束通知容器将其删除(这个方法应该不会太耗内存),然后吐槽下gif图片还是我自己一帧一帧从p ...

  5. 命令行导入mysql数据

    找到mysql安装目录(bin) 进入mysql mysql -u root -p 123 选中数据库 use 数据库名 导入sql  source sql数据库路径

  6. Centos下Yum安装PHP5.5,5.6,7.0

    默认的版本太低了,手动安装有一些麻烦,想采用Yum安装的可以使用下面的方案: 1.检查当前安装的PHP包 yum list installed | grep php 如果有安装的PHP包,先删除他们 ...

  7. centos 6.5重置Root密码

    按任意键进入菜单界面 在开始引导的时候,进入开机启动界面(如下图) 然后按一下键盘上面的"e" 3.进入如下图界面,我这边选择第二个按下键盘上的"e"键.(不同 ...

  8. Linux启动盘-ultraiso

    感觉windos和linux安装系统的启动盘不一样 其实我也不太懂. windos的时候我是用老毛桃  然后安装linux我就选择了ultraios作为启动盘 一: 先在百度下载 ultraios 二 ...

  9. flume坑之channel.transactionCapacity和HdfsSink.batchSize

    不说过程了,直接说结果!一对相连接的channel-HdfsSink,无意间配置如下:...agent.channels.common-channel.transactionCapacity=10.. ...

  10. 深度学习（DNN）的学习网站

    近期决定对深度学习稍微学习一下,因此搜集了一些相关的网站和资料,特分享给大家. 首先,如果你对机器学习还不甚了解,最好先了解一下其相关的概念,推荐 Andrew Ng在斯坦福的机器学习教程 (中文翻译 ...