标签：动画 26 浏览器 2021.8 ease transition width animation CSS
CSS高级
transform 变形
对元素进行平移、旋转、缩放、倾斜
translate
rotate
scale
skew
transform 不会对其他元素布局产生影响
transform-origin:0 0; //以左上角为中心
多次的变形指令是顺序的，会改变其坐标中心，放大两倍后的平移，会使得平移变成双倍的平移。
transition 过渡
指定从一个状态到另一个状态时如何过渡
动画的意义：告诉用户发生了什么
transition 属性
transition-property 指定哪个变换需要过渡
transition-duration 过渡的时长
transition-timing-function 变换是匀速的还是先快后慢先慢后快
transition-delay 变换是否有延迟
transition-timing-function
linear
ease
ease-in
ease-out
ease-in-out
steps(4)
CSS Animation 可以实现更复杂的样式变化效果
使用方法：
定义关键帧样式
应用动画到元素上
animation 属性
animation-name 关键帧名字
animation-duration 持续时间
animation-timing-function 关键帧之间的过渡快慢
animation-delay 动画播放的延迟
animation-iteration-count 动画播放的次数
animation-direction 动画播放方向（正序倒序）
动画效果示例，这是一个下箭头
animation-direction: normal / reverse / alternate
响应式设计：同一个页面可以适应不同屏幕大小设备的设计方案
在head标签里面添加
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
设置好max-width: 100%; 即可
background-size: contain; //不会丢失部分边角，完全装进去
background-size: cover; //图片完全覆盖容器，会有折损
media query 针对不同的屏幕尺寸，应用不同的样式
在宽度至少是480px的媒体，才会应用改样式
@media screen and (min-width: 480px) {
.box {
font-size: 16px;
}
}
可以查询的media
width / height //宽高
device-width / device-height
device-pixel-ratio //设备的像素比
orientation //设备是横屏还是竖屏
示例 宽度较小时 导航栏纵向排列
小于320px时，使用400px的图，小于640px时，使用800px的图，其他情况用1200px的图。当浏览器不支持媒体查询时，使用默认的URL
改变根元素的字体大小以批量修改全局的大小。
处理CSS兼容性
了解浏览器支持情况
不同浏览器使用不同的样式
浏览器hack原理 - 层叠
利用同一个属性，后面书写的值覆盖前面书写的值
p {
display: table;
display: flex;
}
这样就能在浏览器支持flex的情况下使用它，若不支持则无法执行，只能去执行table的那一行。
浏览器hack原理 - 条件注释
浏览器hack原理 - 浏览器怪癖
个人感觉这东西少用，不太规范，且太细节了，影响开发和维护的效率。
标签：动画,26,浏览器,2021.8,ease,transition,width,animation,CSS 来源： https://www.cnblogs.com/Fung-JTY/p/15192191.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。