国产一区二区三区不卡免费观看,h片在线,无码国产精品一区二区高潮

　CSS3變換入門

作者：vocal　時(shí)間： 2010-01-29　文檔類型：翻譯　來自：前端觀察

第 1 頁 CSS3變換入門 [1]
第 2 頁 CSS3變換入門 [2]
第 3 頁 CSS3變換入門 [3]
第 4 頁 CSS3變換入門 [4]
第 5 頁 CSS3變換入門 [5]

首先，一些變換的想法

CSS變換將不會替代所有的DHTML，不過它會提供一些支持過渡的方法來提高您在瀏覽器中的設(shè)計(jì)。

你需要到下載Apple Safari 3+ 或Google Chrome瀏覽器來查看這些變換效果。這兩個(gè)瀏覽器都支持Mac和PC系統(tǒng)。

滾動(dòng)效果

變換最常見的用法就是當(dāng)用戶的鼠標(biāo)懸放到元素上的時(shí)候?qū)⒃馗吡?無論是鏈接、表格、表單還是其它的什么元素)，變換是為頁面添加平滑的界面的非常棒的方法。

運(yùn)行代碼框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <style type="text/css"> body{font-size:12px;} .example { position: relative; padding: 1em; margin: 1em 0;} .example li a { text-decoration: none;} .example h4 {color: rgb(102,102,102); margin: 0;} #example1 p { text-align: left; } #example1 a:link { font-size: 3em; color: blue; background-color: rgb(255,255,255); -webkit-transition: color .5s linear, background-color .5s linear; transition: color .5s linear, background-color .5s linear; } #example1 a:hover { color: red; background-color: rgb(255,204,255); -webkit-transition: color .5s linear, background-color .5s linear; transition: color .5s linear, background-color .5s linear; } #example1 a:active { color: green; -webkit-transition: color .5s linear; transition: color .5s linear; } #example2 { height:200px; } #example2 a:link { color: blue; text-decoration: none; -webkit-transition: color .25s ease-in 0s; transition: color .25s ease-out 0s; } #example2 a:hover { color: red; -webkit-transition: color .25s ease-in .1s; transition: color .25s ease-out .1s; } #example2 a:active { color: green; transition: color .25s ease; } #example2 ul { list-style: none; margin: 0; padding: 0; } #example2 .menu { display: block; position: relative; top: .9em; left: 0; padding: 10px; height: auto; width: 100px; border: 8px solid rgba(204,204,204,.5); cursor: pointer; background-color: rgba(255,255,255,.75); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #example2 ul.menu li { font-weight: normal; list-style: none; margin:0 } #example2 ul.menu li a:link { font-weight: normal; list-style: none; font-size: 12px; margin-left: 0; padding-left: 0; } #example2 ul.menu ul li { font-weight: normal; padding: 5px 0; margin:0; border-top: 1px solid rgb(204,204,204); background-color: rgb(255,255,255); -webkit-transition: background-color .5s ease; transition: background-color .2s ease; } #example2 .drop { display: block; position: relative; height: 0; overflow: hidden; width: 100px; opacity: 0; -webkit-transition: opacity .25s linear 0s, height .25s ease-out .1s; transition: opacity .25s linear 0s, height .25s ease-out .1s; } #example2 ul.menu ul li:hover { background-color: rgb(234,234,234); -webkit-transition: background-color .5s ease; transition: background-color .2s ease; } #example2 ul.menu:hover>.drop { height: 140px; opacity: 1; -webkit-transition: opacity .25s linear 0s, height .25s linear 0s; transition: opacity .25s linear 0s, height .25s linear 0s; } #example3 { background-color: black; color: white; } #example3 .control { text-align: center; font-size: 3em; } #example3 .move { cursor: pointer;} #example3 .move>#astro { position: relative; top: 0; left: 250px; -webkit-transition: top 2s ease-in-out, left 2s ease; transition: top 2s ease-in-out, left 2s ease; } #example3 .move:active>#astro { top: 10px; left: 10px; -webkit-transition: top 2s ease-in-out, left 2s ease; transition: top 2s ease-in-out, left 2s ease; } </style> <div style="width:500px;"> <div id="example1" class="example"> <p><a href="#">Link</a></p> </div> <p><strong>例二</strong></p> <div id="example2" class="example"> <ul class="menu"> <li>About Us</li> <ul class="drop"> <li><a href="#">Our Team</a></li> <li><a href="#">News</a></li> <li><a href="#">Reviews</a></li> <li><a href="#">Contact</a></li> </ul> </ul> </div> <h3>動(dòng)畫</h3> <p>你可以在頁面上的兩點(diǎn)之間移動(dòng)一個(gè)對象，然后使用變換給它添加動(dòng)畫效果。</p> <div id="example3" class="example"> <div class="move"> <p><strong>例三</strong></p> <p class="control" style="color: rgb(255, 255, 255);">點(diǎn)擊一下，不要放開!</p> <div id="astro"><img src="/articleimg/2010/01/7373/astro-127531.png" alt=""></div> </p></div> </div> <div> </body> </HTML>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

變換、狀態(tài)與動(dòng)作

但是請稍等一下。在深入了解變換之前，我們需要理解一個(gè)元素能變換的不同的狀態(tài)。

狀態(tài)定義當(dāng)前頁面中相應(yīng)的元素如何與用戶進(jìn)行交互，它們在CSS中通過偽類來定義，比如當(dāng)用戶的鼠標(biāo)經(jīng)過一個(gè)元素的時(shí)候，那個(gè)元素就會被hover偽類控制。

動(dòng)態(tài)偽類 起作用的元素 描述

:link 只有鏈接未訪問的鏈接

:visited 只有鏈接訪問過的鏈接

:hover 所有元素鼠標(biāo)經(jīng)過元素

:active 所有元素鼠標(biāo)點(diǎn)擊元素

:focus 所有可被選中的元素元素被選中

None 所有元素所有元素的默認(rèn)狀態(tài)

變換通過改變不同元素狀態(tài)之間的一個(gè)時(shí)間段內(nèi)的樣式來起作用。比如，一個(gè)元素的默認(rèn)狀態(tài)的顏色值將會在呈現(xiàn)hover狀態(tài)的色彩值之前逐漸顯示色盤中的中間顏色。

出處：前端觀察
責(zé)任編輯：bluehearts

上一頁 CSS3變換入門 [1] 下一頁 CSS3變換入門 [3]

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。

相關(guān)文章

更多相關(guān)鏈接

47個(gè)驚人的CSS3動(dòng)畫演示

CSS3+HTML5 實(shí)現(xiàn)未來Web設(shè)計(jì)

玩轉(zhuǎn)CSS3色彩

你需要知道的CSS3動(dòng)畫技術(shù)

揭秘HTML5和CSS3

作者文章

更多作者文章

47個(gè)驚人的CSS3動(dòng)畫演示

讓IE6更快的走向滅亡

在IE中使用高級CSS3選擇器

玩轉(zhuǎn)CSS3色彩

你需要知道的CSS3動(dòng)畫技術(shù)


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計(jì)比賽網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點(diǎn)最新

站點(diǎn)最新列表

周大�！熬�•自然”設(shè)計(jì)大賽開啟

國際體驗(yàn)設(shè)計(jì)大會7月將在京舉行

中國國防科技信息中心標(biāo)志征集

云計(jì)算如何讓安全問題可控

云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽

欄目最新

欄目最新列表

淺談JavaScript編程語言的編碼規(guī)范

如何在illustrator中繪制臺歷

Ps簡單繪制一個(gè)可愛的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡單的作品展示頁面

CSS定位機(jī)制之一:普通流

25個(gè)最佳最閃亮的Eclipse開發(fā)項(xiàng)目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

滾動(dòng)效果