目录
2.1.1 用keyframes定义动画(类似定义类选择器)
一、2D转换
转换(transform)是c3中具有颠覆性的特征之一,可以实现元素的位移,旋转,缩放等效果
1.1 2D转换之移动translate
1.语法:
-
transform:translate(x,y);或者分开写
-
transform:translateX(n);
-
transform:translateY(n);
-
定义2D转换中的移动,沿着X和Y轴移动元素
-
translate最大的优点:不会影响到其他元素的位置
-
translate中的百分比单位是相对于自身元素的translate:(50%,50%);
-
对行内标签没有效果
代码演示:
<style>
div{
width:200px;
height:200px;
background-color:pink;
/*x就是x轴移动的位置,y就是y轴移动的位置 中间用逗号分隔*/
/*transform:translate(x,y);*/
/*1.*/
transform:translate(100px,100px);
/*2.单独用x轴和y轴的话不能同时实现x轴和y轴移动,后者会覆盖前者*/
transform:translateX(100px);
transform:translateY(100px);
/*3.这样可以同时实现x轴和y轴的移动*/
transform:translateX(100px) translateY(100px);
}
</style>
<body>
<div>
</div>
</body>
(1)注意:两个盒子的话一个盒子位置移动不影响其他盒子
<style>
div{
width:200px;
height:200px;
background-color:pink;
}
/*此时不会影响下边的盒子*/
div:first-child{
transform:translate(30px,30px);
}
div:last-child{
background-color:purple;
}
</style>
<body>
<div>
</div>
<div>
</div>
</body>
(2)translate里面的参数可以为百分值,此时移动的距离是盒子自身宽度或高度的百分比 ,代码演示比如:
<style>
div{
width:200px;
height:200px;
background-color:pink;
/*此时盒子移动的距离为盒子自身宽度的一半*/
transform:translateX(50%);
}
</style>
<body>
<div>
</div>
</body>
-
定义2D转换中的移动,沿着X和Y轴移动元素
-
translate最大的优点:不会影响到其他元素的位置
-
translate中的百分比单位是相对于自身元素的translate:(50%,50%);
-
对行内标签没有效果
1.2 2D转换之旋转rotate
顺时针旋转或逆时针旋转
语法:transform:rotate(度数):度数单位为deg
-
rotate里面跟度数,单位是deg 比如:rotate(45deg)
-
角度为正时,顺时针旋转,为负时,逆时针旋转
-
默认旋转的中心点是元素的中心点
<style>
div {
width:200px;
height:200px;
background-color:pink;
transform:rotate(45deg);
}
</style>
<body>
<div>
</div>
</body>
1.3 2D转换中心点transform-origin
语法:transform-origin:x y;
-
注意后面参数x和y用空格隔开
-
x y默认转换的中心点是元素的中心点(50% 50%)
-
还可以给x y设置像素或方位名词(top bottom left right center)
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
/*过渡效果*/
transition: all 1s;
/* 1.可以跟方位名词 */
transform-origin: left bottom;
/* 2.默认的是50% 50% 等价于center center */
}
div:hover {
transform: rotate(360deg);
}
</style>
<div></div>
1.4 2D转换之缩放scale
语法:
transform:scale(x,y);
x相当于宽度,y相当于高度
-
注意其中的x和y用逗号分隔
-
transform:scale(1,1):宽和高都放大一倍,相当于等比缩放
-
transform:scale(2,2):宽和高放大2倍
-
transform:scale(2):只写一个参数,第二个参数则和第一个参数一样,相当于scale(2,2)
-
transform:scale(0.5,0.5)缩小二分之一
-
scale缩放最大的优势:可以设置转换中心点进行缩放,默认以中心点进行缩放,而且不影响其他盒子
-
如果通过改变宽高进行缩放不能以中心点进行
1.5 2D转换综合写法
-
同时使用多个转换,其格式为:transform:translate() rotate() scale()...等
-
其顺序会影响转换的效果(先旋转会改变坐标轴方向)
-
当我们同时有位移和其他属性的时候,记得要将位移放到最前面
二、动画
制作动画分为两步:
-
先定义动画
-
在使用动画
2.1 动画的基本使用
2.1.1 用keyframes定义动画(类似定义类选择器)
@keyframes 动画名称 {
/*动画的开始*/
0%{
width:100px;
}
/*动画的结尾*/
100%{
width:200px
}
}
2.1.2使用动画
div {
width:200px;
height:200px;
background-color:aqua;
margin:100px auto;
/*调用动画*/
animation-name:动画名称;
/*持续时间*/
animation-duration:持续时间;
}
2.1.3.动画序列
-
0%是动画的开始,100%是动画的完成,这样的规则就是动画序列
-
在@keyframes中规定某项css样式,就能创建由当前样式逐渐改为新样式的动画效果
-
动画是使元素从一种样式逐渐变化为另一种样式的效果,您可以改变任意多的样式任意多的次数
-
用百分比来规定发生的时间,或用关键词“from”和“to”,等同于0%和100%
-
可以做多个状态的变化 keyframes:关键帧
-
里面的百分比要是整数
-
里面的百分比就是总的时间(10s)的划分
<style>
@keyframes move {
/*0% 可以不写 */
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1000px, 0);
}
50% {
transform: translate(1000px, 500px);
}
75% {
transform: translate(0, 500px);
}
100% {
transform: translate(0, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
animation-name: move;
animation-duration: 10s;
}
</style>
<body>
<div></div>
</body>
2.2 动画常见属性
属性 | 描述 |
---|---|
@keyframes | 规定动画 |
animation | 所有动画属性的间歇属性,除了animation-play-state属性 |
animation-name | 规定@keyframes动画名称(必须) |
animation-duration | 规定动画完成一个周期多花费的秒或毫秒,默认是0.(必须填) |
animation-timing-function | 规定动画的速度曲线,默认是“ease”:动画从低速开始,然后加快,在结束前变慢,linear:匀速, steps(步数):指定了时间函数中的间隔数量(步长),ease-in动画以低速开始,ease-out动画以低速结束,ease-in-out动画以低速开始和结束 |
animation-delay | 规定动画何时开始,默认是0 |
animation-iteration-count | 规定动画被播放的次数,默认是1,还有infinite |
animation-direction | 规定动画是否在下一个周期逆向播放,默认是“normal”,alternate逆播放 |
animation-play-state | 规定动画是否正在运行或停止,默认是“running”,还有“paused”:暂停 |
animation-fill-mode | 规定动画结束后状态,保持forwards回到起始backwards,默认是回到起始状态 |
<style>
@keyframes move {
/*0% 可以不写 */
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1000px, 0);
}
50% {
transform: translate(1000px, 500px);
}
75% {
transform: translate(0, 500px);
}
100% {
transform: translate(0, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/*动画名字,秒:s,毫秒:ms*/
animation-name: move;
/*持续时间,*/
animation-duration: 10s;
/*遇运动曲线*/
animation-timing-function:ease;
/*何时开始,1s开始*/
animation-delay:1s;
/*重复播放次数,infinite:无限次*/
animation-interation-count:infinite;
}
</style>
<body>
<div></div>
</body>
2.3动画简写
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态(按顺序,前两个不能不写)
-
简写属性里面不包含animation-play-state
-
暂停动画:animation-play-state:puased;经常和鼠标经过等其他配合使用
-
想要动画走起来。而不是直接跳回来:animation-direction:alternate
-
盒子动画结束后,停在结束位置:animation-fill-mode:forwards