1. @keyframes
使用
@keyframes 动画名 { from { // 开始要的操作的帧动画 background: #fff; } to { // 结束要的操作的帧动画 background: #e74c3c; } }
2.调用keyframes
动画
标签名 { animation: 动画名 执行时间; }
列如
main { animation: hd 2s; }
2.1 元素的放大和缩小
transform
: scale(放自身大的倍数)
div { transform: scale(2); }
2.3 设置绑定多个帧动画
-
不能直接写到
animation
里面,不然只会实现最后一个帧动画。 -
使用
animation-name
绑定多个帧动画
div { animation: 4s infinite; animation-name: bg,translate; }
2.3.2 设置缩放-transform
transform: scale(0);
-
使用后导致本div消失,原理是设置缩放大小为最小的0
2.4 设置动画结束后停止,不会到初始状态
-
不可以和无限动画循环(infinite)连用
div { animation-fill-mode: forwards; /* 可以简写到animation里面 */ animation: scale 2s forwards; }
2.5 设置动画执行的次数
div { // animation-iteration-count: 执行的次数,第二个动画执行的次数; animation-iteration-count: 2; }
-
aria-hidden="true"是什么意思
-
这一套协定是w3和apple为了残疾人士无障碍使用网站
例如视障人士, 在读到这一句 aria-hidden="true 的时候, 就会自动忽略跳过
-
<i aria-hidden="true"><i>
2.6 设置动画播放顺序
li:nth-child(1)>i{ /* 正常播放动画 */ animation-direction: normal; } li:nth-child(2)>i{ /* 翻转动画 */ animation-direction: reverse; } li:nth-child(3)>i{ /* 轮流动画 */ animation-direction: alternate; } li:nth-child(3)>i{ /* 多次循环平滑过渡动画 */ animation-direction: alternate-reverse; }
/* filter模糊滤镜,范围25px */ filter: blur(5px); /* animation-delay延迟2s执行动画 */ animation-delay: 2s;
2.7 帧动画-细调
normal 原始状态到原始状态,backword 起始帧到原始状态 , forward 起始状态到结束帧 , both 起始帧到结束帧
1.方法一
/* 设置一开始消失(缩放到0),设置保持结束帧(缩放100%) */ transform: scale(0); animation-fill-mode: forwards;
2.方法二
/* 立即应用第一个关键帧中定义的值 */ animation-fill-mode: backwards;
2.8 贝塞尔曲线动画
li:nth-child(1) { /* 过渡的帧 */ animation-timing-function: ease; } li:nth-child(2) { /* 过渡的帧,先慢到快 */ animation-timing-function: ease-in; } li:nth-child(3) { /* 过渡的帧,先快再到慢 */ animation-timing-function: ease-out; } li:nth-child(4) { /* 过渡的帧,中间快两边慢 */ animation-timing-function: ease-in-out; } li:nth-child(5) { /* 过渡的帧,线性 */ animation-timing-function: linear; } li:nth-child(6) { /* 自定义贝赛尔曲线, */ /* https://cubic-bezier.tupulin.com/#cubic-bezier(0.44,-0.32,0.42,1.19) */ animation-timing-function: cubic-bezier(0.44, -0.32, 0.42, 1.19); }
2.9设置背景颜色和文本一致
/* currenColor获取文本的颜色 */ background-color: currentColor;
2.10 用伪类+阴影实现加载小点
button::after { content: ""; width: 3px; height: 3px; display: inline-block; /* box-shadow: 3px 0 0 currentColor, 9px 0 0 currentColor, 15px 0 0 currentColor; */ animation: hd 1s infinite; } @keyframes hd { from { box-sizing: none; } 30% { box-sizing: 3px 0 0 currentColor; } 60% { box-sizing: 3px 0 0 currentColor, 9px 0 0 currentColor; } 90% { box-shadow: 3px 0 0 currentColor, 9px 0 0 currentColor, 15px 0 0 currentColor; } }
2.11 进步动画规则
/* 按照4次,从开始就跑 */ animation-timing-function: steps(4,start); /* 动画开始后再跑 */ animation-timing-function: steps(4,end);
2.12 暂停动画属性
div:hover::before { /* 鼠标移动到div时,暂停动画 */ animation-play-state: paused; }
2.13 开启动画属性
main:hover div::before { /* 移动div上,开启动画 */ animation-play-state: running; }
3. 栅格化布局
/* 栅格布局 */ display: grid; /* 划分三行,上10vh,中间自适应,下10vh */ grid-template-rows: 10vh 1fr 10vh;
/* 弹性盒模型,按列排列 */ display: flex; flex-direction: column;
/* 栅格布局,自适应,且只有一个 */ grid-template: 1fr/1fr;
/* 栅格化布局,1行5列自适应 */ display: grid; grid-template: 1fr/repeat(5,1fr); /* 间距 */ gap: 10px;