来谈谈：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>
你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。

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

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

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

相关帖子