当前位置:首页 > 开发代码

CSS3中transition、transform区别

小强的家   发布时间:2019-04-22   
css属性很多,无论是字母的拼写还是字面上的意思,很多人都容易混淆,包括我在内,也时不时需要去看看到底是咋回事,是不是也混淆过你~
下面列举几个最容易混淆的属性:

属性    含义
transition(过渡)    用于设置元素的样式过度,和animation有着类似的效果,但细节上有很大的不同
transform(变形)    用于元素进行旋转、缩放、移动或倾斜,和设置样式的动画并没有什么关系,就相当于color一样用来设置元素的“外表”
下面详细介绍。

transition(过渡)
语法:transition: property duration timing-function delay;

property(设置过渡效果的 CSS 属性的名称)
duration(完成过渡效果需要多少秒或毫秒)
function(速度效果的速度曲线)
delay(过渡效果何时开始)
div {
  width: 100px;
  height: 100px;
  background: #ee1166;
  transition: width 2s;
  -moz-transition: width 2s;
  /* Firefox 4 */
  -webkit-transition: width 2s;
  /* Safari and Chrome */
  -o-transition: width 2s;
  /* Opera */
}
div:hover {
  width: 300px;
}


transform(变形)
语法:transform: none|transform-functions;
functions提供多种方法,如:skewX(angle)沿着 X 轴的 2D 倾斜转换,translate3d(x,y,z)3D 转换,rotate(angle)2D 旋转,在参数中规定角度等等

/**css*/
ul {
  margin: 20px 0 0 20px;
  padding: 0;
  list-style: none;
}
li {
  float: left;
  width: 100px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  margin-right: 4px;
  background: #ee1166;
  -webkit-transform: skewX(30deg);
}
a {
  text-decoration: none;
  -webkit-transform: skewX(-30deg);
  display: block;
  color: #fff;
}
li:hover{
  background: #008cf4;
}
/**html*/
<ul>
    <li><a href="#">Javan的博客</a></li>
    <li><a href="#">今日头条</a></li>
    <li><a href="#">慕课网</a></li>
    <li><a href="#">开源中国</a></li>
</ul>



 


相关文章:

CSS3中transition、transform区别评论(共有 0 条评论)

我要点评CSS3中transition、transform区别
用户名: 密码: (游客无需填写密码)

验证码: 看不清楚,点击刷新 (如果提示验证码过期,请点击验证码刷新。)
【提交后需要审核】