效果图:
1.
2.
....
鼠标放在图片上,图片选择一定角度,放大,有阴影效果.
实现代码:
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css3照片墙</title> <link href="linkcss.css" type="text/css" rel="stylesheet"/> </head> <body> <h1>照片墙制作</h1> <div class="container"> <img class="pic1" src="imges/1.jpg" /> <img class="pic2" src="imges/2.jpg" /> <img class="pic3" src="imges/3.jpg" /> <img class="pic4" src="imges/4.jpg" /> <img class="pic5" src="imges/5.jpg" /> <img class="pic6" src="imges/6.jpg" /> <img class="pic7" src="imges/7.jpg" /> </div> </body> </html>
css:
body{background:#eee} h1{text-align:center} .container{width:960px;height:450px;margin:60px auto;position:relative} img{padding:10px 10px 15px;background:#fff;border:1px solid #ddd;position:absolute;transition:1s; z-index:1} img:hover{ transform:rotate(0deg); transform:scale(1.2); box-shadow:10px -10px 15px #ccc; z-index:2000; } .pic1{ top:20px;left:450px;transform:rotate(-25deg); } .pic2{ top:50px;left:10px;transform:rotate(30deg); } .pic3{ top:150px;left:150px;transform:rotate(40deg); } .pic4{ top:150px;left:550px;transform:rotate(25deg); } .pic5{ top:250px;left:10px;transform:rotate(-10deg); } .pic6{ top:250px;left:450px;transform:rotate(30deg); } .pic7{ top:250px;left:250px;transform:rotate(15deg); }
很好懂的.
补充:
我用的是谷歌浏览器,如果出现浏览器不兼容问题,可以试试在transform前加标识,比如-webkit,-moz的.
相关推荐
一个CSS3 照片墙效果,CSS3图片随机排列效果,无次序和随意的排列效果,但看上去很有艺术感的图片显示特效,怎么样,看上去挺不错吧。
一款基于HTML5 CSS3的瀑布流布局特效,相信瀑布流您已经很熟悉了,这两年流行的一种网页布局效果,它可以横向和垂直布局,本款代码貌似兼顾了两者,看上去更像是一个照片墙特效,点击任意一张小图片,会显示该图片的...
这是一个动态的照片墙网页,可以修改照片连接替换成自己的照片 这是一个动态的照片墙网页,可以修改照片连接替换成自己的照片 这是一个动态的照片墙网页,可以修改照片连接替换成自己的照片
JS+CSS=>超酷3D照片墙,不下不知道,下了想推荐!
CSS3效果不错的照片墙【图片墙】特效代码,类似代码有不少了,本款照片墙只是将图片按一定规律显示出来,并不支持鼠标点击图片后的预览效果,不具备图片放大功能,只是用来显示照片缩略图用的。
慢慢的靠近css3,制作一个简单的照片展示效果。
主要介绍了纯css3实现照片墙效果,鼠标悬浮时旋转放大并摆正,主要使用到的css3属性有:transition、transform(scale、rotateZ)、box-shadow以及z-index,推荐给小伙伴们
css 实现照片墙
html+css自制照片墙案例 web前端页面制作入门级案例
jQuery HTML5 CSS3绚丽变换组合是HTML5 CSS3 jQuery的图片组合照片墙。 jQuery HTML5 CSS3绚丽变换组合特效图:
一份送给女朋有爱心相册
主要为大家详细介绍了CSS3制作漂亮的照片墙的具体步骤,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
CSS3悬挂的照片墙效果代码是一款基于CSS3 transform 属性制作悬挂的照片墙效果代码。
JS+CSS=>超酷3D照片墙,不下不知道,下了想推荐!
HTML5+css3制作的超酷3D照片墙jQuery特效代码.rar 实现特炫照片墙及照片库
CSS3绚丽照片墙视频教程.txt 前端必备技能,助你快速掌握
NULL 博文链接:https://zlbcdn.iteye.com/blog/1866271
有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!
使用CSS3的2D旋转,过度,缩放功能实现图片的实现
主要介绍了纯css实现照片墙3D效果的示例代码,可以实现鼠标经过图片实现改变,具有一定的参考价值,感兴趣的小伙伴们可以参考一下