目录
一、css动画
1、动画原理及2D变换
①平移
/* transform: 变换,用于描述物体的位置旋转缩放
translate: 平移
第一个参数 水平平移量 右为正方向
第二个参数 竖直平移量 下为正方向
transform: translate(px, px); 第一个为X轴,第二个为Y轴
transform: translateX(px);指定为X轴平移
transform: translateY(px);指定为Y轴平移
transform: translateZ(px);指定为Z轴平移
②旋转
③缩放
④倾斜
2、过度动画
①:transition过渡动画 ②:通过class来控制过渡动画 ③:transition动画事件
3、3d变换和animation动画
①:animation动画 /* 参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation */
第二种方式
②:动画的播放和暂停
③:使用class控制animation动画
④:3d变换与3d立方体
主盒子设置 :transform-style: preserve-3d;
4、渐变色分栏布局与响应式
①:属性选择器
②:伪类选择器
③:渐变色
④:分栏布局
⑤:响应式布局
响应式是什么?
当某个事情发生后,立即做出反应就叫响应式
什么是页面的响应式?
页面的元素样式会根据页面的宽度做出变化
为什么要使用页面响应式
为了让同一个页面能够适配不同的设备
如何实现响应式?
使用媒体查询,来实现响应式布局
媒体查询的作用:当媒体查询条件成立时,将应用花括号中代码块的样式
语法:@media media-type and (condition1) and (condition2) ...