来谈谈：CSS3实例教程:transitions测试进修

只看该作者 · 发表于 2015-1-15 22:58:36

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

学习这篇入门教程之前，请确定你已经具有了一定的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:48

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-1-26 22:26:24

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

只看该作者 · 发表于 2015-2-5 04:54:27

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

只看该作者 · 发表于 2015-2-11 06:32:36

学Dreamweaver技术的过程其实是一个增加信心的过程。

仓酷云 · 发表于 2015-3-2 00:00:36

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

只看该作者 · 发表于 2015-3-11 03:27:16

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

只看该作者 · 发表于 2015-3-17 21:10:54

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

只看该作者 · 发表于 2015-3-25 06:42:48

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来谈谈：CSS3实例教程:transitions测试进修

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子