当前位置： 首页 > news >正文

CSS重点知识整理1

news 2025/10/14 23:53:00

目录

1 平面位移

1.1 基本使用

1.2 单独方向的位移

1.3 使用平面位移实现绝对位置居中

2 平面旋转

2.1 基本使用

2.2 圆点转换

2.3 多重转换

3 平面缩放

3.1 基本使用

3.2 渐变的使用

4 空间转换

4.1 空间位移

4.1.1 基本使用

4.1.2 透视

4.2 空间旋转

4.3 立体呈现案例

5 动画

5.1 基本使用

5.2 动画的其它相关属性

5.2.1 linear 设置匀速

5.2.2 分布动画

5.2.3 延迟时间

5.2.4 重复次数

5.2.5 动画方向  alternate

5.2.6 执行完毕的状态

5.2.7 动画的拆分写法

1 平面位移

1.1 基本使用

语法： translate(水平移动距离, 垂直移动距离)

取值：正负均可，X轴正向为右，Y轴正向为下

    <style>.father{display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;background-color: red;border: 2px solid black;}.child {width: 100px;height: 100px;background-color: blue;border: 1px solid black;transition: all 2s;}/* 父元素的hover事件，子元素的样式改变 */.father:hover .child {/* transform: translate(50px, 50px); */  /* transform: translate(-50px, -50px); *//* 给的是百分比的话，参考盒子自身尺寸计算结果 */transform: translate(50%, 50%);}</style>

可以给子元素添加：transition: all 2s; 过渡属性

1.2 单独方向的位移

 单独方向的移动：

    transform: translateX(水平移动距离);

    transform: translateY(垂直移动距离);

    <style>.father{display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;background-color: red;border: 2px solid black;}.child {width: 100px;height: 100px;background-color: blue;border: 1px solid black;transition: all 2s;}/* 父元素的hover事件，子元素的样式改变 */.father:hover .child {/* transform: translateX(50px); */transform: translateY(50px);}</style>

1.3 使用平面位移实现绝对位置居中

    <style>.father{position: relative;width: 200px;height: 200px;background-color: red;border: 2px solid black;}.child {position: absolute;left: 50%;top: 50%;/* 1.之前的写法 *//* margin-left: -50px;margin-top: -50px; *//* 2.位移写法 */transform: translateX(-50px) translateY(-50px);width: 100px;height: 100px;background-color: blue;border: 1px solid black;}</style>

2 平面旋转

2.1 基本使用

    <style>img {display: block;margin: 100px auto;width: 300px;border: 1px solid black;transition: all 1s;  /* 旋转效果必须配合过渡，才有效 */}img:hover {/* 取值为正数顺时针，负数为逆时针 */transform: rotate(360deg);  }</style>

旋转效果必须配合过渡transition，才有效

2.2 圆点转换

 转换圆点：transform-origin: 圆点水平位置，圆点垂直位置;

 取值：

        方位名词：left、right、top、bottom、center

        百分比：0%、50%、100% (参照盒子自身尺寸)

        像素：100px、200px

 

2.3 多重转换

    <style>/* 旋转和位移   tranform混合属性实现多形态转换 */.box {width: 700px;height: 100px;border: 2px solid black;overflow: hidden;}img {width: 150px;height: 100px;transition: all 3s;}.box:hover img {transform: translateX(550px) rotate(360deg);/* 必须先有位移，才能有旋转效果， 不能颠倒顺序 *//* 因为先旋转会改变坐标轴方向 ，位移的方向会受影响*/}</style>

3 平面缩放

    语法：

            transform: scale(缩放倍数);

            一般情况下：只为scale设置一个值，表示x轴和y轴等比例缩放，大于1放大，小于1缩小，等于1保持不变

3.1 基本使用

    <style>.box{margin: 100px auto;width: 300px;height: 300px;border: 2px solid black;}img {width: 300px;height: 300px;transition: all 1s;}.box:hover img {/* 没有单位 */transform: scale(1.5);  transform: scale(0.6);}</style>

3.2 渐变的使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css</title><style>.box{position: relative;width: 300px;height: 300px;border: 1px solid black;}img {width: 100%;height: 100%;}.box .mask{position: absolute;top: 0;left: 0;width: 300px;height: 300px;background-image: linear-gradient(/* transparent 表示透明色 */transparent,rgba(0, 0, 0, 0.5));opacity: 0;transition: all 0.5s;}.box:hover .mask{opacity: 1;   }</style>
</head>
<body><div class="box"><img src="./images/girl2.jpg" alt=""><!-- 添加渐变背景的盒子 --><!-- 遮罩层 --><div class="mask"></div></div>
</body>
</html>

4 空间转换

    空间：是从坐标轴角度定义。x, y, z三条坐标轴构成一个立体空间，z轴位置

            与视线方向相同的为正方向。负值指向里。

    使用的属性也是 transform

4.1 空间位移

4.1.1 基本使用

语法：   

        transform: translate3d(水平移动距离);

    <style>body {perspective: 1000px;}.box {width: 300px;height: 300px;background-color: skyblue;border: 2px solid black;transition: all 1s;}.box:hover {transform: translate3d(100px, 100px, 100px);}</style>

单独控制每个方向的移动距离：   

        transform: translateX(移动距离);

        transform: translateY(移动距离);

        transform: translateZ(移动距离);

但是通过上述的方式，我们是看不到 Z 轴移动的距离的，所以就用到了下面的透视内容了。

4.1.2 透视

使用perspective属性设置透视   近大远小

    perspective: 1000px;

    想看到哪个元素，就给该元素的父级元素添加perspective属性

    取值一般为 800-1200px

4.2 空间旋转

    <style>body {perspective: 1000px;}.box {margin: 400px auto;width: 300px;height: 300px;background-color: skyblue;border: 2px solid black;transition: all 1s;}.box:hover {/* transform: rotateZ(360deg);   旋转角度为Z轴旋转 相当于rotate(360deg); *//* transform: rotateX(60deg); */transform: rotateY(60deg);}</style>

4.3 立体呈现案例

【代码】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>立体呈现</title><style>.box {position: relative;;margin: 100px auto;width: 200px;height: 200px;transition: all 2s;transform-style: preserve-3d;}.box div {position: absolute;top: 0;left: 0;width: 200px;height: 200px;}.front {background-color: orange;transform: translateZ(200px);}.back {background-color: green;}.box:hover {transform: rotateY(360deg);   }</style>
</head>
<body><div class="box"><div class="front"></div><div class="back"></div></div>
</body>
</html>

5 动画

5.1 基本使用

    <style>.box{width: 300px;height: 300px;background-color: skyblue;  }/* 1.定义动画 */@keyframes play {/* 1. from to  形式 *//* from {width: 300px;height: 300px;}to {width: 500px;height: 500px;} *//* 2. 百分比形式 */0% {width: 300px;height: 300px;}50% {width: 400px;height: 400px;}100% {width: 500px;height: 500px;}}.box:hover {/* 使用动画 */animation: play 1s;}</style>

5.2 动画的其它相关属性

5.2.1 linear 设置匀速

animation: play 1s linear;

5.2.2 分布动画

steps(3)  分为3个动画帧 ...

animation: play 1s steps(3);

5.2.3 延迟时间

在动画中：第一个时间表示动画时长，第二个时间表示延迟时间

animation: play 1s 1s;

5.2.4 重复次数

animation: play 1s 3;  /* 重复3次 */
animation: play 1s infinite;    /*重复无穷次 */

5.2.5 动画方向  alternate

先执行再执行,有反向效果

animation: play 1s infinite alternate;

5.2.6 执行完毕的状态

animation: play 1s backwards;  /* 默认值 backwards*/
animation: play 1s forwards;  /* 动画执行完毕的状态 */

 

5.2.7 动画的拆分写法

相关文章：

CSS重点知识整理1

目录 1 平面位移 1.1 基本使用 1.2 单独方向的位移 1.3 使用平面位移实现绝对位置居中 2 平面旋转 2.1 基本使用 2.2 圆点转换 2.3 多重转换 3 平面缩放 3.1 基本使用 3.2 渐变的使用 4 空间转换 4.1 空间位移 4.1.1 基本使用 4.1.2 透视 4.2 空间旋转 4.3 立…...

编程日记 2024/2/25 13:47:59

【Langchain多Agent实践】一个有推销功能的旅游聊天机器人

【LangchainStreamlit】旅游聊天机器人_langchain streamlit-CSDN博客 视频讲解地址&#xff1a;【Langchain Agent】带推销功能的旅游聊天机器人_哔哩哔哩_bilibili 体验地址&#xff1a; http://101.33.225.241:8503/ github地址&#xff1a;GitHub - jerry1900/langcha…...

编程日记 2024/2/25 13:45:57

算法学习（十二）并查集

并查集 1. 概念 并查集主要用于解决一些 元素分组 问题&#xff0c;通过以下操作管理一系列不相交的集合&#xff1a; 合并&#xff08;Union&#xff09;&#xff1a;把两个不相交的集合合并成一个集合 查询&#xff08;Find&#xff09;&#xff1a;查询两个元素是否在同一…...

编程日记 2024/2/25 13:44:55

TensorRT及CUDA自学笔记003 NVCC及其命令行参数

TensorRT及CUDA自学笔记003 NVCC及其命令行参数 各位大佬&#xff0c;这是我的自学笔记&#xff0c;如有错误请指正&#xff0c;也欢迎在评论区学习交流&#xff0c;谢谢&#xff01; NVCC是一种编译器&#xff0c;基于一些命令行参数可以将使用PTX或C语言编写的代码编译成可…...

编程日记 2024/2/25 13:43:55

数据库管理-第154期 Oracle Vector DB AI-06（20240223）

数据库管理154期 2024-02-23 数据库管理-第154期 Oracle Vector DB & AI-06&#xff08;20240223&#xff09;1 环境准备创建表空间及用户TNSNAME配置 2 Oracle Vector的DML操作创建示例表插入基础数据DML操作UPDATE操作DELETE操作 3 多Vector列表4 固定维度的向量操作5 不…...

编程日记 2024/2/25 13:42:54

解决uni-app vue3 nvue中使用pinia页面空白问题

main.js中&#xff0c;最关键的就是Pinia要return出去的问题&#xff0c;至于原因嘛! 很忙啊&#xff0c;先用着吧 import App from ./App import * as Pinia from pinia import { createSSRApp } from vue export function createApp() {const app createSSRApp(App);app.us…...

编程日记 2024/2/25 13:39:51

不用加减乘除做加法

1.题目&#xff1a; 写一个函数&#xff0c;求两个整数之和&#xff0c;要求在函数体内不得使用、-、*、/四则运算符号。 数据范围&#xff1a;两个数都满足 −10≤&#xfffd;≤1000−10≤n≤1000 进阶&#xff1a;空间复杂度 &#xfffd;(1)O(1)&#xff0c;时间复杂度 &am…...

编程日记 2024/2/25 13:32:45

旅游组团自驾游拼团系统 微信小程序python+java+node.js+php

随着社会的发展&#xff0c;旅游业已成为全球经济中发展势头最强劲和规模最大的产业之一。为方便驴友出行&#xff0c;寻找旅游伙伴&#xff0c;更好的规划旅游计划&#xff0c;开发一款自驾游拼团小程序&#xff0c;通过微信小程序发起自驾游拼团&#xff0c;吸收有车或无车驴…...

编程日记 2024/2/25 13:30:43

LeetCode 第41天 | 背包问题 二维数组 一维数组 416.分割等和子集 动态规划

46. 携带研究材料&#xff08;第六期模拟笔试&#xff09; 题目描述 小明是一位科学家&#xff0c;他需要参加一场重要的国际科学大会&#xff0c;以展示自己的最新研究成果。他需要带一些研究材料&#xff0c;但是他的行李箱空间有限。这些研究材料包括实验设备、文献资料和实…...

编程日记 2024/2/25 13:29:41

Ubuntu20.04和Windows11下配置StarCraft II环境

1.Ubuntu20.04 根据下面这篇博客就可以顺利安装&#xff1a; 强化学习实战(九) Linux下配置星际争霸Ⅱ环境https://blog.csdn.net/weixin_39059031/article/details/117247635?spm1001.2014.3001.5506 Ubuntu下显示游戏界面目前还没有解决掉。 大家可以根据以下链接看看能…...

编程日记 2024/2/25 13:27:40

【NCom】:通过高温气相合成调节Pt-CeO2相互作用以提高晶格氧的还原性

摘要&#xff1a;在这项工作中&#xff0c;我们比较了通过两种方法制备的 Pt 单原子催化剂&#xff08;SAC&#xff09;的 CO 氧化性能&#xff1a;&#xff08;1&#xff09;传统的湿化学合成&#xff08;强静电吸附strong electrostatic adsorption–SEA&#xff09;&#xf…...

编程日记 2024/2/25 13:26:38

git 将一个分支的提交移动到另一个分支

假设想把分支A上的最后一部分commit移动到分支B之上&#xff1a; 首先切到分支B git checkout B然后执行如下指令,commit id 为A分支上&#xff0c;需要移动的那些提交 git cherry-pick <commit id> &#xff08; <commit id> 可多个&#xff09;中途可能遇到一些…...

编程日记 2024/2/25 13:25:37

vue3 实现 el-pagination页面分页组件的封装以及调用

示例图 一、组件代码 <template><el-config-provider :locale"zhCn"><el-pagination background class"lj-paging" layout"prev, pager, next, jumper" :pager-count"5" :total"total":current-page"p…...

编程日记 2024/2/25 13:19:30

#FPGA（IRDA）

1.IDE:Quartus II 2.设备&#xff1a;Cyclone II EP2C8Q208C8N 3.实验&#xff1a;IRDA&#xff08;仿真接收一个来自0x57地址的数据0x22 (十进制34)&#xff09; 4.时序图&#xff1a; 5.步骤 6.代码&#xff1a; irda_receive.v module irda_receive ( input wire…...

编程日记 2024/2/25 13:15:27

Sora—openai最新大模型文字生成视频

这里没办法发视频&#xff0c;发几个图片感受感受吧 OpenAI发布了Sora&#xff0c;一种文字生成视频的技术&#xff0c;从演示看&#xff0c;效果还是相当不错的。 Sora的强大之处在于其能够根据文本描述&#xff0c;生成长达 60秒的视频&#xff0c;其中包含精细复杂的场景…...

编程日记 2024/2/25 13:14:26

VoIP（Voice over Internet Protocol 基于IP的语音传输）介绍（网络电话、ip电话）

文章目录 VoIP&#xff08;基于IP的语音传输&#xff09;1. 引言2. VoIP基础2.1 VoIP工作原理2.2 VoIP协议 3. VoIP的优势和挑战3.1 优势3.2 挑战 4. VoIP的应用5. 总结 VoIP&#xff08;基于IP的语音传输&#xff09; 1. 引言 VoIP&#xff0c;全称Voice over Internet Prot…...

编程日记 2024/2/25 13:10:23

编程笔记 Golang基础 027 结构体

编程笔记 Golang基础 027 结构体 一、结构体的定义二、结构体的实例化1. 直接初始化2. 使用键值对初始化&#xff08;即使字段顺序不一致也能正确赋值&#xff09;3. 部分初始化&#xff08;未指定的字段会得到它们类型的零值&#xff09;4. 使用var声明和初始化5. 结构体字面量…...

编程日记 2024/2/25 13:08:21

opencascade15解析导出为step格式

#include "DisplayScene.h" // 包含显示场景的头文件 #include "Viewer.h" // 包含查看器的头文件// OpenCascade 包含 #include <BRepPrimAPI_MakeCylinder.hxx> // 创建圆柱体 #include <BinXCAFDrivers.hxx> // 二进制XCAF驱动程序 #includ…...

编程日记 2024/2/25 13:05:18

【软件设计模式之模板方法模式】

文章目录 前言一、什么是模板方法模式&#xff1f;二、模板方法模式的结构1. 抽象类定义2. 具体实现 三、模板方法模式的应用场景1. 算法重用2. 操作中的固定步骤3. 扩展框架的功能4. 提供回调方法5. 遵循开闭原则 四、模板方法模式的优缺点1. 优点代码复用扩展性好符合开闭原则…...

编程日记 2024/2/25 13:02:16

Spring Boot项目怎么对System.setProperty(key, value)设置的属性进行读取加解密

一、前言 之前我写过一篇文章使用SM4国密加密算法对Spring Boot项目数据库连接信息以及yaml文件配置属性进行加密配置&#xff08;读取时自动解密&#xff09;&#xff0c;对Spring Boot项目的属性读取时进行加解密&#xff0c;但是没有说明对System.setProperty(key, value)设…...

编程日记 2024/2/25 13:01:15

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2025/10/13 16:33:54

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2025/9/22 20:29:32

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/9/19 8:02:57

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2025/10/10 9:03:03

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/9/28 0:44:00

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2025/10/13 1:26:48

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2025/10/12 21:22:14

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2025/10/4 22:56:55

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2025/10/7 2:54:27

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/10/14 4:10:21