CSS精简笔记高级技巧

目录

• 一、2d转换


• 
  
  
  
  • 2.1 基本应用
  
  
  
  


• 二、3d转换


• 三、动画


• 
  
  
  
  • 3.1 常用属性
  
  
  • 3.2 动画示例
  
  
  
  


• 四、适配不同屏幕


• 
  
  
  
  • 4.1 监控屏幕尺寸
  
  
  • 4.2 适用单位
  
  
  • 4.3 配合使用
  
  
  
  

一、2d转换

特点&＃xff1a;未指定&＃xff0c;则2d变换不脱标

2.1 基本应用

• 移动
  
  
  
  • 单向写法&＃xff1a;transform:translateX(100px);&＃xff0c;X正方向&＃xff1a;向右&＃xff1b;Y正方向&＃xff1a;向下
  
  
  • 简写法&＃xff1a;transform: translate(50%, 50px);&＃xff0c;50%相对于样式所在盒子的高度
  
  
  
  


• 旋转&＃xff1a;transform: rotate(30deg);&＃xff0c;相对transform-origin旋转&＃xff0c;坐标系也旋转


• 缩放&＃xff1a;transform: scale(0.5, 2);&＃xff0c;相对transform-origin缩放&＃xff0c;X向比例0.5&＃xff0c;Y向比例2&＃xff0c;可只写一个则双方向同


• 转换中心点&＃xff1a;transform-origin: 100% 100px;

• 封装子盒子们&＃xff1a;transform-style: preserve-3d;&＃xff0c;需给父盒子设置此属性&＃xff0c;子盒子们组合成的立体才会显示正常


• 视距&＃xff1a;perspective: 500px;&＃xff0c;需给父盒子设置此属性&＃xff0c;子盒子有关Z轴的3d才会有效果&＃xff0c;原理如下图(视距为d,z轴为z)


• 移动
  
  
  
  • 单向写法&＃xff1a;transform:translateZ(100px);&＃xff0c;Z正方向&＃xff1a;向屏幕外
  
  
  • 复合写法&＃xff1a;transform:translate3d(100px,100px,100px);,3个参数不可省
  
  
  
  


• 旋转
  
  
  
  • 单向旋转&＃xff1a;transform: rotateX(180deg);&＃xff0c;绕X轴正向旋转&＃xff0c;左手法则&＃xff1a;大拇指指向X轴正向
  
  
  • 复合写法&＃xff1a;transform: rotate3d(0,0,1,180deg);&＃xff0c;前三个为方向矢量&＃xff0c;确定旋转所绕的轴&＃xff0c;左手法则
  
  
  
  

3.1 常用属性

• 速度曲线
  
  
  
  • 功能&＃xff1a;调节动画运动速度
  
  
  • 可选项&＃xff1a;ease&＃xff1a;低高低&＃xff0c;linear&＃xff1a;匀速&＃xff0c;ease-in-out&＃xff1a;钟摆速率&＃xff0c;steps(n)&＃xff1a;从始到终定格播出&＃xff0c;n为步数
  
  
  
  

动画简写&＃xff1a;

• 写法&＃xff1a;animation: move 3s infinite alternate forwards 1s;&＃xff0c;前两个必须选


• 冲突项&＃xff1a;靠后秒数为animation-delay不包含animation-play-state&＃xff0c;结束帧位不与循环次数、进行方向同用


• 多个动画&＃xff1a;animation:动画1&＃xff0c;动画2&＃xff1b;

3.2 动画示例

• 实现效果&＃xff1a;盒子从0,0到1000,1000&＃xff0c;往复运动&＃xff0c;无限循环

  
  



• 定义关键帧

  &＃064;keyframes move { /* 动画名称为move */
0% { /* 动画初始帧 */
transform: translate(0, 0); /* 属性初始值 */
}
100% { /* 动画终止帧 */
transform: translate(1000px, 1000px); /* 属性结束值 */
}
}

  




• 使用动画

  .movie {
width: 50px;
height: 100px;
background-color: black;
animation-name: move; /* 可以简写 */
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.movie:hover {
animation-play-state: paused; /* 鼠标悬停则动画暂停 */
}

  

  ---

  
  



• 实现效果&＃xff1a;伪元素以盒子左下角为轴滑入#head盒子内

  
  



• 代码

  


  

4.1 监控屏幕尺寸

• 写法解析
  
  
  
  • 屏幕监视器&＃xff1a;&＃064;media screen
  
  
  • 屏幕宽度区间&＃xff1a;(max-width:800px)&＃xff0c;表示小于800px的宽度适用以下大括号css
  
  
  • 关系词&＃xff1a;and、not、or&＃xff0c;取交集、非集、并集
  
  
  
  

  注意&＃xff1a;后面的监控器会覆盖前面的监控器相同区间

  
  

  
  


• 效果&＃xff1a;class&＃061;‘father’的div在屏幕宽度0&＃xff5e;800&＃xff1a;黑背景&＃xff0c;800&＃xff5e;1000:黄背景&＃xff0c;1000以上&＃xff1a;蓝背景


• 代码示例

  /* .father 为盒子的样式 */
&＃064;media screen and (max-width:800px){
.father {
background-color:black;
}
}
&＃064;media screen and (min-width: 800px) and (max-width:1000px){
.father {
background-color:yellow;
}
}
&＃064;media screen and (min-width: 1000px){
.father {
background-color:blue;
}
}

  

4.2 适用单位

• em:为父盒子文字尺寸&＃xff0c;可调整父盒子div {font-size:15px;}调整1em


• rem&＃xff1a;为浏览器html文字尺寸&＃xff0c;root em的缩写&＃xff0c;可调整html {font-size:15px;}调整1rem
  
  

  若屏幕尺寸确定&＃xff0c;通过调整决定rem尺寸的html的font-size&＃xff0c;可以调整一行可以放置的文字数量

  
  

  
  


• 工具&＃xff1a;vs code中的cssrem插件&＃xff0c;会自动转换px到rem&＃xff0c;默认1rem&＃061;16px&＃xff0c;适配iPhone6需改为75px

4.3 配合使用

• 效果&＃xff1a;随着屏幕尺寸变化&＃xff0c;div盒子中的A大小也会变化

  
  



• 原理&＃xff1a;使页面与显示屏幕尺寸产生联动缩放&＃xff0c;前提&＃xff1a;子盒子与父盒子关联&＃xff0c;需要确定的像素值的元素用rem代替&＃xff0c;则实际与html的font-size关联&＃xff0c;即间接与显示屏幕联动

  
  



• 代码

  
  
  
  

  • 常规代码

    

/* 以下代码&＃xff0c;使单位与1rem绑定&＃xff0c;其他属性与浏览器宽度绑定 */


    

  
  

  • index.html中标签中增加代码

    /* 此代码控制1rem大小&＃xff0c;与浏览器宽度联动 */


    

  
  
  
  

  实现方案二&＃xff1a;flexible &＃043; rem&＃xff0c;有空研究

  
  

  
  

上一篇&＃xff1a;CSS精简笔记&＃xff08;三&＃xff09;------盒子模型

本文地址：https://blog.csdn.net/chucksun0426/article/details/110957611