JS进阶案例知识点

JS特效
一、自定义动画
animation: flash 0.5s alternate infinite;
//名为flash的动画0.5s执行一次，并且轮流反复执行
//动画：@keyframes上绑定的动画名称，完成动画所花时间，动画播放次数，是否轮流反向播放动画

/自定义动画/
@keyframes flash {
0%{opacity: 0;}
100%{opacity:1}
}
//在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
// 基本格式：
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
//在 @keyframes 中创建动画时，还需要使用animation把它捆绑到某个选择器，否则不会产生动画效果。并且规定至少两项 CSS3 动画属性，才可将动画绑定到选择器，即：动画的名称、动画的时长

二、CSS3 transform 属性

1. transform实现2D转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜。

2. transition设置动画的过渡属性，包括过渡名称、过渡时间；

   	/* transform: scale(3,3) rotate(180deg) !important;*/
   	/* 	transition: all 1s; */