- 博客(18)
- 收藏
- 关注
RSS订阅原创 引用帧动画
animation: 动画名称 动画执行时间 动画速度曲线 延迟时间 动画播放次数 动画运动方向 动画结束之后显示的状态。动画播放方式 暂停。3.animation-timing-function 规定动画运动的速度曲线。1.animation-name 动画名称 是定义关键帧是所定义的动画名称。- 允许负值，（-2s 使动画马上开始，但跳过 2 秒进入动画)7.animation-fill-mode d动画结束之后的显示状态。2.ease 默认值 慢速度开始--速度变快--慢速度结束。
2022-10-26 19:29:43
43
1
原创 3D旋转：
a 指的是一个旋转角度值，如果为正值，元素围绕 Z 轴顺时针旋转；a 指的是一个旋转角度值，如果为正值，元素围绕X轴顺时针旋转；a 指的是一个旋转角度值，如果为正值，元素围绕Y轴顺时针旋转；angle：一个角度值，指定在 3D 空间旋转角度，正值顺时针旋转，反之元素逆时。x：是一个 0 到１之间的数值，主要用来描述元素围绕 X 轴旋转的矢量值。y：是一个 0 到１之间的数值，主要用来描述元素围绕 Y 轴旋转的矢量值。z：是一个 0 到１之间的数值，主要用来描述元素围绕 Z 轴旋转的矢量值。
2022-10-26 19:27:31
390
原创 2D变形：平移、旋转、缩放、倾斜
transform: translate(x,y) 沿着x轴和y轴移动。沿着中心点旋转，默认值。transform: translateX(x) 沿着x轴移动。transform: scale(x,y) 沿着x轴和y轴缩放。transform: skew(x,y) 沿着x轴和y轴倾斜。transform: scaleX(x) 沿着x轴缩放。transform: scaleY(y) 沿着y轴缩放。transform: skewX(x) 沿着x轴倾斜。transform: skewY(y) 沿着y轴倾斜。
2022-10-26 19:25:23
340
原创 css3过渡动画——transition属性
1.linear 相同的速度从开始到结束，也就是匀速 2.ease 默认值 慢速度开始--速度变快--慢速度结束 3.ease-in 慢速度开始的过渡效果，也就是以低速度开始 4.ease-out 慢速度结束的过渡效果，也就是以低速结束 5.ease-in-out 以慢速度开始和结束的过渡效果。注意：必须设置transition-duration属性，否则执行时间为0，不会产生过渡效果。css样式：参与过渡的css属性名称|all表示所有属性。注意：谁发生了属性的改变 就加在谁身上。
2022-10-26 19:22:25
76
原创 css鼠标样式
e-resize 此光标指示矩形框的边缘可被向右（东）移动。ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。n-resize 此光标指示矩形框的边缘可被向上（北）移动。se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。w-resize 此光标指示矩形框的边缘可被向左移动（西）。move 此光标指示某对象可被移动。
2022-10-17 20:10:41
1367
原创 css多背景
第一个值设置宽度，第二个值设置高度。如 果只设置一个值，则第二个值会被设置为 “auto”。contain:包含，等比例缩放背景图片到完整显示在盒子中，有一边到达边界就停止放大, 可能导致另一边留白 但是背景图可能在区域范围内铺不满（宽高给大点）px：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。cover:覆盖，等比例缩放背景图片到铺满整个盒子，但是背景图可能会无法完整显示在盒子中（宽高给大点）不同的背景图像【逗号】隔开，也可以给不同的图片设置多个不同的属性（如背景位置，背景重复等）
2022-10-17 20:04:27
111
原创 浏览器的私有前缀
Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。有些css3的属性还只是最新版的预览版，还没有正式发版, 没有形成标准,只是某些浏览器的专属属性 ,就需要加前缀。当一个属性或规则成为标准，并被主流浏览器的最新版普遍兼容的时候，可以去掉私有前缀。按下F1，选择autoprefixer:Run，之后会在css文件中添加私有前缀。在外部的css文件中书写相关属性和属性值。
2022-10-17 19:54:27
182
原创 CSS块级格式化
它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。内部的Box会在垂直方向，一个接一个地放置 Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。float属性不为none。
2022-09-29 20:35:48
37
原创 CSS 精灵
通常被解释为“CSS 图像拼合” 或 “CSS 贴图定位”，其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置。适用于一般小图片（如小图标，小背景），不适合大背景大布局背景。必须要限定容器大小符合背景图元素位置。2.1 精灵图的原理。2.1.1 实现步骤。2.1.3 应用场景。
2022-09-28 20:36:34
59
原创 定位的实现
定位模式通过position属性来设置，以下为常用四种定位模式静态定位，相对对定位，绝对定位，固定定位。使用定位需要指定一个元素在文档中的定位模式，配合设置【边偏移量】决定元素最终的显示及位置。通常水平位置通过left或right控制，垂直位置通过top或bottom控制。bottom：设置距离包含块底部的距离。right：设置距离包含块右侧的距离。left：设置距离包含块左侧的距离。top：设置距离包含块顶部的距离。边偏移定位元素的位置，使用。百分比：相对于包含块计算。长度值：px/em等。
2022-09-27 21:28:47
177
原创 css浮动
网页中有很多布局效果，标准流没有办法完成，使用可以利用浮动改变元素默认的排列方式，举例说明（如网页中横向排列的模块或者一左一右排列的模块）。浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】。float:none 不浮动(默认值)1.3、浮动的基本特性。可以使块元素在一行排列。
2022-09-26 20:27:07
60
原创 CSS显示模式
概述：显示模式是指元素以什么方式显示，如div默认独占一行，span默认可以多个在一行排列，了解它们的特点与分类可以更好的布局网页。HTML元素一般分为块级元素与行内元素、行内块元素三大显示模式。特殊情况下我们需要进行元素的模式转换，改变默认元素模式使其拥有另一种元素模式的特性，使用display属性能够将三者任意转换。常见块级元素 div，h1-h6，p，ul，li，dl，dt，ol。在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度。常见行级元素：span，strong，em，i，a，b。
2022-09-25 19:39:25
39
原创 CSS背景
左上角是 0 0，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上；background-position 属性，设置背景图像（由 background-image 定义）的起始位置。CSS 背景属性用于定义 HTML 元素的背景，通过背景属性我们可以定义元素的背景颜 色、背景图片、背景图片的平铺方式和显示位置等。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。background-color属性，设置元素的背景颜色。
2022-09-22 21:35:39
122
原创 CSS 盒模型
概述：CSS通过为元素设置width和height属性值来规定元素的content内容区域的大小。元素的内容及子元素默认从内容区域开始排列。CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距、边框、填充、和实际内容。所有 HTML 标签可以看作盒子，在 CSS 中，"box model" 这一术语是用来设计和布局时使用的。边框是围绕内容和内边距之间的一条或多条线，通过边框属性指定一个元素的边框的宽度、样式和颜色。浏览器可计算出实际的宽度。浏览器可计算出实际的宽度。
2022-09-21 20:00:22
68
原创 css字体
逗号分开 如果浏览器不支持第一个字体，则会尝试下一个（回退机制）一个字体名称或系列名称（介绍常用字体名称、字体系列）语法：font-family:字体名称；微软雅黑 Microsoft YaHei。作用：设置文本的字体系列。
2022-09-20 19:37:08
60
原创 表格基本标签
作用：定义表格数据（table data） 单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。作用:表示表头单元格，通常在行或列的开始处，定义行或列包含的数据类型。默认样式：字体加粗，内容水平居中，垂直居中。语法: 默认样式:内容水平居左，垂直居中。语法: 语法: 语法:作用:定义表格中的行。
2022-09-19 17:48:34
92
原创 游览器及内核
五大游览器：chrome、safari、Firefox、Opera、IE。2、游览器最重要的部分或其核心是渲染引擎，我们一般称之为内核。1、web游览器是用于读取HTML文件，并作为网页显示。内核：webkit blink。生产商：微软公司 Microsoft。3、内核的作用负责对网页语法的解释并渲染网页。内核：presto blink。1、chrome 谷歌游览器。生产商：Mozilla。2、Firefox 火狐游览器。内核：trident。3、Safari 苹果游览器。
2022-09-15 21:26:46
80
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人