一、transform常用的几个值
1、位移：translate
- 水平位移：transform：translateX(100px);
- 垂直位移：transform:translateY(100px);
- 复合位移：transform：translate(100px,200px);
2、scale 缩放
- transform:scale(x,y),x代表的是缩放宽度的x倍，y代表的是缩放高度的y倍
- transform:scale(n);代表的同时缩放宽度和高度的n倍
3、rotate:代表旋转多少度，可以是负值,单位是deg
- transform:rotateX(45deg);代表的是围绕着x轴旋转45deg; （想象翻单杠的运动轨迹）
- transform:rotateY(45deg)；代表的是围绕着y轴进行旋转45deg;(想象跳钢管舞)
- transform:rotateZ(45deg);代表围绕着z轴进行旋转45deg；（大转盘，垂着转盘的轴）
4、skew:倾斜
-
transform：skewX（45deg）沿着X轴倾斜
-
transform：skewY（45deg）；沿着y轴倾斜
-
transform：skew（10deg，15deg），沿着x轴和y轴倾斜转换
5、transform-origin：x,y; 改变元素变形时候的作用原点。
- 水平方向：left、 center、 right；
- 垂直方向：top、center、bottom；
二、过渡 transition
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
/* 符合属性 */
/* transtion:2all 2s */
/* 1.过渡的是谁（谁在变） */
/* transtion-property：height weight */
/* 2.过渡花费的时间 */
/* transtion-duration：2s */
/* 3.运动轨迹 */
/* 开始快 中间快 结束的时候慢 */
/* transtion-timing-function：ease */
/* 低俗开始 */
/* transtion-timing-function：in */
/* 匀速 */
/* transtion-timing-function：linear */
/* 4.延迟 2s后开始执行过渡*/
/* transtion-delay：2s */
}
div>:hover{
height: 200px;
width: 200px;
background-color: black;
}
</style>
三、动画 animation
写动画要分两步：
1、定义动画
2、调用动画
需求：一打开页面有一个盒子从左边走到右边
<style>
.outer {
width: 600px;
height: 100px;
border: 10px dashed #333;
}
.inner {
width: 100px;
height: 100px;
background-color: aqua;
/*第二步： 调用动画 */
/* animation-name：动画名称 */
animation-name: move;
/* animation-duratipn:动画执行需要的时间 */
animation-duration: 5s;
/* animation-timing-function */
animation-timing-function: linear;
}
/* 第一步：定义动画 */
/* 第一种写法 */
/* 其实keyframe就是慢慢改变样式的过程 */
@keyframes 动画名 {
/* 动画序列 */
/* 0%是动画的开始 */
0% {
width: 100px;
}
/* 100%是动画的结束 */
100% {
width: 200px;
}
}
/* 第二种写法 */
@keyframes 动画名 {
/* from是动画的开始 */
from {
transform: translateX(0px);
}
/* to是动画的结束 */
to {
transform: translateX(400px);
}
}
</style>
animation其他属性
四、过渡和动画的区别：
过渡：一般要借助伪类、js等去触发
动画：自动触发
过渡：一般执行一次
动画：可以通过属性控制执行次数
过渡：简单的动画效果
动画：复杂的动画效果
过渡使用于一种状态到另一种状态的改变
五、案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 600px;
height: 400px;
border: 2px solid lightcoral;
}
.box2 {
width: 100px;
height: 100px;
background: lightpink;
animation: run 2s linear infinite;
}
@keyframes run {
25% {
transform: translate(500px, 0);
background-color: lightsalmon;
}
50% {
transform: translate(500px, 300px);
background-color: lightskyblue;
}
75% {
transform: translate(0px, 300px);
background-color: limegreen;
}
100% {
transform: translate(0px, 0px);
background-color: lemonchiffon;
}
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
1、私有前缀
css3需要增加的私有前缀
-webkit-border-radius:50%; //谷歌
-moz-border-radius:50%; //火狐
-ms-border-radius:50% ; //ie
-o-border-radius:50%; //欧朋
border-radius:50% ; //标准写法
提倡写法：
css3包含哪些属性呢？
比如说border属性：border-radius
比如说background属性：background-size等
比如说box-shadow、text-shadow，box-sizing等
比如说transform、animation、transition等
3、背景渐变
渐变可以分为
- 线性渐变
- 径向渐变
线性渐变
线性渐变 默认是从上到下
<style>
div {
width: 200px;
height: 200px;
/* 默认从上到下 */
/* background: linear-gradient(red,green); */
/* 从下到上 */
/* background: linear-gradient(to top,red,green); */
/* 从左到右 */
/* background: linear-gradient(to left,red,green); */
/* 从右到左 */
/* background: linear-gradient(to right,red,green); */
/* 从左上角到右下角 */
/* background: linear-gradient(to right buttom,red,green) */
/* 角度 */
/* background: linear-gradient(45deg, red, green) */
}
div {
width: 500px;
height: 500px;
/* 重复线性渐变*/
/* 从第30像素是黑色，然后30像素到60像素是黑变红，60到100是红变绿，剩余的空间复制很多份*/
background-image: repeating-linear-gradient(#252220 30px, #E94057 60px, #27e056 100px);
}
</style>
案例
1、发廊灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
width: 300px;
height: 100px;
border: 1px solid #333333;
margin: 50px auto;
overflow: hidden;
}
.son {
width: 1800px;
height: 100px;
background-image: repeating-linear-gradient(45deg, #fff 0px, #ffffff 25px, #000000 25px, #000000 50px);
animation: run 10s linear infinite;
}
@keyframes run {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(-1500px, 0px);
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="son"></div>
</div>
</body>
</html>
发廊灯效果
径向渐变
<style>
div{
width: 300px;
height: 200px;
/* 默认是椭圆，正方形看不出来区别 */
/* background: radial-gradient(circle,red,green); */
/* 正圆 */
/* background: radial-gradient(circle at 40px 80px,red,green); */
background: radial-gradient(circle at 50% 50%,red,green)
}
</style>
案例--电蚊香
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 500px;
height: 500px;
background-image: repeating-radial-gradient(circle, #000000 0px, #000000 30px, #ffffff 30px, #ffffff 60px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
