博客

CSS3动画

标签

• 
figure

  标签
  
  用于规定独立的流内容（图像、图表、照片、代码等等）
• 
figcaption

  标签
  
  与
  
figure

  配套使用，用于定义
  
figure

  元素的标题

transform以及transition


Transform

为CSS3属性，主要用于元素的变形处理

属性：

translate


Rotate


scale


skew


• 
translate

  
  指定对象的2D translation（2D平移）

  translate(10px,10px)
  

• 
Rotate

  
  指定对象的2D rotation（2D旋转），需先有
  
transform-origin

  属性的定义

  Rotate(90deg),transform-origin:0 0;
  

• 
scale

  
  指定对象的2D scale（2D缩放）

  scale(0.5,0.5)
  

• 
skew

  
  指定对象
  
skew transformation

  （扭曲斜切）

  skew(50deg,20deg)
  


transition

为CSS3属性，主要用于元素的过渡动画处理

属性：

property


duration


timing-function


delay


• 
property

  ：检索或设置对象中的参与过渡的属性
• 
duration

  ：过渡动画的持续时间
• 
timing-function

  ：检索或设置对象中的过渡的动画类型
• 
delay

  ：检索或设置对象延迟过渡的时间

Grid布局

Grid Contatiner

网格容器


元素应用

display:grid

，它是所有网格项的父元素

Grid Item

网格项


网格容器的子元素

<div class="container">
	<div class="item">one</div>
	<div class="item">two</div>
	<div class="item">three</div>
	<div class="item">four</div>
</div>

<style>
	.container{
		display:grid;
	}
</style>

Grid Track

网格轨道


两个相邻的网格线之间为网格轨道

Grid Cell

网格单元


两个相邻的列网格线和两个相邻的行网格线组成的是网格单元

Grid Area

网格空间


四个网格线包围的总空间

单位


fr


剩余空间分配数

用于在一系列长度值中分配剩余空间，如果多个已制定了多个部分，则剩下空间根据各自的数字按比例分配


gr


网格数（暂未采纳）

容器属性

display


属性规定元素应该生成的框的类型


grid


生成块级网格


inline-grid


生成行内网格


subgrid



目前所有浏览器都不兼容


如果网格本身是网格项（嵌套网格容器），此属性继承父属性网格大小

当元素设置了网格布局

column


float


cleat


vertical-align

属性无效

grid-template


以空格来分隔的多个值来定义网格的列和行


grid-template-columns

列方向


grid-template-rows

行方向

属性值

• 轨道大小
  
track-size

  ：可以使用css长度（px、em等）、百分比、或用分数（用fr单位）
• 网格线名字
  
line-name

  ：可以选择任何名字

.container{
	grid-template-columns:40px 50px auto 80px 30px;
	grid-template-rows:20px 15px auto;
}
//3行5列

.container{
	grid-template-columns:[no1] 40px [no2] 50px [no3 nn] auto [no4] 80px [no5] 30px;
	grid-template-rows:20px 15px auto;
}
//竖线取名
//名称可取多个 空格分隔

grid-template-areas


通过引用

grid-template

属性指定的网格区域的名称来定义网络模板

• 
grid-area-name

  ：使用
  
grid-area

  属性设置的网格区域的名称
• 
.

  ：点号代表一个空网格单元
• none：没有定义网格区域

<style>
    grid-template-areas:
            "na1 na na na2 na2"
            "na1 na na na2 na2"
            "na1 na na na2 na2"
            "na1 na4 na4 na2 na2"
            "na1 na4 na4 na2 na2"
    ;
</style>

使用

grid-areas:<name>

来引用区域

gap


指定网格 线的大小，可以想象为列/行之间的间距的宽度

• 
grid-column-gap

  ：列间距
• 
grid-row-gap

  ：行间距

items


网格对齐

• 
justify-items

  沿着行轴对齐网格内的内容
• 
align-items

  ：沿着列轴对齐网格中的内容

属性：


start

：内容与网格区域的左端对齐


end

：内容与网格区域的右端对齐


center

：内容位于网格区域的中间位置


stretch

：内容宽度占据整个网格区域的中间位置（默认值）

content


对齐网格的线的间距（我感觉没用 所以没学）

grid-auto


同上

CSS函数

repeat()


重复

跟踪列表的重复片段，允许大量显示重复模式的列或行以更紧凑的形式编写

grid-template-columns:1fr 1fr 1fr 1fr 1fr;
//简写
grid-template-columns:repeat(5,1fr);