这是CSS设计指南的读书笔记，用于加深学习效果。 最近想做一个小程序，前端是必修课，那就从css开始吧。 css 工作原理 每个html元素都有一组样式属性，可以通过css来设定。...HUGOMORE42 css规则 规则实际上是一条完整的css指令，规则声明了要修改的元素和要应用给改元素的样式。...指令必须出现在样式表中其他样式之前，否则@吹灭；@import引用的样式表不会被加载。...点击a标签时，会应用css样式。...以上CSS选择符已经介绍完了，接下来讨论在一个大的样式表中，规则选择的问题。 CSS提供了三种机制来决定那条规则会胜出： 继承 层叠 特指 继承 CSS属性的值会向下传递。
3D特点 近大远小 物体后面遮挡不可见 三维坐标系 x轴：水平向右 右边是正值，左边是负值 y轴：垂直向下 下面是正值，上面是负值 z轴：垂直屏幕 往外面是正值，往里面是负值 如下图： 不过在我们css...中y轴向上是为负的，y轴向下为正，与下图相反 css3中的3D转换 3D位移 translate3d(xyz) 3D旋转 rotate3d(xyz) 透视：perspective 3d呈现transform-style...而z就是css中的translateZ也就是z轴物体离屏幕的距离，这个值越大看到的物体越大，值小看到的物体越小 了解上面的透视和translateZ之后我们就可以给我们的案例加上透视效果了 不过需要注意的是透视是写在被观察元素的父盒子上面的
知识点讲解今天来聊聊transform的3D转换功能。3D转换滑板1、UI2、实现方案先来看滑板的表情，在对比左侧的图片，是不是还挺像的。滑板有两部分组成，板子和轮子。...知识点以下知识内容来自于菜鸟教程属性名作用属性值transform (3D)应用于元素的3D转换。...matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)：定义 3D 转换，使用 16 个值的 4x4 矩阵。translate3d(x,y,z)：定义 3D 转换。...translateZ(z)：定义 3D 转换，只是用 Z 轴的值。scale3d(x,y,z)：定义 3D 缩放转换。scaleZ(z)：通过设置 Z 轴的值来定义 3D 缩放转换。...perspective(n)：为 3D 转换元素定义透视视图。transform-origin允许更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。
安装了less之后后, 可以通过lessc 将单个.less文件转换为.css, 但less没有提供批量转换为css的命令, 如果不使用sublime, 或者webstorm提供的插件, 就得手动一个一个去转换...懒是第一生产力, 我用python写了一个批量转换的脚本, 可以将脚本放到项目的顶层目录运行, 之后, 就可以在less文件的旁边找到新生成的css文件 转换前: ?...转换前 转换中: ? 转换中 转换后: ?...转换后 源码 import os def auto_less_to_css(file_dir): # 获取当前目录下所有的css文件路径 all_whole_path_files...= file_info[1][:-5] + '.css' css_file_path_file = file_info[0] + css_file_name new_command
转换 transform 能够对元素进行移动、缩放、转动、拉长或拉伸 在CSS中，允许元素实现 2D 和 3D的转换效果,主要包含 ：旋转，缩放，移动，倾斜 2D ：元素只能在X轴和Y...y轴上所进行的转换效果可以称之为2D转换，包括：位移、缩放、旋转、倾斜 1-1、位移 translate() 让元素产生一个位置的移动变化效果 函数：translate(一个值) -->只在x...2、3D转换 在 x轴 和 y轴的基础上，增加对 z轴（空间轴）的转换效果 2-1、perspective 属性 3D元素的透视效果，假定 人眼 到投射平面的距离 注意：（1）、...使用 perspective属性，元素本身不会得到3D转换效果，其子元素才有3D转换效果 （2）、浏览器兼容性，需带前缀 -webkit-perspective, -moz-perspective...-- 父元素设置 perspective ， 子元素实现3d转换 --> 3d转换元素 </body
:root { --primary-color: #06c;} 同时， css 变量提供了 JavaScript 与 css 通信的方法。就是利用 js 操作 css 变量。...第一个属性的设定对于不支持 CSS 变量的设备可以直接使用，如果当前设备支持 CSS 变量，则会使用 CSS 变量，但是由于当前 CSS 变量未定义，就会使用变量的默认值。...Space Toggle 逻辑切换 CSS 没有逻辑切换似乎是一种共识，但是我们可以利用选框(单选与多选)和 CSS 变量来实现判断逻辑。我们先来看看如何使用 CSS 变量。...toggler) 得到了空,所以得到结果 为 --red-if-toggler: red */ --red-if-toggler: var(--toggler) red; /** 变量是 red, 不会使用...键盘记录器 暴露了 CSS 安全性问题之后，CSS 变量又一次让我看到了玩技术是怎么样的。
**源码测试浏览器：**IE8核心的360浏览器 ---- 1.问题描述 在W3CSchool学习web前端时，看完CSS定位-浮动这一节后，感觉没有什么问题。...但是在CSS高级-分类这一节的中进行实践时，遇到了如下问题。测试地址：浮动的简单应用。...完整的html+CSS源码如下： css"> img { border:solid 1px green; display...为什么我对两张图中的之一进行浮动时，不会遮住另一张图呢？ ---- 2.我的理解错在了哪里 首先，再一次查看W3CSchool官网权威对CSS浮动的讲解，详见：CSS浮动。...---- 参考文献 [1]http://www.w3school.com.cn/css/css_positioning_floating.asp
**源码测试浏览器：**IE8核心的360浏览器 ---- 1.问题描述 在W3CSchool学习web前端时，看完CSS定位-浮动这一节后，感觉没有什么问题。...但是在CSS高级-分类这一节的中进行实践时，遇到了如下问题。测试地址：浮动的简单应用。...完整的html+CSS源码如下： css"> img { border:solid 1px green; display...为什么我对两张图中的之一进行浮动时，不会遮住另一张图呢？ ---- 2.我的理解错在了哪里 首先，再一次查看W3CSchool官网权威对CSS浮动的讲解，详见：CSS浮动。 原文截图如下： ?...---- 参考文献 [1]http://www.w3school.com.cn/css/css_positioning_floating.asp
今年我面试了很多同学，只要看到简历上写“熟练掌握CSS3”的，我都会问问动画相关知识。然而我发现：都 2019 年了，还有很多同学不会 CSS 动画。 我经常爱问的一个问题是，实现如下的效果： ?...大部分面试者说，关于 CSS 动画，也看过一些教程，工作中却不怎么使用，因此就忘了。这里，我准备为对 CSS 动画掌握不深的小伙伴补充一下相关知识。欢迎大佬们拍板。...CSS动画，也称关键帧动画。通过 @keyframes 来定义关键帧。帧的概念，想必大家很清楚，比如电影就是一帧帧图片在播放，利用图像在人脑中短时间停留来形成动态效果。CSS 动画也是利用这个原理。...准确地说，CSS 动画用百分比来刻画一个动画周期，from 其实是 0% 的别称，to 是 100% 的别称。因此关键帧 rotate 等价于： ?...这个属性容易被忽略，然而却是 CSS 动画比较重要的一个属性。直译为动画填充模式，具体说的是什么事情呢？
从流程我们可以看出来 DOM解析和CSS解析是两个并行的进程，所以这也解释了为什么CSS加载不会阻塞DOM的解析。...那么我们可以做出这样的假设 当页面只存在css，或者js都在css前面，那么DomContentLoaded不需要等到css加载完毕。...当页面里同时存在css和js，并且js在css后面的时候，DomContentLoaded必须等到css和js都加载完毕才触发。...其他情况下，DOMContentLoaded都不会等待css加载，并且DOMContentLoaded事件也不会等待图片、视频等其他资源加载。...总结 由上所述，我们可以得出以下结论: css加载不会阻塞DOM树的解析 css加载会阻塞DOM树的渲染 css加载会阻塞后面js语句的执行 因此，为了避免让用户看到长时间的白屏时间，我们应该尽可能的提高
一、2D转换 translate(npx,npx) 相对当前元素位置移动 /* 实现div向左移动50个像素，并向下移动100个像素 */ div { transform...ms-transform:matrix(0.8,0.5,-0.5,0.8,0,0); -webkit-transform:matrix(0.8,0.5,-0.5,0.8,0,0); } 二、3D转换...轴旋转45度 */ div { transform: rotateZ(45deg); -webkit-transform: rotateZ(45deg); } 3D转换之...translateY(npx) 相对当前元素位置沿Y轴移动 translateZ(npx) 相对当前元素位置沿Z轴移动 translate3d(x,y,z) 3D转换之...相对当前元素位置沿X轴缩放 scaleY(n) 相对当前元素位置沿Y轴缩放 scaleZ(n) 相对当前元素位置沿Z轴缩放 scale3d(x,y,z) 3D转换之
3D转换时，要赋予改变元素的父元素 perspective 属性 perspective： m px; // 视点和画面的距离，视点的位置默认在父元素的中心 perspective-origin：right
CSS3-3D转换实例 <!
脚本化css 下面通过css实现动画效果，可以使用脚本化的css实现滑入，轮廓伸缩的列表，即动态的HTML，一个过时的说法DHTML 一些css的基础知识 之前已经看过厚厚的一本大书，现在简单看一下，补充一下不知道的点...这是一种习惯 同样的也可以直接使用属性进行设置 e.setAttribute 进行设置css的内联样式 其实是通过增加css的属性的内联样式达到效果的。...css的2d转换 即，进行一些css的转换 坐标 描述坐标的系统有笛卡尔坐标系统和齐次坐标系。 笛卡尔坐标系 用一组数值在一组平面上表示一个点。...transform 属性将会允许修改CSS视觉格式模型的坐标空间。使用它，元素可以被转换（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）。...的3d转换 坐标 齐次坐标系 由笛卡尔坐标系投影得到。
一、转换简介 转换概述 - 转换是使元素改变形状、尺寸和位置的一种效果 - 又称为变形，即，可以向元素应用2D 或 3D 转换，从而对元素进行旋转、缩放、移动或倾斜 - 2D 转换: 使元素在...- 3D 转换:元素还可以在 Z 轴上发生变化 ?...转换属性 - transform 属性向元素应用 2D 或者 3D 转换 - 指定一组转换函数，取值 - transform: none/transform-function; ...转换的原点 - transfor-origin 属性用来指定元素的转换原点位置 - 默认情况下，转换的原点在元素的中心点 - 或者是 X轴 和 Y轴的 50% 处 - transform-origin...3D 缩放 - 3D 缩放主要包含 - scaleZ(z) - scale3d(x,y,z) 总结：本章内容主要介绍了 Css3之高级-5 Css转换(简介、2D转换、3D转换
03 转换css元素的类别 通过设置display属性 属性 作用 block 块级 inline 行内 inline-block 行内块级 接来下 就跟着小demo来学习吧...什么时候块级元素和行内元素 块级元素转行内元素 我们都知道 div是块级元素 是独占一行 可以设置宽高的 并且是独占一行的 那么我们看看 给它转换成行内元素的效果吧！...转换成行内元素 可以清楚的看到 他们俩成为相亲相爱的好兄弟 在同一条线上了！ 接下来就看看 行内元素转块级元素吧！...兄弟反目 可以看到 当我们设置为块级元素之后 他俩翻脸速度比翻书还快 直接另起一行 各奔东西的 转换成行内块级元素 可以看到 图中 b标签是行内元素 而p标签则是块级元素 我想给俩弄成相亲相爱的俩兄弟
css3渐变 线性渐变（Linear Gradient）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradient）- 由它们的中心定义 repeating-linear-gradient...形状为圆形的径向渐变： background: radial-gradient(circle, red, yellow, green); css3中transform可以实现文字或图像的旋转（rotate
3D 转换主要学习工作中最常用的 3D 位移 和 3D 旋转 主要知识点 3D位移: translate3d(x,y,z) 3D旋转: rotate3d(x,y,z) 透视: perspective
2D 转换 transform: 转换在CSS3中可以实现元素的移动(translate)、旋转(rotate)、缩放(scale)等效果 2D 转换 移动 translate: 2D移动可以改变元素在页面中的位置...，类似定位 translate的优点：不会影响其他元素位置，对行内标签没有效果 transform: translate(x,y); 或者分开写: translateX(50px); translateY...(50deg) 2D 转换中心点 transform-origin： x 和 y 用空格隔开，x y 默认转换的中心点是元素的中心点 可以给x y 设置 像素 或者 方位名词 （top bottom left...right center） transform-origin: left bottom; 2D 转换之缩放 scale: 元素可以缩放，可以放大和缩小，x和y用逗号分隔 scale优势：可以设置转换中心点缩放...，默认以中心点缩放，而且不影响其他盒子 transform:scale(x,y); 只写一个参数，第二个数和第一个数一样，相当于 scale(2,2) 2D 转换综合写法: 顺序会影转换效果，如果有位移和其他属性的时候
前言 上篇文章主要讲述了CSS样式更改中的裁剪、Z-Index、清除、改变元素的特性基础知识，这篇文章我们来介绍下CSS样式更改中2D转换的基础用法。...2D转换 1).元素位移translate(左边,顶边) div { transform: translate(50px,100px); -ms-transform: translate(50px,100px...angle) 定义沿着 Y 轴的 3D 旋转 rotateZ(angle) 定义沿着 Z 轴的 3D 旋转 其它的都是差不多的用法，不过还有一个用法不同的就是： perspective(n) 为3D转换元素定义透视视图...参考文档：W3C官方文档（CSS篇） 总结 这篇文章主要介绍了CSS样式更改篇中的2D转换基本设置，希望对大家的学习有帮助。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
