css3中transform和transition的用法
2015-10-31 14:35
465 查看
这周在网站前台时了解到了css3的一些属性，其中就包括了我以前没太注意的css3的一些动画动作。也就是我在这里想要讲的transform和transtion这两个属性。
我先在下面贴一点w3cschool上的关于这两个属性的一些方法
这里是（transform）
（transition）也有一些属性，具体的可以在自己去百度。
下面我会写一个例子，比如这次我在做项目的时候再需求中有一个菱形的框，这点一度让我很为难。因为在之前的div和css学习中都是方方正正的图形。然后我去查看了一下百度上对于这个问题的解决放法。一开始也有告诉我由美工来做这种菱形框，但我试了之后可以使可以，但毕竟自己是编程的，所以去找了如何用代码实现这种功能。
transform
上面的方法我们应该都知道了，下面我会写一个菱形的功能。
这样就行成了一个菱形框。
当然还有许多方法都内置在里面的，我这里用到的主要是关于x轴的偏移。
有时候我们想要实现一个动画，比如说当鼠标经过是 我们某个div发生偏移。但是如果我们不加延迟时间的话，他的变换往往在一瞬间就结束了。 这是后我们就需要用到transition来进行延迟。
这里就实现了div宽度延长的动画
基本上差不多入门就这些，具体的方法还是要大家具体自己去试，去练，毕竟代码是自己写出来的
我先在下面贴一点w3cschool上的关于这两个属性的一些方法
这里是（transform）
（transition）也有一些属性，具体的可以在自己去百度。
下面我会写一个例子，比如这次我在做项目的时候再需求中有一个菱形的框，这点一度让我很为难。因为在之前的div和css学习中都是方方正正的图形。然后我去查看了一下百度上对于这个问题的解决放法。一开始也有告诉我由美工来做这种菱形框，但我试了之后可以使可以，但毕竟自己是编程的，所以去找了如何用代码实现这种功能。
transform
上面的方法我们应该都知道了，下面我会写一个菱形的功能。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.Demo{
width:100px;
height:100px;
background:#F00;
transform:skewX(30deg);
margin-left:100px;
}
</style>
</head>
<body>
<div class="Demo">
</div>
</body>
</html>这样就行成了一个菱形框。
当然还有许多方法都内置在里面的，我这里用到的主要是关于x轴的偏移。
有时候我们想要实现一个动画，比如说当鼠标经过是 我们某个div发生偏移。但是如果我们不加延迟时间的话，他的变换往往在一瞬间就结束了。 这是后我们就需要用到transition来进行延迟。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.Demo{
width:100px;
height:100px;
background:#F00;
transform:skewX(30deg);
width:100px;
height:100px;
transition:width 2s;
-moz-transition:wdith 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:all 2s; /* Opera */
margin-left:100px;
}
.Demo:hover{
width:400px;
}
</style>
</head>
<body>
<div class="Demo">
</div>
</body>
</html>这里就实现了div宽度延长的动画
基本上差不多入门就这些，具体的方法还是要大家具体自己去试，去练，毕竟代码是自己写出来的
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 