首頁 web前端 html教學 CSS3实战开发:手把手教你照片墙实战开发_html/css_WEB-ITnose

CSS3实战开发:手把手教你照片墙实战开发_html/css_WEB-ITnose

Jun 24, 2016 pm 12:00 PM
css3 實戰 開發 教你 照片

《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方法的参数如果是正数,则表示顺时针旋转;如果是负数,则表示逆时针旋转。

语法讲解完了,我现在手把手教大家开发一个照片墙,效果如下:

ok,根据效果图,我们拆分一下显示区域:一个区域显示木板背景,三个区域显示相应照片。下面就跟着我的一步步的学习吧:

一、 定义显示区域

!DOCTYPE html><html><head>     <meta charset=”utf-8″>        <link href=”styles.css” rel=”stylesheet”>        <!? css,css3,html,html5,javascript,div,jquery,nodejs,extjs,bootstrap,pure ?>          <title>CSS3 2D转换技术之rotate实战开发</title>    </head> <body>  <a href="http://www.itdriver.cn">实战互联网</a>        <div>         <div>             <img  src=”http://pic1.win4000.com/wallpaper/a/53900aafbf5d6.jpg”    style="max-width:90%"CSS3实战开发:手把手教你照片墙实战开发_html/css_WEB-ITnose" >                <p>那一刻,我在这儿感受世外桃源的安逸</p>                <p>作者: 陌上花会开</p>            </div>            <div>             <img  src=”http://image.tianjimedia.com/uploadImages/2013/259/8XYI3I1E88WN_1000x500.jpg”    style="max-width:90%"CSS3实战开发:手把手教你照片墙实战开发_html/css_WEB-ITnose" >                <p>喜欢你的微笑,喜欢阳光下的味道</p>                <p>作者: 陌上花会开</p>            </div>            <div>             <img  src=”http://image.tianjimedia.com/uploadImages/2013/308/N8457O6CJS7W_1000x500.jpg”    style="max-width:90%"CSS3实战开发:手把手教你照片墙实战开发_html/css_WEB-ITnose" >                <p>漫山的葵花盛开了</p>                <p>作者: 陌上花会开</p>            </div>        </div>            </body></html>
登入後複製

此时运行效果:

二、给照片墙实现样式 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;}
登入後複製

此时运行效果:

三、给照片应用样式 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; /*设置照片内显示文字段落的外上边距*/}
登入後複製

此时的运行效果:

到目前为止,照片的基本样子已经出来了,接着应用我们今天所学的内容,给照片添加旋转效果吧,这样将使照片更富层次感,且更加个性化。

四、分别给照片应用样式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);}
登入後複製

此时的运行效果:

 

 

至此, 《CSS3实战开发:手把手教你照片墙实战开发》已经讲完了。谢谢大家的阅读。

更多精彩实战教程,我会陆续更新,大家敬请期待吧!

 

欢迎大家加入互联网技术交流QQ群:62329335 

个人申明:所分享博文,绝对原创,并力争每一个知识点都通过实战演示来进行验证。

 

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何在Windows 11中按收藏夾對照片進行排序 如何在Windows 11中按收藏夾對照片進行排序 Mar 18, 2024 am 09:37 AM

如何在Windows 11中按收藏夾對照片進行排序

如何在iPhone上停用隱藏和最近刪除的照片的Face ID或Touch ID 如何在iPhone上停用隱藏和最近刪除的照片的Face ID或Touch ID Mar 04, 2024 pm 04:40 PM

如何在iPhone上停用隱藏和最近刪除的照片的Face ID或Touch ID

iPhone 「照片」應用程式出現「無法上傳」提示該怎麼辦? iPhone 「照片」應用程式出現「無法上傳」提示該怎麼辦? Feb 28, 2024 pm 09:00 PM

iPhone 「照片」應用程式出現「無法上傳」提示該怎麼辦?

四款值得推薦的AI輔助程式工具 四款值得推薦的AI輔助程式工具 Apr 22, 2024 pm 05:34 PM

四款值得推薦的AI輔助程式工具

美圖相機怎麼把照片弄成黑白 美圖相機怎麼把照片弄成黑白 Mar 28, 2024 am 09:11 AM

美圖相機怎麼把照片弄成黑白

打開抖音相簿找不到手機裡的照片怎麼辦?抖音相簿不顯示照片的原因是什麼? 打開抖音相簿找不到手機裡的照片怎麼辦?抖音相簿不顯示照片的原因是什麼? Mar 21, 2024 pm 05:20 PM

打開抖音相簿找不到手機裡的照片怎麼辦?抖音相簿不顯示照片的原因是什麼?

AI程式設計師哪家強?探索Devin、通靈靈碼和SWE-agent的潛力 AI程式設計師哪家強?探索Devin、通靈靈碼和SWE-agent的潛力 Apr 07, 2024 am 09:10 AM

AI程式設計師哪家強?探索Devin、通靈靈碼和SWE-agent的潛力

學習如何利用Go語言開發行動應用程式 學習如何利用Go語言開發行動應用程式 Mar 28, 2024 pm 10:00 PM

學習如何利用Go語言開發行動應用程式

See all articles