弹性盒子：flex 设置弹性项目的弹性长度。
常见属性：
flex-direction ------ 指的时弹性容器中子元素的排列方式
flex-wrap ------- 指的时弹性盒子的子元素超出父容器时是否换行
flex-flow ------flex-direction和flex-wrap 的简写
align-items -----设置的时弹性盒子中的元素在侧轴（纵轴）上的对齐方式
justify-content ----设置的时弹性盒子中的元素在主轴（横轴）上的对齐方式
align-content -----修改了flex-wrap 的行为，类似于align-items ，但是它不对齐弹性项目，而是对齐弹 性线
flex：
flex-direction： 指的时弹性容器中子元素的排列方式
flex-wrap ：指的时弹性盒子的子元素超出父容器时是否换行
flex-flow：flex-direction和flex-wrap 的简写
align-items ：设置的时弹性盒子中的元素在侧轴（纵轴）上的对齐方式
justify-content ：设置的时弹性盒子中的元素在主轴（横轴）上的对齐方式
transform： 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
translate() ----- 从当前位置移动元素（根据X轴和Y轴给定的参数） ----- 是一种平移的效果
| translate(x,y) | 定义 2D 转换。 | |
| translate3d(x,y,z) | 定义 3D 转换。 | |
| translateX(x) | 定义转换，只是用 X 轴的值。 | |
| translateY(y) | 定义转换，只是用 Y 轴的值。 | |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 |
rotate(angle):定义 2D 旋转，在参数中规定角度。
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 | |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 | |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 | |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 | |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
scale() -----增加或者减少元素的大小(根据给定的高度或者宽度参数)
| scale(x,y) | 定义 2D 缩放转换。 | |
| scale3d(x,y,z) | 定义 3D 缩放转换。 | |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 | |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 | |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
skew:倾斜转换
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 | |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 | |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 | |
| perspective(n) | 为 3D 转换元素定义透视视图。 |
matrix() ------ 整合所有的2D转换的方法 matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和 倾斜元素。
参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
transition 属性是一个简写属性，用于设置四个过渡属性
属性：
transition-property：规定设置过渡效果的 CSS 属性的名称。
transition-duration：规定完成过渡效果需要多少秒或毫秒
transition-timing-function：规定速度效果的速度曲线
transition-delay：定义过渡效果何时开始。
transition-property：规定设置过渡效果的 CSS 属性的名称。
<!DOCTYPE html>
<html>
<head>
<title>过渡效果</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
border: 1px solid black;
background-color: orange;
}
div{
transition-property:all;
/*宽度 10秒的过渡*/
transition:width 10s,height 10s,transform 10s;
transition-timing-function:ease-in-out;
}
div:hover{
width:500px;
height: 500px;
transform:rotate(40deg);
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
transition-timing-function：规定速度效果的速度曲线
<!DOCTYPE html>
<html>
<head>
<title>过渡效果</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
border: 1px solid black;
background-color: orange;
}
div{
transition-property:all;
/*宽度 10秒的过渡*/
transition:width 10s,height 10s,transform 10s;
/*规定过渡时间*/
transition-timing-function:ease-in-out;
/*属性规定过渡效果的速度曲线。*/
}
div:hover{
width:500px;
height: 500px;
transform:rotate(40deg);
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>css动画：
属性：
@keyframes：规定动画模式。
animation-name：规定 @keyframes 动画的名称。
animation-duration：规定动画完成一个周期应花费的时间。
animation-delay：规定动画开始的延迟。
animation-iteration-count：规定动画应播放的次数。
animation-direction：定动画是向前播放、向后播放还是交替播放。
animation-timing-function：规定动画的速度曲线。
animation-fill-mode：规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）
animation：设置所有动画属性的简写属性。
@keyframes：规定动画模式。
animation-name：规定 @keyframes 动画的名称。
animation-duration：规定动画完成一个周期应花费的时间。
<style type="text/css">
@keyframes first{
0%{
background-color: red;
}
50%{
background-color: yellow;
}
100%{
background-color: red;
}
/*from{
background-color: red;
}
to{
background-color: yellow;
}*/
}
div{
width: 200px;
height: 200px;
border: 1px solid black;
/*规定动画名称*/
animation-name:first;
/*动画持续的时间*/
animation-duration:5s;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>animation-delay: 10s; 规定动画开始的延迟10s
animation-iteration-count：规定动画应播放的次数。
animation-direction：定动画是向前播放、向后播放还是交替播放。
animation-timing-function：规定动画的速度曲线。
<style type="text/css">
@keyframes first{
0%{
background-color: red;
}
50%{
background-color: yellow;
}
100%{
background-color: red;
}
/*from{
background-color: red;
}
to{
background-color: yellow;
}*/
}
div{
width: 200px;
height: 200px;
border: 1px solid black;
/*规定动画名称*/
animation-name:first;
/*动画持续的时间*/
animation-duration:5s;
/*规定动画速度*/
animation-timing-function:ease-in-out;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>animation-fill-mode：规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）
<!DOCTYPE html>
<html>
<head>
<title>动画效果</title>
<style type="text/css">
@keyframes first{
0%{background-color: red}
50%{background-color: yellow}
100%{background-color: green}
/*from{
background-color: red;
}
to{
background-color: yellow;
}*/
}
div{
width: 200px;
height: 200px;
border: 1px solid green;
/*规定动画名称*/
animation-name:first;
/*动画持续的时间*/
animation-duration:5s;
/*规定动画速度*/
animation-timing-function:ease-in-out;
animation-fill-mode:forwards;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>CSS渐变
渐变------可以在两个或者多个颜色之间进行平稳的过渡
线性渐变（向下、向上、向左、向右、向对角线）
径向渐变（由中心定义）
线性渐变：
语法格式：
background-image:linear-gradient( direction,color1,color2........ )
属性：
to right：从右到左
to left:从左到右
to top:从上到小
to bottom:从下到上
对角线 to bottom right 或者 to top left
*有限定角度的渐变 0deg 等价于 to top 90deg 等价于 to right 180deg 等价于 to bottom
repeating-linear-gradient() 函数用于重复线性渐变：
CSS 径向渐变
语法格式： background-image: radial-gradient(shape size at position, start-color, ..., last-color);
属性：
shape 为椭圆形
size 为最远角
- closest-side
- farthest-side
- closest-corner
- farthest-corner
position 为中心
repeating-radial-gradient() 函数用于重复径向渐变
CSS 圆角
border-radius 属性可以接受一到四个值：
四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）
CSS多列
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
扫一扫
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
