1.渐变
线性渐变
background: linear-gradient(red, blue); 默认从上到下 可多个颜色
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 到右 透明色渐变
background: linear-gradient(to bottom right, red , blue); 到右下
background: linear-gradient(180deg, red, blue); 角度方向
background: repeating-linear-gradient(red, yellow 10%, green 20%); 重复颜色渐变 累加共20%
径向渐变
background: radial-gradient(red, green, blue);
background: radial-gradient(red 5%, green 15%, blue 60%);
background: radial-gradient(circle, red, yellow, green); 园形
background: radial-gradient(60% 55%, closest-side/farthest- corner,blue,green,yellow,black); 尺寸
background: repeating-radial-gradient(red, yellow 10%, green 15%); 重复
<head> <style> .a{ width: 200px; height: 100px; background: repeating-linear-gradient(red, yellow 10%, green 20%); } .b{ width: 200px; height: 100px; background: repeating-radial-gradient(circle, red, yellow 10%, green 15%); } </style> </head> <body> <div class="a"></div> <div class="b"></div> </body>
2D
transform:rotate(60deg); 转动60度
transform: translate(100px,100px); 移动
transform: scale(2,3); 缩放倍数
transform: skew(20deg,30deg); 倾斜 X:20 Y:30 Y可不写
transform: skewX(20deg); 沿X轴y偏转20度 skewY：沿Y轴
transform:matrix(2,0.5,-0.5,0.866,0,0); x放大，倾斜，倾斜，y放大，x偏移，y偏移
3D
transform: rotateX(120deg);沿着X轴旋转 rotateY
<head> <style> div{ width:200px; height:100px; background-color:yellow; } .a{transform:rotate(45deg)} .b{transform: translate(150px,0px)} .c{transform: scale(0.5,0.5)} .d{transform: rotateX(89deg)} </style> </head> <body> <div class="a"></div> <div class="b"></div> <div class="c"></div> <div class="d"></div> </body>
过渡
transition:width 2s; 宽 变动 两秒
:hover{300px;} 光标 宽 变成300px
transition: width 2s, height 2s, transform 2s; 宽 高 转换
:hover{ 200px; height:200px; transform:rotate(180deg);} 宽变200 高变200 转动180度
动画
animation:myfirst 5s; 执行动画 5秒
@keyframes myfirst{from {background:red;}to {background:yellow;}} 动画：从红变成黄
@keyframes myfirst{0% {background:red;}100% {background:green;}} 动画展示进度百分比 对应颜色
@keyframes myfirst{0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;}} 进度 {颜色 位置}
position:relative; 相对定位（才能移动）
animation:myfirst 5s linear 2s infinite alternate; 执行动画 5秒 变动速度 开始时间 播放次数(无限) 逆向播放(交替)
@keyframes myfirst{0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;}} 进度 {颜色 位置}
多列
column-count: 3; 3列
column-gap: 40px; 列间距
<head> <meta charset="utf-8"> <title>无标题文档</title> <style> p{ column-count: 3; -webkit-column-count:3; /* Safari and Chrome */ column-gap: 40px; -webkit-column-gap:40px; /* Safari and Chrome */ } </style> </head> <body> <p>9月10日教师节这天，马云宣布将在一年后不再担任阿里巴巴董事局主席，由现任集团CEO张勇接任。马云将回归他一直以来最热爱的身份——老师。这个决定看似突然，却并不令人意外。就在几天前（9月5日）的2018XIN公益大会教育分论坛上，马云已经透露了今后的打算：“自己最后还是会回到老师这一行，我做老师能得心应手，而且也是性格决定的，我对很多东西充满好奇和想象。”</p> </body>
弹性 （PC 转 移动 格式不变）
display: flex/inline-flex; 父元素加 放大缩小宽度 不影响布局
direction: rtl; 爷元素加 排列方式 父子 右到左
flex-direction: row-reverse; 父元素加 排列方式 子 横向反转 column-reverse：纵向反转排列 column：纵向
justify-content: flex-start/center/flex-end/space-between/space-around; 左 中 右 隔开 包裹 水平 父加
align-items:flex-start/center/flex-end； 上 中 下 整体放置 父加
flex-wrap: nowrap/wrap/wrap-reverse; 单行 多行 多行反转 子加
order: -1; 顺序 小在前 子元素块加