前端动画效果常见用法/API总结

前端动画效果常见用法总结

1. box-shadow（css）

box-shadow: h-shadow v-shadow blur spread color inset;

• h-shadow 必需。水平阴影的位置。允许负值
• v-shadow 必需。垂直阴影的位置。允许负值
• blur 可选。模糊距离
• spread 可选。阴影的尺寸
• color 可选。阴影的颜色。请参阅 CSS 颜色值
• inset 可选。将外部阴影 (outset) 改为内部阴影

通过将box-shadow设置为inset，可以将外阴影变成内阴影，可以通过动画将动画效果和样式反映在元素内部

2. classList（js）

element.classList

可以获取元素节点的class属性值类数组

• add(class1) 向原有classList中添加class1
• contains(class) 返回布尔值，判断指定的类名是否存在
• remove(class1) 移除元素中一个或多个类名
• item(index) 返回元素中索引值对应的类名。索引值从 0 开始，如果索引值在区间范围外则返回 null
• length（属性） 返回类列表中类的数量

3. css伪类（css）

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */