1、过度
添加过渡效果:过渡效果执行完毕之后,默认会还原到原始状态
1.transition-property:添加过渡效果的样式属性名称
transition-property: left;//
2.transition-duration:过渡效果的耗时 以秒做为单位
transition-duration: 2s;//设置过度耗时为2秒
3.transition-timing-function:设置时间函数--控制运动的速度,属性值有点多,参考相关文档
transition-timing-function: linear;//均速过度,默认是ease(先快后慢)
transition-timing-function: steps(5);//整个过度过程分为5步完成
4.transition-delay:过渡效果的延迟
transition-delay: 2s;//过度的延迟时间
5.transition:为多个样式同时添加过渡效果
transition: height 2s,width 2s linear 0s,background-color 5s linear 0s;
注意:
过渡效果只能产生从某个值到另外一个具体的值的过渡,比如不能加display:none过度到display:block;
一定要设置为哪些css样式添加过渡效果
一定要设置过渡效果的耗时
例子:想通过过度的效果实现鼠标移动到div上,div变大变色,鼠标离开div后,默认会自动还原
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 100px;
top: 100px;
/*为多个样式同时添加过渡效果*/
transition: height 2s linear 0s,width 2s linear 0s,background-color 5s linear 0s;
}
div:hover{
height: 400px;
width: 400px;
background-color: blue;
}
</style>
<body>
<div></div>
</body>
2、二维变换
transform
1.移动:translate
移动是参照元素的左上角
执行完毕之后会恢复到原始状态,和过度一样
如果只有一个参数就代表x方向
如果有两个参数就代表x/y方向
如:transform: translate(100px,100px);//让某元素向x轴方向和y轴方向移动100px
添加水平或者垂直方向的移动
transform:translateX(100px);//transform: translate(100px,0px);
transform:translateY(100px);//transform: translate(0px,100px);
2.缩放:scale
实现缩放,1指不缩放,>1.01放大 <0.99缩小
默认参照元素的几何中心进行缩放或扩展
如果只有一个参数,就代表x和y方向都进行相等比例的缩放
如果有两个参数,就代表x/y方向
transform: scale(2);//x y 方向都扩大2倍
transform: scale(2,1);//x方向扩大2倍,y方向上不变
transform:scaleX(0.5);//缩放或扩展指定的方向
transform:scaleY(0.5);//缩放或扩展指定的方向
3.旋转:rotate
rotate(数值)。数值表示多少度,可正可负,正数为顺时针方向,负数为逆时针方向
默认参照元素的几何中心进行旋转
如:transform: rotate(-90deg)//逆时针
4.斜切:skew
skew(数值)。数值表示多少度,可正可负,正数为顺时针方向,负数为逆时针方向
transform-origin:
设置旋转或者缩放轴心
可以用2个数字表示x和y坐标
可以使用2个关键字表示某个点:left top right bottom center
transform-origin:100px 100px;//100,100坐标点
transform-origin:left top;//左上角
3、设置任意元素居中:
父元素绝对定位(也可是其他定位,只要是定位即可)
子元素相对定位
设置子元素的left和top值分别为50%。定位的百分比是参照父容器的宽高
使用transform实现元素的居中,transform: translate(-50%,-50%);,百分比是参照元素本身的宽高
示例:
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 400px;
height: 400px;
position: relative;
}
.rec{
width: 200px;
height: 200px;
position: absolute;
/*定位的百分比是参照父容器的宽高*/
left: 50%;
top: 50%;
/*使用transform实现元素的居中 百分比是参照元素本身的宽高*/
transform: translate(-50%,-50%);
}
</style>
<div class="box">
<div class="rec"></div>
</div>
4、三维变换
transform
1.移动:translate3d
translate3d(X方向的偏移,Y方向的偏移,Z方向的偏移)
transform: translate3d(400px,0,0);//transform: translate3dX(400px);
transform: translate3d(0px,400px,0);//transform: translate3dY(400px);
transform: translate3d(0px,0px,400px);//transform: translate3dZ(400px);
2.缩放:scale3d
scale3d(x方向上的缩放,y方向的缩放,z方向的缩放)
大于1为放大,小于1为缩小
3.旋转:rotate3d
rotate3d(x,y,z,angle);
x:代表x轴方向上的一个向量值
y:代表y轴方向上的一个向量值
z:代表z轴方向上的一个向量值
angle为一个角度
5、案例:实现一个正方体
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
position: relative;
margin: 100px auto;
transform: rotate3d(1,1,0,-30deg);/*x y z 不能带单位*/
/*让子元素保留3d变换之后的效果*/
transform-style: preserve-3d;
}
.box>div{
width: 200px;
height: 200px;
position: absolute;
opacity: 0.4;/*设置透明度*/
}
.front{
background-color: red;
transform: translateZ(100px);
}
.back{
background-color: purple;
transform: translateZ(-100px) rotateY(180deg);
}
.left{
background-color: green;
transform: translateX(-100px) rotateY(-90deg);
}
.right{
background-color: orange;
transform: translateX(100px) rotateY(90deg);
}
.top{
background-color: pink;
transform: translateY(-100px) rotateX(90deg);
}
.button{
background-color: blue;
transform: translateY(100px) rotateX(-90deg);
}
</style>
<div class="box">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="button">button</div>
</div>
6、添加动画
创建动画
百分比是指整个动画耗时的百分比
@keyframes moveTest {
0%{
transform: translate(0,0);
}
50%{
transform: translate(0,500px);
}
100%{
transform: translate(500px,500px);
}
}
上述定义假设动画耗时2秒,那么表示前一秒将元素向y轴正方向移动500px,后一秒将元素向x轴正方向移动500px
0%可以写成from
100%可以写成to
@keyframes moveTest {
from{
transform: translate(0,0);
}
50%{
transform: translate(0,500px);
}
to{
transform: translate(500px,500px);
}
}
添加动画效果
1.animation-name:指定动画名称 必填
animation-name: moveTest;
2.animation-duration设置动画的总耗时 必填
animation-duration: 2s;
3.animation-iteration-count设置动画的播放次数,
默认为1次 可以指定具体的数值,也可以指定infinite(无限次)
animation-iteration-count: 1;
4.animation-direction设置动画方向
normal: 正常方向
reverse: 反方向运行
alternate: 来回交替运行
alternate-reverse: 动画先反运行再正方向运行,来回交替运行
animation-direction: alternate;
5.animation-delay设置动画的延迟
animation-delay: 2s;
6.animation-fill-mode设置动画结束时的状态:
默认情况下,动画执行完毕之后,会回到原始状态
forwards:会保留动画结束时的状态,在有延迟的情况下,并不会立刻进行到动画的初始状态
backwards:不会保留动画结束时的状态,在添加了动画延迟的前提下,如果动画有初始状态,那么会立刻进行到初始状态
both:会保留动画的结束时状态,在有延迟的情况下也会立刻进入到动画的初始状态
animation-fill-mode: both;
7.animation-timing-function动画的时间函数
animation-timing-function: linear;//和过度的时间函数类似
8.animation-play-state设置动画的播放状态
paused:暂停
running:播放
animation-play-state: running;
9.简写animation:
animation:动画名称 动画耗时;
7、动画案例1 无缝滚动
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 882px;
height: 86px;
margin:100px auto;
background-color: #ddd;
overflow: hidden;
}
div >ul{
width: 200%;
list-style: none;
animation-name: move;/*1.设置的名称*/
animation-duration: 7s;/*2.设置动画的耗时*/
animation-iteration-count: infinite;/*3.市场无限循环*/
animation-timing-function: linear;/*4.设置时间函数*/
}
div > ul > li{
width:126px;
float: left;
}
div > ul > li > img{
width:100%;
}
/*鼠标上移,停止动画*/
div:hover > ul{
cursor: pointer;
animation-play-state: paused;
}
/*创建动画*/
@keyframes move {
from{
transform:translateX(0);
}
to{
transform:translateX(-882px);
}
}
</style>
<div>
<ul>
<li><img src="../images/1.jpg" alt=""></li>
<li><img src="../images/2.jpg" alt=""></li>
<li><img src="../images/3.jpg" alt=""></li>
<li><img src="../images/4.jpg" alt=""></li>
<li><img src="../images/5.jpg" alt=""></li>
<li><img src="../images/6.jpg" alt=""></li>
<li><img src="../images/7.jpg" alt=""></li>
<li><img src="../images/1.jpg" alt=""></li>
<li><img src="../images/2.jpg" alt=""></li>
<li><img src="../images/3.jpg" alt=""></li>
<li><img src="../images/4.jpg" alt=""></li>
<li><img src="../images/5.jpg" alt=""></li>
<li><img src="../images/6.jpg" alt=""></li>
<li><img src="../images/7.jpg" alt=""></li>
</ul>
</div>