css--c3 媒体查询 动画

本文介绍了CSS3中的媒体查询技术,用于针对不同屏幕尺寸设置不同样式。同时,详细讲解了transform属性,包括translate()、rotate()、scale()和skew()的使用方法。此外,还探讨了过渡动画和自定义动画的实现,包括transition和@keyframes的语法及应用实例。

2019.7.21

媒体查询

针对不同屏幕设置不同样式
在这里插入图片描述
transform
移动:translate()
旋转:rotate()
缩放:scale()
倾斜:skew()

transform:translate(水平位移,垂直位移)
值为正值,水平向右,垂直向 下,负值,水平向左,垂直向上
在这里插入图片描述
transform:rotate(旋转)
transform-origin:旋转参考点 (left right top bottom 百分比 精确值)
语法:
transform-origin(x坐标,y坐标)
在这里插入图片描述

transform:scale(缩放) 值大于1,表示放大 值在0-1之间表示缩小,一个值表示水平垂直都缩放,2个值表示水平和垂直方向
在这里插入图片描述
transform:skew(倾斜) 表示沿X轴 和Y轴进行倾斜得到的效果
在这里插入图片描述

过渡动画
过度:transition:属性 时间 过度方式;

属性:具体属性值,transform,all(全部)
时间:s 秒
过度方式:
linear 匀速
ease 慢 快 慢
ease-in 以慢开始
ease-out 以慢结束
ease-in-out 以慢开始和结束

变形综合一起使用:
transform:rotate() translate() 注:中间用空格间隔就可以
在这里插入图片描述
自定义动画

步骤:
定义动画:
@keyframes name{
0%{}

100%{}
}

在这里插入图片描述
调用:

animation:name 1s linear 2s infinite;

name:定义的动画名称
1s动画执行的时间
linear动画的运行方式
2s 表示动画延迟时间
infinite 表示循环

语法:animation:动画名称 运行时间 运行方式 延迟时间 循环次数 是否逆向 不播放时应用样式 是否暂停

运行方式:linear ease ease-in ease-in-out ease-out
循环:数字或infinite(无限循环)
是否逆向:alternate
不播放时应用样式:forward 动画结束后停止到动画结束时的状态,(不恢复回去)
是否暂停: paused/running

# 系统前端架构图 ```mermaid graph TD A[前端架构] --> B[技术栈] A --> C[页面结构] A --> D[响应式设计] A --> E[组件化开发] B --> B1[HTML5] B --> B2[CSS3] B --> B3[JavaScript] B --> B4[Bootstrap框架] C --> C1[布局模板] C --> C2[业务模块] C --> C3[公共组件] C1 --> C1a[layout.html] C2 --> C2a[考勤管理] C2 --> C2b[部门管理] C2 --> C2c[员工管理] C2 --> C2d[薪资管理] C3 --> C3a[导航栏] C3 --> C3b[侧边栏] C3 --> C3c[页脚] D --> D1[移动端适配] D --> D2[平板适配] D --> D3[桌面端适配] E --> E1[UI组件] E --> E2[业务组件] E --> E3[工具组件] E1 --> E1a[Bootstrap组件] E1 --> E1b[自定义组件] E2 --> E2a[表单组件] E2 --> E2b[列表组件] E2 --> E2c[图表组件] E3 --> E3a[工具函数] E3 --> E3b[API封装] style A fill:#f9f,stroke:#333,stroke-width:4px style B fill:#bbf,stroke:#333,stroke-width:2px style C fill:#bfb,stroke:#333,stroke-width:2px style D fill:#fbb,stroke:#333,stroke-width:2px style E fill:#fbf,stroke:#333,stroke-width:2px ``` ## 架构说明 ### 1. 技术栈 - **HTML5**:页面结构 - **CSS3**:样式和动画 - **JavaScript**:交互逻辑 - **Bootstrap框架**:响应式布局和UI组件 ### 2. 页面结构 - **布局模板**:基于`layout.html`的统一布局 - **业务模块**: - 考勤管理 - 部门管理 - 员工管理 - 薪资管理 - **公共组件**:导航栏、侧边栏、页脚等 ### 3. 响应式设计 - **移动端适配**:针对手机屏幕优化 - **平板适配**:针对平板设备优化 - **桌面端适配**:针对大屏设备优化 ### 4. 组件化开发 - **UI组件**: - Bootstrap组件库 - 自定义组件 - **业务组件**: - 表单组件 - 列表组件 - 图表组件 - **工具组件**: - 工具函数 - API封装 ## 技术特点 1. 采用Bootstrap框架实现响应式布局 2. 组件化开发,提高代码复用性 3. 多端适配,确保良好的用户体验 4. 模块化设计,便于维护和扩展 5. 统一的UI风格和交互规范
05-14
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值