CSS3每日一练之动画属性-Transitions

最新推荐文章于 2024-07-24 14:20:14 发布

PrecisionSoft

最新推荐文章于 2024-07-24 14:20:14 发布

阅读量626

点赞数

分类专栏：手机浏览文章标签： css 前端开发 microsoft border transition web

手机浏览专栏收录该内容

8 篇文章 0 订阅

订阅专栏

来自：http://www.w3cfuns.com/thread-5592346-1-1.html

在CSS3中动画有两个属性，分别是Transitions和Animations。现在我们先来认识一下Transitions属性：

Transitions
　　此属性在不同浏览器下需要带有不通的前缀（例如-webkit-****），在这里便不再赘述；

　　它有三个参数，例如：

transitions: property duration timing-function ;

property：表示对那个属性进行动画设置，比如 background, color等（在后面的课程会列出可变换属性列表）；
　　 duration：表示在多长时间内完成动画，也就是动画执行事件，比如 1s表示1秒， 0.5s表示半秒；
　　 timing-function：表示执行什么种类的动画，也就是动画执行的计算种类，比如 linear渐变（在后面的课程同样也会列出动画执行的计算种类列表）

　　比如我们现在来实现一个段落p默认背景色是黑色，当鼠标悬停时渐变成红色，执行时间为1秒的动画：

p{ color:#fff; background:#000; -前缀-transition:background 1s linear; }

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之动画属性-Transitions[一]| 前端开发网(W3Cfuns.com)！</title>
<style type="text/css">
*{margin:0; padding:0;}
body{padding:25px 10px 0; font-size:14px; color:#333; font-family:"Microsoft Yahei";}
p
{
padding:0 10px;
line-height:24px;
color:#fff;
background:#000;
-webkit-transition:background 1s linear;
-moz-transition:background 1s linear;
-o-transition:background 1s linear;
-ms-transition:background 1s linear;
transition:background 1s linear;
}
p:hover{background:#f00;}
</style>
</head>
<body>
<p>中国第一Web前端开发门户,CSS学习网为其前身,提供庞大前端免费资源,教程,培训,Web前端论坛,为企业提供前端招聘,被誉为Web前端开发工程师最贴心的家！</p>
</body>
</html>

其实我们还有另外一种使用Transitions功能的方法，就是将其属性中的三个参数，property属性，duration属性和timing-function属性中的三个参数的含义及指定方法拆开实现，如下代码：

transition-property:background;
transition-duration:1s;
transition-timing-funcion:linear;

　　这节课比较简单，主要是告诉大家Transitions功能的拆开方法，其实在很多情况下，我们都会用的到拆开来实现的。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之动画属性-Transitions[二]| 前端开发网(W3Cfuns.com)！</title>
<style type="text/css">
*{margin:0; padding:0;}
body{padding:25px 10px 0; font-size:14px; color:#333; font-family:"Microsoft Yahei";}
p
{
padding:0 10px;
line-height:24px;
color:#fff;
background:#000;
-webkit-transition-property:background;
-webkit-transition-duration:1s;
-webkit-transition-timing-funcion:linear;
-moz-transition-property:background;
-moz-transition-duration:1s;
-moz-transition-timing-funcion:linear;
-o-transition-property:background;
-o-transition-duration:1s;
-o-transition-timing-funcion:linear;
-ms-transition-property:background;
-ms-transition-duration:1s;
-ms-transition-timing-funcion:linear;
transition-property:background;
transition-duration:1s;
transition-timing-funcion:linear;
}
p:hover{background:#f00;}
</style>
</head>
<body>
<p>中国第一Web前端开发门户,CSS学习网为其前身,提供庞大前端免费资源,教程,培训,Web前端论坛,为企业提供前端招聘,被誉为Web前端开发工程师最贴心的家！</p>
</body>
</html>

上面的都是浮云！！！！！！！！！！！！！

下面这个例子才是王道，很有flash当年的感觉！

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之动画属性-Transitions组合动画| 前端开发网(W3Cfuns.com)！</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:14px; color:#333; font-family:"Microsoft Yahei";}
#box
{
margin:-100px 0 0 -100px;
top:50%;
left:50%;
width:200px;
height:200px;
line-height:200px;
text-align:center;
border:5px #d1d1d1 solid;
border-radius:105px;
box-shadow:0 0 20px #666;
background:#eee;
overflow:hidden;
position:absolute;
/*动画部分开始*/
-webkit-transition:
margin 1s linear,
width 1s linear,
height 1s linear,
font-size 1s linear,
line-height 1s linear,
color 1s linear,
border 1s linear,
border-radius 1s linear,
background 1s linear,
box-shadow 1s linear,
-webkit-transform 1s linear;
-moz-transition:
margin 1s linear,
width 1s linear,
height 1s linear,
font-size 1s linear,
line-height 1s linear,
color 1s linear,
border 1s linear,
border-radius 1s linear,
background 1s linear,
box-shadow 1s linear,
-moz-transform 1s linear;
-o-transition:
margin 1s linear,
width 1s linear,
height 1s linear,
font-size 1s linear,
line-height 1s linear,
color 1s linear,
border 1s linear,
border-radius 1s linear,
background 1s linear,
box-shadow 1s linear,
-o-transform 1s linear;
/*动画部分结束*/
}
#box:hover
{
margin:-200px 0 0 -200px;
width:400px;
height:400px;
font-size:26px;
line-height:400px;
color:#fff;
border:5px #fff solid;
border-radius:210px;
background:#05a;
box-shadow:0 0 40px #900;
-webkit-transform:rotate(720deg);
-moz-transform:rotate(720deg);
-o-transform:rotate(720deg);
}
</style>
</head>
<body>
<div id="box">前端开发网(W3Cfuns.com)！</div>
</body>
</html>

PrecisionSoft

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3每日一练之动画属性-Transitions

来自：http://www.w3cfuns.com/thread-5592346-1-1.html在CSS3中动画有两个属性，分别是Transitions和Animations。现在我们先来认识一下Transitions属性：Transitions　　此属性在不同浏览器下需要带有不通的前缀（例如-webkit-****），在这里便不再赘述；　　它有三个参数，例如：
复制链接

扫一扫

专栏目录