CSS3实战开发:手把手教你照片墙实战开发

当前位置 : 首页 > 网页制作 > CSS > CSS3实战开发:手把手教你照片墙实战开发

CSS3实战开发:手把手教你照片墙实战开发

来源: 作者: 时间:2016-01-23 10:51
在《CSS3 2D转换技术之translate实战开发》文章中,我给大家列出了CSS3中的2D转换方法:1 translate() 2 rotate() 3 scale() 4 skew() 5 matrix()同时对第一个方法 translate()做了非
在《CSS3 2D转换技术之translate实战开发》文章中,我给大家列出了CSS3中的2D转换方法:
1.    translate() 2.    rotate() 3.    scale() 4.    skew() 5.    matrix()
同时对第一个方法 translate()做了非常详尽的介绍,并带领大家实战开发了一个导航条。如果你对translate不了解或不是太熟悉,请我的博文 《CSS3 2D转换技术之translate实战开发》 。
在讲解知识点之前,我先跟大家说明一下,有些程序员会问,为什么我应用了transform后不起作用呢,其实CSS3中的transform是对块级元素或者行内元素才起作用的。
 
本章我将带领大家一起来探索今天的照片墙实战开发吧。好了,废话少说,直接进入今天的主题吧。
rotate,顾名思义,是表示旋转的意思,也就是说,如果我们给一个块元素或一个行内元素应用了rotate之后,它会发生旋转的效果。
 
语法:
 
-webkit-transform: rotate(20deg); /*兼容chrome与safari*/
-moz-transform: rotate(20deg); /*兼容firefox*/
-o-transform: rotate(20deg); /*兼容opera*/
-ms-transform: rotate(20deg); /*兼容IE9*/
transform: rotate(20deg); /*标准语法*/
 
 
 
rotate方法的参数如果是正数,则表示顺时针旋转;如果是负数,则表示逆时针旋转。
 
语法讲解完了,我现在手把手教大家开发一个照片墙,效果如下:
20140806122701
 
ok,根据效果图,我们拆分一下显示区域:一个区域显示木板背景,三个区域显示相应照片。下面就跟着我的一步步的学习吧:
 
一、 定义显示区域
复制代码
!DOCTYPE >
<html>
<head>
     <meta charset=”utf-8″>
        <link href=”styles.css” rel=”stylesheet”>
        <!– css,css3,html,html5,javascript,div,jquery,nodejs,extjs,bootstrap,pure –>
  
        <title>3 2D转换技术之rotate实战开发</title>
    </head>
 
<body>
  <a href="http://www.itdriver.cn">实战互联网</a>
        <div>
         <div>
             <img src=http://www.2cto.com/uploadfile/2014/0807/20140807093225406.jpg” width=”256″ height=”200″>
                <p>那一刻,我在这儿感受世外桃源的安逸</p>
                <p>作者: 陌上花会开</p>
            </div>
            <div>
             <img src=http://www.2cto.com/uploadfile/2014/0807/20140807093225298.jpg” width=”256″ height=”200″>
                <p>喜欢你的微笑,喜欢阳光下的味道</p>
                <p>作者: 陌上花会开</p>
            </div>
            <div>
             <img src=http://www.2cto.com/uploadfile/2014/0807/20140807093225479.jpg” width=”256″ height=”200″>
                <p>漫山的葵花盛开了</p>
                <p>作者: 陌上花会开</p>
            </div>
        </div>
        
    </body>
</html>
复制代码
 
此时运行效果:
20140806122702
 
二、给照片墙实现样式photo_wall,应用背景图片,设置照片墙的外边距,同时设置使用CSS3的流式布局来显示照片墙上的照片。如果你对CSS3的流式布局不太了解或不太熟悉,请阅读我的另一篇博文,相信你会精通这个特性《CSS3实战开发: 弹性盒模型之响应式WEB界面设计》。
 
复制代码
*{ /*清空所有元素默认的外边距和内边距*/
margin:0;
padding:0;
}
 
.photo_wall{
background:url(bg.jpg); /*定义照片墙的默认背景*/
background-size:cover; /*使照片墙的背景填充照片墙*/
 
width:1200px; /*设置照片墙的宽高*/
height:800px;
 
margin:40px auto; /*设置照片墙的外边距*/
 
display:-webkit-box; /*使用CSS3的盒模型之流式布局*/
display:-moz-box;
display:box;
 
-webkit-box-align:center; /*定义盒模型内部元素在垂直方向上居于中间位置*/
-moz-box-align:center;
box-align:center;
 
-webkit-box-pack:center; /*定义盒模型内部元素在水平方向上居于中间位置*/
-moz-box-pack:center;
box-pack:center;
}
复制代码
 
 
 此时运行效果:
20140806122703
 
 
三、给照片应用样式photo_frame,设置照片的留白,同时这只照片内文字的大小,以及给照片增加阴影效果。
复制代码
.photo_wall .photo_frame{
text-align:center; /*照片内的文字都是居中显示*/
 
padding:10px 10px 30px 10px; /*定义照片的内补白*/
 
/*设置照片的背景颜色*/
font-size:.8em; /*照片内文字的大小*/
 
box-shadow:.2em .2em .8em #130c0e; /*给照片添加阴影效果,富有立体感*/
}
 
.photo_frame p{
margin-top:10px; /*设置照片内显示文字段落的外上边距*/
}
复制代码
 
 
此时的运行效果:
20140806122704
 
 
 
到目前为止,照片的基本样子已经出来了,接着应用我们今天所学的内容,给照片添加旋转效果吧,这样将使照片更富层次感,且更加个性化。
 
四、分别给照片应用样式photo01,photo02,photo03,每张照片以自己设定的旋转基点进行旋转操作。代码如下:
 
复制代码
.photo01{
-webkit-transform-origin:right bottom; /*定义照片1的旋转基点为 右下角*/
-moz-transform-origin:right bottom;
transform-origin:right bottom;
 
-webkit-transform:rotate(10deg); /*以基点为轴,在2D空间内顺时针旋转10度*/
-moz-transform:rotate(10deg);
-o-transform:rotate(10deg);
transform:rotate(10deg);
}
 
.photo02{
-webkit-transform-origin:right bottom; /*定义照片2的旋转基点为 右下角*/
-moz-transform-origin:right bottom;
transform-origin:right bottom;
 
-webkit-transform:rotate(-20deg); /*以基点为轴,在2D空间内逆时针旋转20度*/
-moz-transform:rotate(-20deg);
-o-transform:rotate(-20deg);
transform:rotate(-20deg);
}
 
.photo03{
-webkit-transform-origin:left top; /*定义照片3的旋转基点为 左上角*/
-moz-transform-origin:left top;
transform-origin:left top;
 
-webkit-transform:rotate(40deg); /*以基点为轴,在2D空间内顺时针旋转40度*/
-moz-transform:rotate(40deg);
-o-transform:rotate(40deg);
transform:rotate(40deg);
}
Tag:
网友评论

<