CSS3变换入门（2）

作者：神飞　来源：前端观察　发布时间：2010-01-30 13:29:00　

标签：css3,变换,入门,dhtml

首先，一些变换的想法

CSS变换将不会替代所有的DHTML，不过它会提供一些支持过渡的方法来提高您在浏览器中的设计。

你需要到下载Apple Safari 3+ 或Google Chrome浏览器来查看这些变换效果。这两个浏览器都支持Mac和PC系统。

滚动效果

变换最常见的用法就是当用户的鼠标悬放到元素上的时候将元素高亮(无论是链接、表格、表单还是其它的什么元素)，变换是为页面添加平滑的界面的非常棒的方法。

运行代码框
<!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>动画</h3> <p>你可以在页面上的两点之间移动一个对象，然后使用变换给它添加动画效果。</p> <div id="example3" class="example"> <div class="move"> <p><strong>例三</strong></p> <p class="control" style="color: rgb(255, 255, 255);">点击一下，不要放开!</p> <div id="astro"><img src="https://img.aspxhome.com/fileimg/2010/01/7373/astro-127531.png" alt=""></div> </p></div> </div> <div></body> </HTML>

变换、状态与动作

但是请稍等一下。在深入了解变换之前，我们需要理解一个元素能变换的不同的状态。

状态定义当前页面中相应的元素如何与用户进行交互，它们在CSS中通过伪类来定义，比如当用户的鼠标经过一个元素的时候，那个元素就会被hover伪类控制。

动态伪类	起作用的元素	描述
:link	只有链接	未访问的链接
:visited	只有链接	访问过的链接
:hover	所有元素	鼠标经过元素
:active	所有元素	鼠标点击元素
:focus	所有可被选中的元素	元素被选中
None	所有元素	所有元素的默认状态

变换通过改变不同元素状态之间的一个时间段内的样式来起作用。比如，一个元素的默认状态的颜色值将会在呈现hover状态的色彩值之前逐渐显示色盘中的中间颜色。

第一页上一页 1

3 4 5 下一页

投稿

CSS3变换入门（2）

滚动效果

猜你喜欢