目录
0x00 2D动画
transform属性下的函数:
transform:translate(x,y); //平移
transform:scale(x,y);//缩放
transform:rotate();//旋转
transform:skew();//倾斜
默认情况下,以上变形都以元素的中心为原点进行变形的。
通过transform-origin: x轴 y轴 可以修改以上变形操作的原点:
以元素的中心为原点建立xy坐标系
50%表示x或者y轴的原点中心位置 =center
100%表示x或者y轴正方向的最顶端=x的left 、y的 top
0%表示x或者y轴负方向的最顶端。=x的right 、y的bottom
对于scale缩放操作来说,原点既是“放大”的起始点,也是"缩小"的回归点。
1.translate(x,y)平移
x为x轴上的平移,y为y轴上的平移。
如果是百分比表示法,x参照的是自身的宽度,y参照的是自身的高度
例如:
如果该元素的长宽分别为100px ,50px,且transform:translate(50%,50%)那么该元素就会向右边移动50px,向下移动25px
如果transform:translate(-50%,-50%)那么该元素就会向左边移动50px,向上边移动25px。
后一种方式可以用来实现元素相对于父元素的居中,即
div{
position:fixed;
top:50%; //以父元素的长为参照
width:50%;//以父元素的宽为参照
transform:translate(-50%,-50%);
width:100px;
height:40px;
}
另外两种方法:
1.translateX(x)元素仅在水平方向位移
2.translateY(y)元素仅在垂直方向位移
这两种方法不能同时使用,一方会覆盖另一方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
width:200px;
height:300px;
/* transform:translate(200px,300px); */
transform:translateX(200px);
transform:translateY(300px);
}
</style>
</head>
<body>
<div>
月溅星河,长路漫漫,风烟残尽,独影阑珊;谁叫我身手不凡,谁让我爱恨两难,到后来,肝肠寸断。幻世当空,恩怨休怀,舍悟离迷,六尘不改;且怒且悲且狂哉,是人是鬼是妖怪,不过是,心有魔债。叫一声佛祖,回头无岸,跪一人为师,生死无关;善恶浮世真假界,尘缘散聚不分明,难断!我要这铁棒有何用,我有这变化又如何;还是不安,还是氐惆,金箍当头,欲说还休。我要这铁棒醉舞魔,我有这变化乱迷浊;踏碎灵霄,放肆桀骜,世恶道险,终究难逃。梦醒太晚!这一棒,早已灰飞烟灭…...
</div>
</body>
</html>
2.rotate(angle)旋转
正度数表示顺时针旋转,负值则相反。
3.scale(x轴上的倍数,y轴上的倍数)缩放
scale方法可以将元素根据中心原点进行缩放
width = 原来的width * x轴上的倍数
height = 原来的height * y轴上的倍数
另外两种方法:
1.scaleX(x)元素仅在水平方向上缩放
2.scaleY(y)元素在垂直方向上缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body,html{
position:relative;
width:100%;
height:100%;
}
div{
/* 居中 */
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
/* 经典三角形 */
width:0px;
height:0px;
border-top:100px solid grey;
border-left:100px solid transparent;
border-right:100px solid transparent;
border-bottom:0px;
/* 旋转 */
/* transform:rotate(90deg); */
/* 平移 */
/* transform:translate(100px,100px); */
/* 缩放 */
transform:scale(1,1);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
实现:当鼠标移动到图片上,图片放大的效果:
.ms-item-lk:hover .ms-item-img{
transform:scale(1.1);
transition:0.5s;
}
4.skew()倾斜
transfrom:skew(angle,angle)
包含两个参数,分别表示x轴和y轴倾斜的角度,如果第二个参数为空,则默认是0,参数为负表示向相反方向倾斜
skewX()表示只在X轴倾斜
skewY()表示只在Y轴倾斜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
width:100px;
height:100px;
margin:100px auto;
background:red;
transform:skew(30deg,10deg)
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
0x03 3D动画
1.translate3d(x,y,z)
定义3d平移
x表示x轴上的平移,y表示y轴上的平移,z表示z轴上的平移
translateZ(z)在z轴上的平移,z轴为面向屏幕的方向
perspective方法可以设置镜头到屏幕的距离
父元素上加上transform-style:preserve-3d可修改元素层级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#tf1{
width:100px;
height:100px;
background:red;
transform:perspective(200px) translate3d(0px,100px,100px);
}
</style>
</head>
<body>
<div id="tf1"></div>
</body>
</html>
2.rotateX定义沿着X轴的3d旋转
rotateY定义沿着Y轴的3d旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#tf3{
width:100px;
height:100px;
background:yellow;
/* 设置过渡为2s */
transition:all 2s;
}
#tf3:hover{
transform:rotateX(180deg);
}
</style>
</head>
<body>
<div id="tf3">Talk is cheap,show me the code;</div>
</body>
</html>
0x04 CSS3过渡 transition
过渡指元素从一种样式逐渐改变为另一种的效果
语法:
transition:property duration timing-function delay
property:指定CSS属性的名称,多个属性之间用逗号分隔,如果为all表示,所有属性都会有过渡效果
duration:指定过渡时间
timing-function:指定转速曲线,默认值为ease(规定从慢速开始,然后变快,然后变慢),linear匀速,ease-in(慢速开始),ease-out(慢速结束),ease-in-out(慢速开始慢速结束)
delay:定义多少秒后开始过渡效果
或者可以用transition-delay来单独设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#tf3{
width:100px;
height:100px;
background:yellow;
word-break:break-all;
/* 过渡属性为width 过渡时间为1s */
transition:width 0.5s,height 0.5s;
}
#tf3:hover{
width:300px;
height:50px;
/* 如果不设置过渡,这种变化会很突兀 */
}
</style>
</head>
<body>
<div id="tf3">Talk is cheap,show me the code;</div>
</body>
</html>
0x05 CSS3动画特效技能
@keyframes规则内指定一个css样式和动画逐步从目前的样式更改为新样式。
CSS3过渡需要一个触发事件,而CSS3动画特效并不需要触事件
语法:
定义动画
@keyframes xxx{
from{
xxx:xxx;
}
to{
xxx:xxx;
}
}
也可以定义多个:
@keyframes xxx{
0%{
xxx:xxx;
}
10%{
xxx:xxx;
}
100%{
xxx:xxx;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
animation:myAnimation 5s forwards;
}
@keyframes myAnimation{
from{
background:grey;
color:black;
}
to{
background:black;
color:greenyellow;
}
}
</style>
</head>
<body>
<div id="tf3">Talk is cheap,show me the code;</div>
</body>
</html>
使用动画
animation:name duration timing-function delay iteration-count direction fill-mode play-state;
name:之前定义的动画的名字
duration:动画执行时间
timing-function 设置动画如何完成 默认值为ease(规定从慢速开始,然后变快,然后变慢),linear匀速,ease-in(慢速开始),ease-out(慢速结束),ease-in-out(慢速开始慢速结束)
delay:设置动画在启动前的延迟间隔
count:设置动画的播放次数,设置为infinite表示无限播放
direction:定义是否应该反向播放动画(normal默认值,reverse反向播放,alternate奇数次正向偶数次反向,alternate-reverse奇数次反向,偶数次正向) 如果count设置为1次的话,这个属性是不会起作用的。
fill mode 规定当前动画不播放时的元素样式(none默认值,forwards动画结束后,将应用最后的属性,backwords 结束后应用之前的属性,both )
play-state 指定动画正在运行或是已暂停(pause动画暂停,running动画进行)
车轮滚动效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
position:relative;
width:100px;
height:100px;
overflow:hidden;
word-wrap:break-word;
text-align:center;
animation:myAnimation 6s ease 1s infinite alternate;
border-radius:50%;
background:radial-gradient(white,grey 50%,black 80%);
}
@keyframes myAnimation{
0%{
left:0px;
background:radial-gradient(white,grey 50%,black 80%);
}
70%{
left:2%;
transform:rotate(1080*5deg);
background:radial-gradient(yellow,orange 50%,red 80%);
}
100%{
left:97%;
transform:rotate(10800deg);
background:radial-gradient(yellow,orange 50%,red 80%);
}
}
</style>
</head>
<body>
<div id="tf3">Talk is cheap,show me the code;</div>
</body>
</html>