HTML5--(3)过渡+动画+颜色+文本

2024-10-12 19:37:06

一.过渡transition

transition-property指定属性名称 （如width、height、background-color、内外边距）
- all 所有属性都将获得过渡效果(默认)

attr 过渡效果的CSS属性名称列表,列表以逗号分隔
none 没有属性会获得过渡效果

transition-duration过渡时间 3s (默认慢快慢)
transform:rotate(360deg) 旋转

transform:scale(1.5) 变大缩放

transition-delay延迟事件,多久之后再开始执行动画
transition-timing-function运动形式

linear 匀速
ease 慢块慢(默认)
ease-in 慢入
ease-out 慢出
ease-in-out 慢入慢出
cubic-bezier 贝塞尔曲线(x1,y1,x2,y2)
1. x1起点在x轴的坐标为0-1
2. y1起点在y轴的坐标不限
3. x2终点在x轴的坐标为0-1
4. y2终点在y轴的坐标不限
起点对应的 y=x 为匀速,y>x 为加速,y<x 为减速
终点对应的 y=x 为匀速,y>x 为减速,y<x 为加速
参考:http://matthewlein.com/ceaser/

复合样式transition:property
duration delay timing-function;
多属性写法transition:width
2s,height 4s;

二.动画animation

注意:animation必须与@keyframes一起使用

animation-name动画名称

none 不引用任何动画名称

animation-duration动画执行时间
animation-delay动画效果延迟时间
animation-timing-function动画速度曲线

liner匀速
ease慢块慢(默认)
ease-in慢入
ease-out慢出
ease-in-out慢入慢出
cubic-bezier贝塞尔曲线(x1,y1,x2,y2)

animation-iteration-count动画执行循环次数

infinite 无限循环
默认 1次

animation-direction动画是否反响运动

normal 默认正常方向
reverse 反方向运动
alternate 动画先正后反方向运行
alternate-reverse 先反后正方向运行

animation-play-state动画执行状态

running 运动默认
paused 暂停

animation-fill-mode动画对象时间之外的状态

none 默认原始状态>动画>原始状态
forwards 原始状态>动画>停在动画帧100%
backwards (忽略原始状态)进入动画帧0%>动画>原始状态
both (忽略原始状态)进入动画帧0%>动画>停在动画帧100%

三.规定动画帧@keyframes

@keyframes animationname{}

@keyframe animationname{ 动画名字随便取
keyframes-selector{css-styles}
keyframes-selector{css-styles}
}

animationname animation的名称
keyframes-selector 动画时间百分比
1. 合法值:0-100% | from
to
css-styles 一个或多个合法的css样式属性

@keyframes run{

0%{width:0px,background:red;}

100%{width:50px,background:green;}

}

四.新增颜色模式

rgba(R,G,B,A)透明颜色值
HSL

H:Hue(色调)
1. 0(或360)表示红色
2. 120绿色,240蓝色,取值为:0-360
S:Saturation(饱和度)
1. 取值为:0%-100% 值越大颜色越纯
L:Lightness(亮度)
1. 取值为:0%-100% 变暗<50%>变亮

background:hsl(360,100%,50%);

HSLA

A:Alpha(透明度) 取值0-1之间

currentcolor 当前色 (取当前给定的字体颜色如果没有字取color)

五.文字阴影text-shadow

text-shadow:x y blur color;
1. h-shadow 必须,水平阴影的位置,可以为负值
2. v-shadow 必须,垂直阴影的位置,允许为负值
3. blur 可选,模糊半径（可写可不写）
4. color 可选,阴影的颜色（可写可不写不写阴影就是字体颜色）
阴影叠加
text-shadow:2px 2px 0px red,2px 2px 4px green;

六.文字描边

text-stroke-width 谷歌不支持(需要加兼容前缀-webkit-text-stroke-width)
设置或检索对象中的文字的描边厚度
text-stroke-color
设置或检索对象中的文字的描边颜色
text-stroke:text-stroke-width
text-stroke-color文字的描边

最新文章

热门文章