CSS精简笔记（五）------高级技巧

最新推荐文章于 2024-04-19 15:29:12 发布

chuck-Gemini

最新推荐文章于 2024-04-19 15:29:12 发布

阅读量153

点赞数

分类专栏： # CSS

本文链接：https://blog.csdn.net/chucksun0426/article/details/110957611

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、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精简笔记（四）------布局
 下一篇：Vue学习手册（一）-----脚手架初体验

chuck-Gemini

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS精简笔记（五）------高级技巧

目录一、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，可只写一个则双方向同转换中心点：
复制链接

扫一扫