代码：

<!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. asp 使用TreeView控件

    这段代码为了使用 TreeNodeCheckChanged 事件,会有回刷新的效果: 不喜欢的可查看改进版,利用js控制选择操作,无界面刷新, “http://www.cnblogs.com/GoCi ...

  2. iOS开发 滤镜的使用

    iOS开发之滤镜的使用技巧(CoreImage)   一.滤镜的内容和效果是比较多并且复杂的 ,学习滤镜需要技巧 如下: 两个输出语句解决滤镜的属性选择问题: 1.查询效果分类中包含什么效果按住com ...

  3. Python学习---除法

    python有两种除法,普通除法 a/b ,不论a,b精度 得到的都是浮点数. 4/2 = 2.0    3/5 = 0.6 floor除法,a//b , 得到一个舍弃小数位的整数结果,所以结果永远是 ...

  4. int(3)和int(10)的区别

    int(M) 在 integer 数据类型中,M 表示最大显示宽度.在 int(M) 中,M 的值跟 int(M) 所占多少存储空间并无任何关系. int(3).int(4).int(8) 在磁盘上都 ...

  5. message from server: "Host 'XXX' is not allowed to connect to this MySQL server

    Access denied for user 'root'@'XXXXX' (using password: YES) mysql命令不正确造成: grant all privileges on *. ...

  6. SQL SERVER 分区

    “索引要与其基表对齐,并不需要与基表参与相同的命名分区函数.但是,索引和基表的分区函数在实质上必须相同,即: 1) 分区函数的参数具有相同的数据类型: 2) 分区函数定义了相同数目的分区: 3) 分区 ...

  7. python3 密码生成器

    用random模块实现按照要求生成一定个数和一定位数的密码: #Author by Andy #_*_ coding:utf-8 _*_ import random checkcode='' code ...

  8. mac下使用sencha cmd＋extjs6

    笔者刚接手公司一个项目,后台是使用extjs6做前端,php做api接口,两者通过ajax交互 没办法,不管接手的项目多么的挫逼,都还是要上的,拿人钱财替人消灾嘛 首先是安装sencha cmd ,百 ...

  9. DataTable筛选出现异常

    异常详细信息: System.ArgumentException: 在 Range 对象中,Min (37)必须小于或等于 max (-1). 解决方法:转化字段类型为int 再次出现问题:HH> ...

  10. Linux Shell 学习总结

    1. -bash: ./dd.sh: /bin/bash^M: bad interpreter: 没有那个文件或目录 当出现上面这问题的时候,首先看你的.profile 里面是否配置对了,一般配置为: ...