css3中transform和transition的用法

最新推荐文章于 2023-11-22 16:42:30 发布

zyz0728

最新推荐文章于 2023-11-22 16:42:30 发布

阅读量2.2k

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/zyz0728/article/details/49532847

版权

css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这周在网站前台时了解到了css3的一些属性，其中就包括了我以前没太注意的css3的一些动画动作。也就是我在这里想要讲的transform和transtion这两个属性。

我先在下面贴一点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宽度延长的动画

基本上差不多入门就这些，具体的方法还是要大家具体自己去试，去练，毕竟代码是自己写出来的

zyz0728

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3中transform和transition的用法

这周在网站前台时了解到了css3的一些属性，其中就包括了我以前没太注意的css3的一些动画动作。也就是我在这里想要讲的transform和transtion这两个属性。我先在下面贴一点w3cschool上的关于这两个属性的一些方法这里是（transform）（transition）也有一些属性，具体的可以在自己去百度。下面我会写一个例子，比如这次我在做项目的
复制链接

扫一扫