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

最新推荐文章于 2022-05-29 16:14:54 发布

树海之光

最新推荐文章于 2022-05-29 16:14:54 发布

阅读量717

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/u012277202/article/details/47189203

版权

学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<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左右排布

树海之光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的前端学习笔记 css3 gradient,transform,transition ,弹性盒子

去公司以后每天都很忙很久没打理博客了，希望接下来能够整理一下之前学习到的知识。先简单回顾下css3一些新的特性吧，以chrome为例渐变色 gradient线性渐变语法：background:-webkit-linear-gradient(left,#66CCFF,green);效果如图，实现从左到右从天依蓝到绿色的渐变。如果把参数left改成top left之
复制链接

扫一扫