CSS进阶3-transform 动画-渐变(线性渐变、镜像渐变)-关键帧

 

 1. 动画

　　　　介绍：改变盒子在平面内的形态（平移、缩放、旋转、倾斜）

　　　　　属性：

1. 1. •  平移：transform：translate(值1 ，值2);(默认为X轴，translateY--下移)　

 

　　　　　　　　　　　　　　　　　　　　— —平移依然在原来文档流。

 

1. 1. •  移动：transform：translate(值1，值2)；可右斜移动

代码：

/* 平移 */
.translate{
    width: 150px;
    height: 150px;
    background-color: pink;
}
/* 鼠标悬浮效果-->X轴平移500px */
/* 平移值为X轴，Y轴时 就会脱离平移*/
.translate:hover{
    background-color: yellow;
    transform: translate(500px);
}

 

视图：

 

 

1. 1. •  旋转：transform：rotate(度数)；单位：deg

　　　　　　　　　　　　　　　　　　— —默认原点是盒子中心。（可为正负，正为：顺时针，负为：逆时针）

代码：

/* 鼠标悬浮效果 */
.rotate:hover{
    background-color: yellowgreen;
    /* 旋转30度 */
    transform: rotate(30deg);
}

视图：

 

 

1. 1. •  缩放：transform：scale(值)；1为区间，小于1则缩小，大于1则放大；值为负则反向缩放

　　　　　　　　　　　　　　　　　　— —transform:scale（值1，值2） 按照x与y轴缩放。若一个值为等比例缩放。scale：正为放大，负为缩小

代码：

.scale{
    width: 150px;
    height: 150px;
    /* 背景色 */
    background-color: turquoise;
}

/* 鼠标悬浮效果显示 */
.scale:hover{
    /* 小于1则缩小，大于1则放大 */
    transform: scale(2);
}

 

1. 1. •  倾斜：transform：skew(度数)；单位：deg

 

 

.skew{
    width: 150px;
    height: 150px;
    /* 背景色 */
    background-color: turquoise;
}

/* 鼠标悬浮效果显示 */
.skew:hover{
    /* 正负倾斜不同 */
    transform: skew(30deg);
}

 

 

 

• • 　平移、缩放、旋转、倾斜可相互搭配使用。
  • 　值：可为正负。单位：px、百分比（正负出现的效果不同，建议多次尝试）
  • 　如果设置一个值-->X轴距离，第二个值-->Y轴距离

 

2. 渐变：

• 线性渐变：

　　　　属性：linear-gradinet
　　　　　　     渐变方向：to  left、right、top、bottom（组合使用）
　　　　　　角度：渐变终止方向的角度，渐变方向为百分比与单位值(deg)可用

　　　　　　重复渐变：repeating-linear-gradinet（color1，color2）--在颜色前可设置角度（单位：deg），后可加占比（单位：px）

 代码：

/* 线性渐变 */
.linear{
    width: 500px;
    height: 300px;
    border: 5px solid wheat;
    border-radius: 400px;
    /* 渐变 to lef-->向左渐变 */
    background: linear-gradient(to left, red, orange, yellow,green, blue, indigo,purple );

    /* 重复渐变 */
    background: repeating-linear-gradient(30deg,red,yellow,white)
}

视图：

 

 

 

 

• 镜像(放射)渐变：(与盒子形状有关：盒子为正方形，镜像渐变为圆）

　　　　属性：radial-gradient();
　　　　　　    形状：ellipse 椭圆/ circle 圆
　　　　　　发散方向：形状 + at + left、right、top、bottom(可组合)
　　　　　　重复渐变：repeating-radial-gradinet(color1 ，color2)color后可加占比（单位：px）

代码：

.radial{
    width: 500px;
    height: 500px;
    border: 5px solid wheat;

    /* 普通镜像 */
    background: radial-gradient(white,pink,yellow);

    /* 镜像重复渐变-->圆形-->从右下渐变 */
    /* background:repeating-radial-gradient(circle at right bottom ,yellow 4px,white 10px); */
}

 

视图：

 

3. 过渡动画：

　　　　过渡动画：transtion：all （时长，单位：s/ms)  linear;
　　　　　　— —属性：    all：所有属性获得动画，linear：匀速
　　　　　　— —先慢后快：ease-in

代码：

.guodu{
    width: 300px;
    height: 300px;
    background-color: aquamarine;
}

/* 过渡动画，鼠标悬浮旋转20° 同时 缩小  并平移100px*/
.guodu:hover{
    transform: translate(100px) rotate(20deg) scale(0.5) ;
    /* 图片位置-->右下 */
    transform-origin: right bottom;
}

4. 图片位置：

　　　　transform-origin：left/right/top/bottom(可组合)；

5.关键帧：

　　　　@keyframes 自定义名 {
　　　　　　到达某个值时，例：10%{
　　　　　　　　动画...
　　　　　　　　}
　　　　　　}

　　　　animation: 自定义名 秒值 速度；

• • 　0%开始，100%完成。
  • 　在 @keyframes 中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
  • 　动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
  • 　尽量用百分比来规定变化发生的时间，或用关键词"from"和"to",等同于0%和100%。

代码：

 

.box{
    width: 300px;
    height: 300px;
    background-color: wheat;

    /* 将关键帧动画写入  6秒   匀速*/
    animation: guanjianzhen 6s linear;
}

/* 关键帧 */
/* 0时平移200px-->50时旋转30°-->80时放大-->完成时平移回原位 */
@keyframes guanjianzhen {
    0%{
        transform: translate(200px);
    }
    50%{
        transform: rotate(30deg);
    }
    80%{
        transform: scale(5);
    }
    100%{
        transform: translate(0px);
    }
}

 

 

---