字号: - o +

用CSS3的transform属性实现超酷美女图片墙

2012-11-13 前端开发 9人评论 17,012次浏览   

子曰:能为别人设想的人,永远不寂寞 o(∩_∩)o
WopusIDC优惠码:W3Cshare, 点击获取, 或者提交订单时手动输入

先看一下,最终的实现效果吧~

点此查看实例展示

实现非常简单,就分两步:

第一步:用js函数控制图片的显示,我这里一共用了10张图片,数量根据自己的需要而定

<div class="box">
<h1 class="title">用CSS3的transform属性实现超酷美女图片墙</h1>
<div id="box">
<script type="text/javascript">
var box = document.getElementById("box");
var pics = "";
for(var i=1; i<=10; i+=1){
var random_width = 100+ 106*Math.random();
pics += '<a href="http://w3cshare.com/" class="pic pic'+i+'"><img style="min-height:75px;" width="'+random_width+'" src="http://w3cshare.com/wp-content/uploads/2012/11/mm/mm'+i+'.jpg" />美女'+i+'</a>';
}
box.innerHTML = pics;
</script>
</div>
</div>

第二步:CSS3样式,这里主要用到transform属性

.box{width:960px; height:450px; margin:60px auto 0; font-size:0.75em; position:relative;}
.title{position:absolute; padding:15px 40px; font-size:2em; border:1px solid #bbbbbb; background:white; -webkit-box-shadow:4px 4px 3px rgba(50, 50, 50, 0.4); -moz-box-shadow:4px 4px 3px rgba(50, 50, 50, 0.4); box-shadow:4px 4px 3px rgba(50, 50, 50, 0.4); left:330px; top:100px; z-index:2;}
.pic{display:block; padding:10px 10px 15px; text-align:center; background:white; border:1px solid #bfbfbf; -webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -webkit-transition:all 0.5s ease-in; position:absolute; z-index:1;}
.pic img{display:block; margin-bottom:10px; border:0;}
.pic:hover,.pic:focus,.pic:active{border-color:#9a9a9a; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); transform:rotate(0deg); z-index:2;}
.pic1{bottom: 10px; right: 365px; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); transform: rotate(10deg);}
.pic2{top: 50px; right: 20px; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); transform: rotate(-4deg);}
.pic3{left: 400px; top: 0; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); transform: rotate(-5deg);}
.pic4{top: 10px; left: 495px; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); transform: rotate(-20deg);}
.pic5{bottom: 0; right: 0; -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); transform: rotate(1deg);}
.pic6{bottom: 10px; right: 156px; -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); transform: rotate(6deg);}
.pic7{bottom:0; left:400px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg);}
.pic8{bottom: -20px; left: 700px; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); transform: rotate(-8deg);}
.pic9{bottom: 0; left: 0; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); transform: rotate(-8deg);}
.pic10{top: 0; left: 20px; -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); transform: rotate(8deg);}

图片的位置你可以自行调整…

点此查看实例展示

本文作者:两千年的孤寂

2014年的目标:1、入手kp2,多看几本书。2、至少旅游一次。3、带公司走上正轨。少说话,多做事!我不是最好的,但我要做最努力的...... 本站主题交流群:465295619,不闲聊!以后你会知道它的重要性!你懂的~

继续查看有关 的文章

本文密切相关的文章

网友评论5条 ,博主回复4

  1. 拿去了~做新年贺卡~

    DickWu01-30 19:45 回复
  2. :mrgreen: 来试试,嘿嘿……

    屯田01-14 11:21 回复
  3. 标题里面着重的都是美女这两个字啊、

    花七七12-12 09:54 回复
  4. css3果然很强大

    IT自习室11-13 11:42 回复
    • 嗯,光一个属性都能实现很多功能,如果再加上html5,效果会更炫~

发表我的评论

*

*

取消