仓酷云

标题: 来谈谈：CSS3实例教程:transitions测试进修 [打印本页]

作者: 因胸联盟 时间: 2015-1-15 22:58
标题: 来谈谈：CSS3实例教程:transitions测试进修
学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。
破洛洛文章简介：CSS3实例教程:transitions测试进修。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>transitons</title>
<styletype="text/css">
.transitions{
background:#000;
color:#fff;
width:500px;
line-hight:50px;
height:100px;
-moz-transition:background-color2slinear;
-o-transition:background-color2slinear;
-webkit-transition:background-color2slinear;}
.transitions:hover{
background:#f00;}
.test2{
background:#000;
color:#f00;
width:500px;
height:50px;
line-height:50px;
-webkit-transition-property:background-color;
-webkit-transition-duration:4s,1s;//利用最初一个值
-webkit-transition-timing-function:linear;

-moz-transition-property:background-color;
-moz-transition-duration:4s,1s;//利用第一个值
-moz-transition-timing-function:linear;

-o-transition-propery:background-color;
-o-transition-duration:5s,1s;//利用第一个值
-o-transition-timing-function:linear;

}
.test2:hover{
background-color:#fff;
}
.test3{
color:#f00;
background-color:#00F;
width:500px;
height:50px;
-o-transition:background-color2slinear,color2slinear,width2slinear,height2slinear;
-webkit-transition:background-color2slinear,color2slinear,width2slinear,height2slinear;
-moz-transition:background-color2slinear,color2slinear,width2slinear,height2slinear;
}
.test3:hover{
width:200px;
height:200px;
color:#000;
background-color:#f00;}
.test4{
padding:5px;
line-height:24px;
color:#f00;
background-color:#00F;
width:100%;
background-image:url(../huaban/img/default_pin_bg.gif);
-o-transition:background-color2slinear,color2slinear,width2slinear,height2slinear,background-image2slinear;
-webkit-transition:background-color2slinear,color2slinear,width2slinear,height2slinear,background-image2slinear;
-moz-transition:background-color2slinear,color2slinear,width2slinear,height2slinear,background-image2slinear;
}
.test4:hover{
width:400px;
color:#000;
background-color:#f00;
background-image:url(../huaban/img/login_or.png)}.test5img{
position:absolute;
top:500px;
left:0;
-webkit-transform:rotate(0deg);
-webkit-transition:left2slinear,-webkit-transform2slinear;
-moz-transform:rotate(0deg);
-moz-transition:left2slinear,-moz-transform2slinear;
-o-transform:rotate(0deg);
-o-transition:left2slinear,-o-transform2slinear;
}
.test5:hoverimg{
position:absolute;
left:100px;
-webkit-transform:rotate(720deg);
-moz-transform:rotate(720deg);
-o-transform:rotate(720deg);
}</style>
</head><body>
<divclass="transitions">
<h1>实行笔墨变色</h1>
mynameisWuQianqian
</div>
<divclass="test2">
<h1>实验笔墨底色变成底色相似变无的感到</h1>hello
</div>
<divclass="test3">
<h1>宽高度巨细的改动。完成缩放埋没效果，光滑突变</h1>howoldareyou</div>
<divclass="test4">
<h1>transition:propertydurationtiming-function背景图片的改动</h1>
<ol>
<li>propery：暗示对谁人属性举行光滑过渡的</li>
<li>duration：暗示光滑过渡的工夫</li>
<li>timing-function：暗示经由过程甚么办法举行光滑过渡</li></ol></div><divclass="test5">
<h1>图片的扭转转动效果，使用定位间隔的属性和扭转角度的属性</h1>
<imgsrc="../huaban/img/apple-touch-icon-iphone4.png"/></div>
</body>
</html>
</p>
你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。

作者: 灵魂腐蚀 时间: 2015-1-17 19:58
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 金色的骷髅 时间: 2015-1-26 22:26
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

作者: 冷月葬花魂 时间: 2015-2-5 04:54
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 小女巫 时间: 2015-2-11 06:32
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 仓酷云 时间: 2015-3-2 00:00
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

作者: 海妖 时间: 2015-3-11 03:27
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

作者: 山那边是海 时间: 2015-3-17 21:10
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 精灵巫婆 时间: 2015-3-25 06:42
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

欢迎光临仓酷云 (http://ckuyun.com/)