欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-19 15:44:42
目录一、2d转换2.1 基本应用2.2 综合应用二、动画一、2d转换特点:2d变换不脱标2.1 基本应用移动:transform: translate(50%, 50px);,50%相对于样式所在盒子的高度,X正方向:向右;Y正方向:向下旋转:transform: rotate(30deg);,相对transform-origin旋转缩放:transform: scale(0.5, 2);,相对transform-origin缩放,X向比例0.5,Y向比例2,可只写一个则双方向同转换中心点:...

一、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)
    CSS精简笔记---高级技巧
  • 移动
    • 单向写法: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
    • 关系词:andnotor,取交集、非集、并集

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

  • 效果: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

相关标签: 建站