您的位置：首页 > Web前端 > CSS

我的前端学习笔记 css3 gradient,transform,transition ,弹性盒子

2015-08-01 19:25 716 查看

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">去公司以后每天都很忙很久没打理博客了，希望接下来能够整理一下之前学习到的知识。</span>
先简单回顾下css3一些新的特性吧，以chrome为例

渐变色 gradient

线性渐变语法：background:-webkit-linear-gradient(left,#66CCFF,green);

效果如图，实现从左到右从天依蓝到绿色的渐变。如果把参数left改成top left之类的则会从左上角到右下角实现渐变。

除此以外常用的还有从中心发散的渐变（语法 background: -webkit-radial-gradient(red, #66ccff, green);）

多色重复线性渐变（语法： background: -webkit-repeating-linear-gradient(top left -45deg, #ace, #ace 5px, #f96 5px, #f96 10px);）

2D转化transform

沿着x轴和y轴移动： -webkit-transform: translate(50px,100px);

顺时针旋转： -webkit-transform: rotate(30deg);

放大缩小： -webkit-transform: scale(1,2);

效果如图：

简单的过渡动画 transition

语法：-webkit-transition: width 2s;

可以实现点击的时候实现向左边伸长之类的效果

这只是几个简单的demo，还需要深入学习和应用才能融会贯通。

弹性盒子

这是css3非常强大的新布局方式，也是移动端开发的利器

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
display: -webkit-box;
-webkit-box-orient:horizontal;
width:1000px;
height:100px;
background-color: blue;
/* -webkit-box-direction: reverse; 反转*/

}
#box1{
-webkit-box-flex:1;
background-color: red;

}
#box2{
-webkit-box-flex:1;
background-color: green;
}
#box3{
-webkit-box-flex:1;
background-color: black;
}
</style>
</head>
<body>
<div id="box">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
</body>
</html>如代码片段所示，给父元素一个display-box之后，给子元素不同的flex比可以实现子元素之间的自动比例分配而不用我们再去测量各种值。比如这边给的是1比1比1，于是就是三等分。效果如图所示

如果想要垂直排布，只要给父元素加上

-webkit-box-orient:horizontal;还可以反转元素布局
这边额外要提到的是，如果子元素一个给了flex1一个没有给的话。那个给了flex1的元素会占满整个空间，没给的div只会保存自身原有的大小。这在开发中非常有用。

比如实现两个子div左右排布

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航