CSS精简笔记---高级技巧

目录

• 一、2d转换
• 二、3d转换
• 三、动画
• 四、适配不同屏幕

一、2d转换

特点：未指定，则2d变换不脱标

2.1 基本应用

• 移动
  • 单向写法：transform:translateX(100px);，X正方向：向右；Y正方向：向下
  • 简写法：transform: translate(50%, 50px);，50%相对于样式所在盒子的高度
• 旋转：transform: rotate(30deg);，相对transform-origin旋转，坐标系也旋转
• 缩放：transform: scale(0.5, 2);，相对transform-origin缩放，X向比例0.5，Y向比例2，可只写一个则双方向同
• 转换中心点：transform-origin: 100% 100px;

二、3d转换

• 封装子盒子们：transform-style: preserve-3d;，需给父盒子设置此属性，子盒子们组合成的立体才会显示正常
• 视距：perspective: 500px;，需给父盒子设置此属性，子盒子有关Z轴的3d才会有效果，原理如下图(视距为d,z轴为z)
  
• 移动
  • 单向写法：transform:translateZ(100px);，Z正方向：向屏幕外
  • 复合写法：transform:translate3d(100px,100px,100px);,3个参数不可省
• 旋转
  • 单向旋转：transform: rotateX(180deg);，绕X轴正向旋转，左手法则：大拇指指向X轴正向
  • 复合写法：transform: rotate3d(0,0,1,180deg);，前三个为方向矢量，确定旋转所绕的轴，左手法则

三、动画

3.1 常用属性

属性	描述	可选项
animation-name	动画名称	用户自定义动画名
animation-duration	动画持续时间	秒数：3s
animation-iteration-count	动画循环次数	默认1次，infinite：无限循环
animation-direction	动画进行方向	默认normal：从结尾立即跳转到开头，alternate：交替往复
animation-fill-mode	动画结束帧位	默认backwards：停留在0%帧，forwards：停留在100%帧
animation-play-state	动画播放状态	默认：running，paused：暂停
animation-delay	动画延迟秒数	默认：0，可写秒数：3s

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

动画简写：

• 写法：animation: move 3s infinite alternate forwards 1s;，前两个必须选
• 冲突项：靠后秒数为animation-delay不包含animation-play-state，结束帧位不与循环次数、进行方向同用
• 多个动画：animation:动画1，动画2；

3.2 动画示例

• 实现效果：盒子从0,0到1000,1000，往复运动，无限循环

• 定义关键帧

  @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;							 /* 鼠标悬停则动画暂停 */
  }
  

  ---

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

• 代码

  <template>
    <div id="head"></div>
  </template>
  
  <style  scoped>
  	@keyframes move {											/* 定义关键帧 */
  	  0% {
  	  }
  	  100% {
  	    transform: rotate(0deg);
  	  }
  	}
  	
  	#head {
  	  overflow: hidden;
  	  margin: 0 auto;
  	  width: 100px;
  	  height: 100px;
  	  border: black solid 1px;
  	}
  	
  	#head::before {
  	  content: '';
  	  display: block;
  	  width: 100%;
  	  height: 100%;
  	  background-color: black;
  	  transform-origin: left bottom;
  	  transform: rotate(90deg);
  	}
  	
  	#head:hover::before {							/* 鼠标移动到盒子内，触发动画 */
  	  animation-name: move;										   /* 可以简写 */
  	  animation-duration: 1s;			
  	  animation-fill-mode: forwards;							   /* 不可简写 */
  	}
  
  </style>
  

四、适配不同屏幕

4.1 监控屏幕尺寸

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

  注意：后面的监控器会覆盖前面的监控器相同区间

• 效果：class=‘father’的div在屏幕宽度0～800：黑背景，800～1000:黄背景，1000以上：蓝背景
• 代码示例

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

4.2 适用单位

• em:为父盒子文字尺寸，可调整父盒子div {font-size:15px;}调整1em
• rem：为浏览器html文字尺寸，root em的缩写，可调整html {font-size:15px;}调整1rem

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

• 工具：vs code中的cssrem插件，会自动转换px到rem，默认1rem=16px，适配iPhone6需改为75px

4.3 配合使用

• 效果：随着屏幕尺寸变化，div盒子中的A大小也会变化

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

• 代码

  • 常规代码

    <template>
      <div class="father">
        <div>A</div>
      </div>
    </template>
    	
    /* 以下代码，使单位与1rem绑定，其他属性与浏览器宽度绑定 */
    <style scoped>
    	@media screen {
    	  .father div {
    	    width: 1.88rem; 									/* 盒子宽度100px，小于800px屏幕等比例缩放 */
    	    font-size:0.47rem; 							/* father盒子字高25px，小于800px屏幕等比例缩放*/
    	    color: red;
    	  }
    	}
    	
    	@media screen and (min-width: 800px) {
    	  .father div {
    	    width: 12rem; 								  /* 盒子宽度100px，800~1000px屏幕等比例缩放 */
    	    font-size: 0.38rem; 					   /* father盒子字高25px，小于800px屏幕等比例缩放*/
    	    color: green;
    	  }
    	}
    	@media screen and (min-width: 1000px) {
    	  .father div {
    	    width: 0.78rem;							    /* 盒子宽度100px，1000~1920px屏幕等比例缩放 */
    	    font-size: 0.19rem; 				    /* father盒子字高25px，1000~1920px屏幕等比例缩放*/
    	    color: yellow;
    	  }
    	}
    </style>
    

  • index.html中<head>标签中增加代码

    /* 此代码控制1rem大小，与浏览器宽度联动 */
    <style>
        @media screen {
            /* 此监控器适配800px以下屏幕，后无分号 */
            html {
                font-size: 53px;
            }
        }
        
        @media screen and (min-width: 800px) {
            /* 此监控器适配1000px以下屏幕 */
            html {
                font-size: 66px;
            }
        }
        
        @media screen and (min-width: 1000px) {
            /* 此监控器适配1920px以下屏幕 */
            html {
                font-size: 128px;
            }
        }
    </style>
    

  实现方案二：flexible + rem，有空研究

上一篇：CSS精简笔记（三）------盒子模型

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