代码：

<!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. 关于xml配置实现AOP的小知识

    除了前面介绍的基于JDK1.5的注解方式来定义切面,切入点和增强处理外,Spring AOP也允许直接使用XML配置文件来管理它们.在JDK1.5之前,只能使用配置文件的方式来管理,在Spring2. ...

  2. Nginx中rewrite实现二级域名、三级域名、泛域名、路径的重写

    最常见的: 静态地址重定向到带参数的动态地址 rewrite "^(.*)/service/(.*)\.html$" $1/service.php?sid=$2 permanent ...

  3. git clone --early EOF

    出现这个问题可能需要重新检查以下方面: 1. Android studio Git 的安装地址:  ..../Git/cmd/git.exe 记得在环境变量 --Path 中进行配置: ,..../G ...

  4. linux工具apt、yum和dnf运用

      首先,说明一下我的环境:ubuntu16.04. 什么是APT: 高级包装工具(英语:Advanced Packaging Tools,简称:APT)是Debian及其衍生发行版(如:ubuntu ...

  5. C#获取全部目录和文件

    public class FileAccess{ //储存所有文件夹名 private ArrayList dirs; public FileAccess() { dirs = new ArrayLi ...

  6. 解决Gradle生成Eclipse支持后，发布到Tomcat丢失依赖jar包的问题

    最近一个项目中,使用号称下一代构建工具的Gradle构建项目. 使用中发现一个问题,Gradle从中央库下载的jar文件在系统的其它目录,使用gradle eclipse添加Eclipse支持时,ja ...

  7. hihoCoder挑战赛25

    萌新第一次打hihoCoder的比赛有点慌 T1 T1并不是特别难想到dp就好做了 显而易见的是一个01背包问题 Code: #include <cstdio> #include < ...

  8. 在代码设置RelativeLayout的属性，比如layout_below

    ( (RelativeLayout.LayoutParams)holder.ivLvDivider.getLayoutParams()).addRule(RelativeLayout.BELOW, R ...

  9. git常用功能

  10. JS实现 点击button(copy) 复制对应的网址——类似于复制推广链接

    <form action=""> <input type="text" class="share-input" value ...