HTML笔记（七） | 易学教程

Css3新增属性

一、圆角、阴影

1.圆角

    border-radius:value;   四个角
    border-radius:value value;   左上角，右下角    右上角，左下角
    border-radius:value value value;
    border-radius:value value value value; 顺时针转，左上角开始
    border-radius: 50%;  画圆

盒阴影

语法：box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 水平方向的位置（正负）；必需
垂直方向的位置（正负）；必需
模糊度（正值）
扩展值（正负）
颜色
位置默认outset（外阴影） inset（内阴影）
字阴影
语法：text-shadow: h-shadow v-shadow blur color;
text-shadow：水平方向的位置；必需
垂直方向的位置；必需
模糊度
颜色

二、转换

使元素在形状上或者位置发生一定的改变
属性：transform:;
1、位移
transform:translate(x,y)
当只取一个值，代表水平方向，两个值，代表水平方向和垂直方向
（右下为正，可取负值）

    transform: translateX();  水平方向位移
    transform: translateY();  垂直方向位移

2、旋转
transform:rotate(deg);
取正值，顺时针旋转，负值，逆时针旋转
旋转会旋转整个坐标轴
默认旋转中心点为宽高的一半 旋转写在位移后边

    transform:rotateX(deg);
    transform:rotateY(deg);

transform-origin:; 设置旋转的中心点，默认中心点（left/right top/bottom）

3、缩放
transform:scale(x,y);
默认值 1
取值0-1 缩小
>1 放大
当取值为一个时，等比例缩放；两个值代表水平和垂直

     transform:scaleX();   水平方向上缩放
     transform:scaleY();   垂直方向上缩放

4、倾斜
transform；skew(xdeg,ydeg)
取一个值代表水平方向；两个值代表水平和垂直（正负）

     transform: skewX(deg);
     transform: skewY(deg);

三、过渡

1.过渡
属性：transition:;
作用：从一个效果平滑的过渡到另外一个效果
必须有触发事件 :hover

1.1过渡的属性
transition-property: none|all|property
可以过渡的属性：
颜色
取值为数值
阴影
转换
背景渐变
简写 all

1.2过渡的时间
transition-duration: s|ms;
s ms
1s=1000ms

1.3过渡函数
速度变换类型
transition-timing-function: ;
ease 默认值先加速后减速效果
ease-in 加速效果
ease-out 减速效果
ease-in-out 先加速后减速效果
linear 匀速
1.4延迟
transition-delay: s|ms;
改变元素属性值后多长时间开始执行过渡效果
简写属性transition
transition属性是一个简写属性，用于设置四个过渡属性
语法：transition:property duration timing-function delay;

2.渐变
CSS3 定义了两种类型的渐变（gradients）
线性渐变（Linear Gradients）
径向渐变（Radial Gradients）

2.1线性渐变
Linear Gradients- 向下/向上/向左/向右|||对角方向
background: linear-gradient(direction |||angle, color-stop1, color-stop2, …);
方向 to left/…|||角度
重复的线性渐变
repeating-linear-gradient() 函数用于重复线性渐变：
background: repeating-linear-gradient(red, yellow 10%, green 20%);
2.2径向渐变
Radial Gradients- 由它们的中心定义
background: radial-gradient(center, shape size, start-color, …, last-color);

默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形）
它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形

size 参数定义了渐变的大小。它可以是以下四个值：
closest-side farthest-side closest-corner farthest-corner

四、动画

动画animation:;
关键帧动画，通过关键帧控制动画的每一步

@keyframes
作用：用于声明动画，指定关键帧
帧，用于分解动画动作
每个帧代表某个时间点
定义每个帧上的动作

@keyframes语法：

@keyframes name  {  from|0%{css样式}
                          percent{css样式}
                          to|100%{css样式}
                        }

animation-name: ;	调用动画，规定需要和@keyframes的名字一致
animation-duration: s|ms;	动画完成一个周期所需要的时间
animation-timing-function: ;	规定动画的速度变化类型
animation-delay:s|ms ;	播放之前的延迟时间
animation-iteration-count: 数值|infinite; 	播放次数 infinite表示无限次播放
animation-direction: normal|alternate;	动画播放方向normal为默认值，表示正常播放
alternate表示轮流播放，即动画会在奇数次正常播放，而在偶数次向后播放
animation-fill-mode: forwards;	动画停在最后一帧默认值为none
animation-play-state:paused|running; 属性规定动画正在运行还是暂停，默认值为running

来源：https://blog.csdn.net/weixin_44589858/article/details/98941168

标签

transform

动画