Css渐变和动画

Css渐变及动画

渐变

渐变分为线性渐变和径向渐变
线性渐变
background-image：line-gradient（）；
渐变方向是从上到下的
用to-right ，botto改变渐变的方向
用 60deg改变角度
可以多中颜色
可以在颜色后百分比%添加区域 也可以用像素
repeaat-linear-gradient 重复渐变
radial-gradient 径向渐变
circle- at right属性改变渐变的方向，

动画

transform：2D变形
transform：translate（100px，0）移动动画
transition：0.3s；过度效果
transform：translate（x，y）；2D平移
transform：scale（）；缩放
transform：rotate（角度 90deg）；旋转
transform-origin：right bottom；基准点
transform：skew（角度）
3、transform：3D变形：
transform：3D 变形函数 - translate3d(x,y,z) 定义 3D 转换。 - translateY(y) 定义转换，只是用 Y 轴的值。 - translateX(x) 定义转换，只是用 X 轴的值。 - translateZ(z) 定义 3D 转换，只是用 Z 轴的值。 - rotate3的（x，y，z，angle）定义3D旋转。 - roatteX（angle）定义沿着X轴的3D旋转。
transform-style 规定被嵌套元素如何在3d空间中显示。
flat 子元素将不保留其3D位置。
preserve-3d 子元素将保留其3D位置。

动画效果-过渡

transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
none 没有属性会获得过渡效果。
all 所有属性都将获得过渡效果。
属性名称
transition-duration 定义过渡效果花费的时间。默
认是 0。单位是秒或毫秒
transition-timing-function 规定过渡效果的时间曲线。默认是
“ease”。

动画效果-关键帧动画

1.@keyframes 设定动画规则。可以近似理解为动画的剧本。
none必需。定义动画的名称
0-100%/from…to…必需 动画时长的百分比
需要变化的css样式属性：必需
2.animation 所有动画属性的简写属性，用于设置六个动画属性：
animation-name/animation-duration/animation-timing-function
/animation-delay/animation-iteration-count/animation-direction

结构
div 父容器>ul>li hover*3>img >div蒙版

样式
div父容器，宽高据中边框线
ul li.去电，宽高浮动边框线
2个li，添加左右外边距
3个li中img大小
div蒙版 宽高，透明的背景颜色。里面的字体样式
调整
调整蒙版位置，通过定位将蒙版和照片重叠放在li盒子中
通过旋转动画，旋转90度，放在盒子外并，溢出隐藏
鼠标悬浮
鼠标悬浮旋转0度。

内填充为padding
1.结构 3个大div- 6个小li- 3个大文字div
三个大div 浮动，倾斜，鼠标悬浮变正，后面俩个小div隐藏，悬浮，上升，帧动画
后俩个同理
文字div背景模糊 鼠标悬浮背景放大