animation属性-动画
1.IE10,Firefox和Opera支持animation属性,Safari和Chrome用-webkit-animation替换。
2.animation有以下几个值。
值 | 作用 |
---|---|
animation-name | 规定Keyframe要调用的名称 |
animation-duration | 动画完成所需时间(s或ms) |
animation-timing-function | 动画执行的速度曲线 |
animation-delay | 开启动画的延迟 |
animation-iteration-count | 播放次数 |
animation-direction | 是否轮流反向播放动画 |
3.动画执行速度曲线默认是ease,其是低速➡加速➡变慢三阶段完成动画,还有以下五组值。
值 | 作用 |
---|---|
linear | 全程速度相同 |
ease-in | 全程慢➡快 |
ease-out | 全程快➡慢 |
ease-in-out | 全程慢➡快➡慢 |
cubic-bezier(n,n,n,n) | 四个参数可设置0~1的数值 |
4.动画的播放次数默认是1,可通过animation-iteration-count设置指定次数或设置为infinite(无限播放)。
5.动画默认是正常播放的,可通过设置animation-direction:alternate来实现轮流反向播放。
6.示例:把一个div从0位置向下移动,并在此过程逐渐到中间的时候变为紫色,如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
div{
width: 60px;
height: 60px;
position: relative;
background-color: greenyellow;
animation-name: animation;
animation-duration: 5s;
-webkit-animation:animation 5s infinite; /*兼容 */
animation-timing-function: ease-in;
animation-iteration-count: infinite;
/*animation: animation 5s ease-in infinite; 可写在一起 */
}
@keyframes animation{
from {
left: 0px;
top: 0px;
}
to{
left: 200px;
top: 300px;
}
50%{
background-color: rebeccapurple;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
transform属性-旋转,缩放等
1.transform属性允许实现对元素的旋转,缩放,移动和倾斜等功能。
2.各值如下表格所示:
值 | 作用 |
---|---|
none | 默认值不进行任何转换 |
translate(x,y) | 定义2D转换 |
translate3d(x,y,z) | 定义3D转换 |
translate(x) | 只对X值转换,其余以此类推 |
scale(x,y) | 实现2D的缩放 |
scale3d(x,y,z) | 实现3D的缩放 |
scale(x) | 只对x轴进行缩放,其余y,z同理 |
rotate(角度) | 定义2D旋转,参数给一个角度(如9deg) |
rotate3d(x,y,z,角度) | 3D旋转 |
rotateX(角度) | 沿着X轴3D旋转,Y,Z同理 |
skew(x角度,y角度) | 按x角度,y角度倾斜 |
skewX(角度) | 沿着x轴2D倾斜,Y同理 |
perspective(n) | 3D转换元素定义透视图 |
3.旋转缩放案列,如下:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
div{
width: 300px;
height: 200px;
position:absolute;
left: 500px;
top: 200px;
background-color: greenyellow;
/* 顺时针旋转60度 */
transform: rotate(60deg);
/*
逆时针时针旋转60度
transform: rotate(-60deg);
*/
/*
缩放,在x方向缩放10倍,在y轴方向缩放3倍
transform: scale(10,3);
*/
}
</style>
</head>
<body>
<div></div>
</body>
filter属性-滤镜
1.各值预览:
值 | 作用 |
---|---|
none | 默认值无效果 |
blur(像素) | 设置高斯模糊,像素参数越大越模糊 |
brightness(百分比) | 通过线性乘法调节亮度,0%全黑,100%是无变化,再往上就变亮了 |
contrast(百分比) | 对比度调节,0%全变灰色,100%无变化,同上 |
drop-shadow(有五个参数) | 设置阴影效果,前两个设置x,y方向偏移量,其余可选 |
grayscale(百分比) | 灰度调节,0%无变化,100%灰色照片(大于100%同效果) |
hue-rotate(角度) | 0deg,360deg无变化,0~360度是一个周期,所以720deg==360deg |
invert(百分比) | 反转输入图像(反转颜色),0%无变化,100%全部反转(大于100%同效果) |
opacity(百分比) | 设置透明度,0%完全透明,100%无变化其余同上类似 |
saturate() | 饱和度设置,0%完全不包含,当大于100%时饱和度比原图变高 |
sepia(百分比) | 转换为深褐色,0%无变化,100%完全深褐色,值取(0%~100%) |
url() | 接收一个XML文件 |
initial | 设置为默认属性值 |
inherit | 从父元素那里来继承filter滤镜属性 |
2.实例应用,如下:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.a,.b{
width: 300px;
height: 200px;
position:absolute;
left: 500px;
top: 300px;
background-color: greenyellow;
}
.a{
/* 高斯模糊30px */
filter: blur(30px);
}
.b{
top: 10px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
End
留存备忘~
来源:CSDN
作者:嗨~辰
链接:https://blog.csdn.net/weixin_44228006/article/details/104095917