过渡:
通过过渡可以指定一个属性发生变化时的切换方式,有数值的属性基本都支持过渡效果,过渡时必须是从一个有效数值向另一个有效数值过渡,auto不能实现。
transition-property,指定要执行过渡的属性,如果所有属性都需要过渡,则使用all关键字。transition-duration,指定过渡效果的持续时间。transition-timing-function,过渡的时序函数,制定过渡的执行方式,可选值:ease,默认值,慢速开始,加速再减速;linear,匀速运动;ease-in,加速运动;ease-out,减速运动;ease-in-out,先加速后减速;cubic-bezier(0,0,1,1)通过贝赛尔曲线指定时序函数,里面的四个数值是曲线上两个小球的坐标,https://cubic-bezier.com;steps(2,start/end),分步执行过渡效果,第一个值指定分几次执行,第二个值:end,在时间结束时执行过渡;start,在时间开始时执行过渡。transition-delay,过渡效果的延迟,等待相应时间后再执行过渡。transition,简写属性,如果要写延迟,则两个时间中第一个是持续时间,第二个是延迟,其余值无顺序要求。
动画:
动画和过渡类似,不同的是过渡需要在某个属性发生变化时才能触发,动画可以自动触发动态效果。设置动画效果,必须先要设置一个关键帧,关键帧设置了动画执行的每一个步骤。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.b1{
width: 100px;
height: 100px;
background-color: wheat;
/*要对当前元素生效的关键帧名字*/
animation-name: test;
/*动画执行的时间*/
animation-duration: 3s;
/*动画的延时*/
animation-delay: 0.3s;
/*动画的时序函数*/
animation-timing-function: ease-in-out;
/*动画的属性与过渡类似,但要比动画多一些属性*/
/*动画执行的次数,值为infinite时执行无限次*/
animation-iteration-count: 3;
/*动画执行的方向,可选值:
normal,默认值from向to执行
reverse,to向from运行
alternate,from向to运行,重复执行时反向执行
alternate-reverse,to向from运行,重复执行时反向执行*/
animation-direction: alternate;
/*动画的填充模式,可选值:
none,默认值,动画执行完毕元素回到原位置
forwards,动画执行完毕元素停止在动画结束时的位置
backwards,动画延时等待时,元素就会处于开始位置
both,结合forwards、backwards的值*/
animation-fill-mode: forwards;
/*animation,简写属性,duration在前,delay在后,其他值无顺序要求*/
}
.b1:hover div{
/*设置动画的执行状态,可选值:
running,默认值动画执行
paused,动画暂停*/
animation-play-state: paused;
}
/*关键帧的名字定义为test*/
@keyframes test{
/*from表示动画的开始位置,也可以使用百分比表示*/
from{
margin-left: 0;
}
/*to表示动画的结束位置,也可以使用百分比表示*/
to{
margin-left: 1000px;
}
}
</style>
</head>
<body>
<div class="b1"></div>
</body>
</html>
变形:
变形就是指通过CSS来改变元素的形状或位置,变形不会影响页面布局。
transform用来设置元素的变形效果,可选值:
平移:translateX(),x轴方向,正值右移,负值左移、translateY(),y轴方向,正值下移,负值上移、translateZ(),z轴方向,正值前移(变近),负值后移。括号内可以写像素或百分比,百分比是相对于元素自身计算的。如果对元素进行旋转操作,xyz轴也会跟着旋转而改变方向。
/*z轴平移属于立体效果,默认情况下网页不支持透视,如果需要看见效果,必须设置网页的视距(人眼到屏幕的距离)*/
html{
perspective: 800px;
}
/*或者如下写法(视距写在其他值前面):*/
.b1{
transform: perspective(800px);
}
元素居中方式:
/*这种居中方式只适用于元素大小固定,如果不指定宽高,则元素会铺满页面*/
/*.box1{
background-color: aliceblue;
position: absolute;
width: 100px;
height: 100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}*/
.b1{
background-color: aliceblue;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
旋转:rotateX(),正值3D向后旋转(横着转)、rotateY(),正值3D向右旋转(竖着转)、rotateZ(),正值平面向右旋转(平着转)。括号内的值单位可以是deg(角度)或turn(圈)。旋转后,元素的xyz轴也跟着旋转了。
浏览器有透视效果,图片旋转180deg后,可以看到背面(对称效果),如果不希望看到背面可以设置backface-visibility: hidden;(默认值visible)。
缩放:scaleX(),水平方向缩放、scaleY(),垂直方向缩放、scale(),双方向缩放。括号内填放大的倍数。
指定变形的原点:transform-origin:20px 20px; 默认值center。
(作者观看的学习视频:B站尚硅谷)