序言
为什么会用css动画呢
通过CSS3过渡,我们可以在不使用 Flash 动画或 JavaScript 的情况下,
使元素从一种样式变换为另一种样式时为元素添加效果。
css动画可以做很多特效,特点就是体积小,与js相比不需要操作DOM,下面正式讲解下常用对的css的动画属性。
transition
规定应用过渡效果的属性名称 transition-property
属性值为 指定的css属性名称,默认值为 all 全部,none 没有
注:仅属性值为数值型或颜色的属性可以应用过渡效果,其他属性不行
transition-property: all;
规定过渡效果完成所需要花费的时间--完成时间 transition-duration
属性值以秒(s)或毫秒(ms)计,默认值为 0
transition-duration: 5s;
规定过渡完成的时间曲线(速度曲线) transition-timing-function:
属性值: ease 默认值,慢快慢 ease-in 慢开始 ease-out 慢结束
ease-in-out 慢开始和慢结束 linear 匀速
cubic-bezier(0,1.51,0,1.28);
transition-timing-function: linear;
规定出发开始以后多久开始执行过渡效果---延时时间 transition-delay
属性值以秒(s)或毫秒(ms)计,默认值为 0
属性值可以规定负值,负值表示提前多少时间进入到过渡,会将前几秒错过
transition-delay: 2s;
通过transition属性规定过渡的简写
简写时属性值的顺序不分先后,但是针对时间,默认认为写在前的完成时间,后的为延时时间
简写时某个值取默认值时可以省略不写,但是必须规定完成时间,只存在一个时间则默认为完成时间
transition: all 5s linear 2s;
transition: 2s linear 5s all;
transition: 5s;
举个简单的例子
#box {
width: 500px;
height: 400px;
background: yellow;
border: 20px solid orange;
font: 30px/50px "";
color: blue;
transition:all 1s
}
#box:hover {
width: 800px;
font: 50px/80px "";
border-style: double;
background: green;
}
<div id="box">
周杰伦不知道你还能不能坚持住,你感觉自己要坚持不住的时候,叫我,我来扛伤害,尤其有人勾引你的时候。
</div>
这段代码的含义为当鼠标经过div元素的时候 宽度变成800px 字体也变大了,背景也变了
transform
通过CSS3转换,能够对元素进行移动、缩放、转动、拉伸,转换是使元素改变形状、尺寸和位置的一种效果。
实现转换的属性是 transform
transform 针对元素进行 2D 或 3D 的转换
位移:
translate(x,y) 指定元素在x轴和y轴的位移
第一个参数值表示在x轴(水平)上的位移值
第二个参数值表示在y轴(垂直)上的位移值
translateX(x) 指定元素在x轴的位移
translatey(y) 指定元素在y轴的位移
参数值: length(数值+单位) %(根据元素自身的宽高计算的百分比值)
x轴位移,正值向右发生位置移动,负值向左发生位置移动
y轴位移,正值向下发生位置移动,负值向上发生位置移动
transform: translateX(100px) translateY(-50px);
rotate(?deg) 指定元素在平面上的旋转角度
参数值: ?deg(+-?deg)
角度值为 正值 元素 顺时针旋转
角度值为 负值 元素 逆时针旋转
缩放:
scale(x,y) 指定元素在x轴和y轴的缩放
第一个参数值表示在x轴(水平)上的缩放值
第二个参数值表示在y轴(垂直)上的缩放值
可以给到一个参数值,此值表示x轴和y轴都按照此值放大或缩小
scaleX(x) 指定元素在x轴的缩放
scaleY(Y) 指定元素在y轴的缩放
参数值: 数字,表示与元素原本大小的倍数值
默认值为1,原本大小
大于1的值都表示放大的倍数值
小于1但是大于0表示的是缩小的倍数值
为0,缩小到没有
可以规定负值,表示的是反向放大缩小的倍数值
用得少
拉伸(倾斜):
skew(x,y) 指定元素在x轴和y轴的拉伸倾斜
第一个参数值表示在x轴(水平)上的拉伸值
第二个参数值表示在y轴(垂直)上的拉伸值
skewX(x) 指定元素在x轴的拉伸倾斜
skewY(y) 指定元素在y轴的拉伸倾斜
参数值: ?deg(+-?deg)
x轴正值将元素的左上角和右下角沿着x轴拉伸角度使元素产生倾斜
x轴负值将元素的右上角和左下角沿着x轴拉伸角度使元素产生倾斜
y轴正值将元素的左上角和右下角沿着y轴拉伸角度使元素产生倾斜
y轴负值将元素的右上角和左下角沿着y轴拉伸角度使元素产生倾斜
transform-origin 设置改变转换元素的中心点原点
第一个属性值:x轴坐标点
left
center
rigth
length
%
第二个属性值:y轴坐标点
top
center
bottom
length
%
写动画的大概思路就是
1 写好初始状态
2 写好最终状态
3 写上需要过渡的属性+过渡时间+过渡的速度(匀速还是先快后慢还是先慢后快 还有贝塞尔曲线)
举个例子吧
附上源代码(直接复制可运行)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
html{
height: 100%;
}
body{
height: 100%;
background: #ccc;
display: flex;
justify-content: space-around;
align-items: center;
}
a{
width: 150px;
height: 150px;
border: 10px groove #fff;
border-radius: 50%;
opacity: .3;
position: relative;
z-index: 10;
}
a:nth-of-type(1){
background: url(./过去式/a1.jpg) no-repeat center;
}
a:nth-of-type(2){
background: url(./过去式/b1.jpg) no-repeat center;
}
a:nth-of-type(3){
background: url(./过去式/c1.jpg) no-repeat center;
}
a:nth-of-type(4){
background: url(./过去式/d1.jpg) no-repeat center;
}
a:nth-of-type(5){
background: url(./过去式/e1.jpg) no-repeat center;
}
a:hover{
opacity: 1;
}
img{
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
opacity: 0;
transition: all 3s linear;
}
img:nth-of-type(1){
/* top: -100%; */
transform: translateY(-100%);
}
img:nth-of-type(1):target{
opacity: 1;
transform: translateY(0);
}
img:nth-of-type(2){
/* left: -100%; */
transform: translateX(-100%);
}
img:nth-of-type(2):target{
opacity: 1;
transform: translateX(0);
}
img:nth-of-type(3):target{
opacity: 1;
transform: rotate(360deg);
}
img:nth-of-type(4){
transform: scale(.7);
}
img:nth-of-type(4):target{
opacity: 1;
transform: scale(1);
}
img:nth-of-type(5){
transform: scale(1.4);
}
img:nth-of-type(5):target{
opacity: 1;
transform: scale(1);
}
</style>
</head>
<body>
<a href="#aaa"></a>
<a href="#bbb"></a>
<a href="#ccc"></a>
<a href="#ddd"></a>
<a href="#eee"></a>
<img src="./过去式/a.jpg" id="aaa">
<img src="./过去式/b.jpg" id="bbb">
<img src="./过去式/c.jpg" id="ccc">
<img src="./过去式/d.jpg" id="ddd">
<img src="./过去式/e.jpg" id="eee">
</body>
</html>
使用到一个锚点链接 img的话随便在网上找几张就好了