CSS定义与注意事项
CSS
-了解-
层叠样式表，Cascading Style Sheets
注意事项
-
每个CSS样式由两部分组成 选择符(器) 和 声明
-
声明由两部分组成 属性 和 属性值
-
声明必须放在花括号
{}中（内部样式和外部样式），属性和属性值用:`连接 -
每条声明用
;结束 -
当属性有多个属性值时，每个属性值用
空格分开 -
空格和换行不影响效果
选择符{ 属性:属性值; 属性:属性值; }
CSS引入方式
行内样式
<div style="width:200px;height:200px">内容</div>
行内样式就是写在html标签中的 style 属性中
内部样式
<head>
<style>
div{
width:200px;
height:200px;
}
</style>
</head>
内部样式是写在 head 标签中的，用 style 标签包裹
外部样式 其一
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
外部样式就是在 head 标签中，使用 link 标签链接外部CSS文件
外部样式 其二
-了解-
<head>
<style>
@import url(mystyle.css);
</style>
</head>
使用@import引入css文件
CSS选择器
-重点-
标签选择器
<style>
div{
width:200px;
height:200px;
}
</style>
直接使用html标签
类选择器
<head>
<style>
.box{
width:200px;
height:200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
- 在 html 标签中定义属性
class并用=命名（假设为className） - 若 html 存在多个className，则可以用空格连接
- 在
style中使用.className引用 - 当多个class中有重复的属性时，并且权重一样时，最终结果取最后的class的属性的属性值
- 同样的class可以作用于多个 html 标签
id选择器
<head>
<style>
#box{
width:200px;
height:200px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
- 在 html 标签中定义属性
id并用=命名（假设为idName） - 一个 html 标签中只能有一个id
- 在
style中使用#idName引用 - 同样的id可以作用于多个 html 标签，但是 强烈不建议 ，因为id的作用多数用于JaveScript的调用，需要保持 唯一性
通配符选择器
<head>
<style>
*{
padding:0;
margin:0;
}
</style>
</head>
用 * 引用，表示所有标签元素，一般用于初始化，去除所有标签的自带样式，有助于自定义CSS样式
群组选择器
<head>
<style>
div,.className,#idName{
padding:0;
margin:0;
}
</style>
</head>
群组选择器只是一种写法,是各种选择器用 , 拼接的写法，并不是一种真正的选择器
当一部分标签样式相同时，可以将这些标签的公共样式提取出来，用各自的选择符（标签选择器 或 类选择器 或 id选择器 等）用 , 拼接，一同作用样式
层级选择器
<div>
<p class="p1">
<h3>
<p class="p2"></p>
</h3>
</p>
<p class="p3">哈哈</p>
</div>
- html 是有层级关系的
div内部的所有标签都是div的后代，同理h3和class="p2"的既是 div 的后代也是class="p1"的p标签的后代class="p1"和class="p3"是兄弟关系class="p1"和class="p3"是div的子代（亲儿子）
后代选择器
<head>
<style>
div .className #idName{/*选择div标签内class为className的并且内部id为idName的标签*/
padding:0;
margin:0;
}
div p{ /*选在div标签下所有的p标签，不限制层级数量*/
background:red
}
</style>
</head>
<body>
<div>
<p class="className">
<h3>
<p id="idName"></p>
</h3>
</p>
</div>
</body>
- 当 html 标签存在层级关系时，我们一般把内侧的标签称作外侧标签的后代
- 后代可以多层隔代，不用紧挨着，不像 子代选择器
- 标签选择器，类选择器，id选择器可以混写
- 当存在标签不好区分但是又要指定特定标签时，作用样式时可以用 后代选择器 根据层级关系可以用
空格连接
子代选择器
<head>
<style>
div>p{ /*选在div标签下第一层级别p标签，class为p1
和p3的标签*/
background:red
}
</style>
</head>
<body>
<div>
<p class="p1">
<h3>
<p class="p2"></p>
</h3>
</p>
<p class="p3">哈哈</p>
</div>
</body>
- 选择的是亲儿子（第一层级）
- 用大于号
>拼接
第一兄弟选择器
<head>
<style>
.p0+p{ /*选择class=p0的标签，它的兄弟中紧跟在它后
面的第一个元素*/
background:red
}
</style>
</head>
<body>
<div>
<p class="p0">吼吼</p>
<span>嘿嘿</span>
<p class="p1">
<h3>
<p class="p2"></p>
</h3>
</p>
<p class="p3">哈哈</p>
<p class="p4">嘻嘻</p>
</div>
</body>
- 选择的是紧跟着自己的第一个兄弟标签，不包含自己
- 若紧跟自己的第一个标签并不是指定的标签，则样式无效，如例子中
class="p0"的第一个兄弟是span，并不是指定的p标签，所以样式无效
所有兄弟选择器
<head>
<style>
.p0~p{ /*选择class=p0的标签，它的所有兄弟中为p标签的元素*/
background:red
}
</style>
</head>
<body>
<div>
<p class="p0">吼吼</p>
<span>嘿嘿</span>
<p class="p1">
<h3>
<p class="p2"></p>
</h3>
</p>
<p class="p3">哈哈</p>
<p class="p4">嘻嘻</p>
</div>
</body>
- 选择的是自己后面的所有兄弟元素并且是指定标签，不包含自己
- 例子中选择的是
class="p0"的所有兄弟中为p标签的元素，并不包含自己和span标签
属性选择器
<head>
<style>
div{
width: 100%;
height: 50px;
}
[class]{ /*表示只要带有class属性的即可 */
background-color: red;
}
[class][id]{/*表示同时带有class属性和id属性的 */
background-color: darkcyan;
}
div[class]{ /*表示带有class属性的div即可 */
background-color: rosybrown;
}
div [class]{ /*表示div标签的后代中带有class属性的 */
background-color: yellow;
}
div[class="box2"]{ /*完全匹配，只有一个class且class为box2的div
，相当于div.box2*/
background-color: darkorange;
}
div[class~="box2"] {/*只要带有class为box2的div就可以*/
background-color: darkorchid;
}
[class^=b] { /*className以b开头的标签元素*/
background-color: black;
}
[class$=b] { /*className以b结尾的标签元素*/
background-color: black;
}
[class*=b] { /*className中包含b的标签元素*/
background-color: black;
}
</style>
</head>
<body>
<p class="p1"></p>
<div class="box1">
<div class="box2">
<div class=box3></div>
</div>
<div id="box6"></div>
<div class="box2 box4 box5"></div>
</div>
</body>
- 中括号
[]表示 - 可以多重限制，多个
[]拼接 - 注意空格，空格代表后代，无空格则表示并且（即上一点注释）
- 针对标签所有属性都适用，如class，id，name等等
伪类选择器
状态伪类
<head>
<style>
a{
color:red;
}
a:link{ /* 初始状态 */
color:yellow;
}
a:visited{ /* 访问之后 */
color: red;
}
a:hover{ /* 鼠标划过或停留 */
color:orange;
}
a:active{ /* 点击激活 */
color:green;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
- 写作方式
:伪类 - 常用于
<a>标签，但是也可用于其他标签，不限制 - 如果使用这四个伪类，可以有缺少某一个活多个伪类，但是顺序不能变
- 一般情况下设置完
<a>标签自己的属性后，通常只使用:hover这个伪类
结构伪类
<head>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 940px;
height: 100px;
margin:0 auto;
background:yellow;
}
.box div{
float:left;
width: 300px;
height: 100px;
background: red;
margin-right: 20px;
border: 1px solid black;
box-sizing: border-box;
}
.box div div{
width: 50px;
height: 50px;
background-color: blueviolet;
}
.box div:last-child{ /*选择className为box的后代元素中每个层级为div标签的最后一个元素*/
margin-right: 0;
background-color: aqua;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div class="box2">
<div></div>
<div class="box3"></div>
</div>
</div>
</body>
- 通过html的元素标签的结构来进行样式的一种方式
- 用于要选择标签，不会作用于父类
- 逐层查找，如例子中，第一层级中
class=box2的div会被作用伪类，再往内部层级中class=box3的div会被作用伪类
:only-child 只有一个子元素的元素
:empty 没有后代元素同时没有内容（包括空格和换行）
:root 选择根目录，代指HTML
伪元素选择器
::after
<head>
<style>
p::after {
content:"- say";
background-color:yellow;
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<p>I am a duck</p>
<p>I live in Duckburg.</p>
</body>
- 在被选元素的内容后面插入内容
- 使用 content 属性来指定要插入的内容
::before
<head>
<style>
p::before {
content:"- say";
background-color:yellow;
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<p>I am a duck</p>
<p>I live in Duckburg.</p>
</body>
- 在被选元素的内容前面插入内容
- 使用 content 属性来指定要插入的内容
::first-letter
<head>
<style>
p:first-letter {
font-size:200%;
color:#8A2BE2;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
</body>
- 选择元素标签的首字母，并为其设置样式
::first-line
<head>
<style>
p:first-line {
font-size:200%;
color:#8A2BE2;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
</body>
- 选择元素标签的首行，并为其设置样式
UI元素伪类选择器
- 说白了就是某个标签在什么状态时，我们要它怎么样
- 常用于
form表单 - 通常使用
appearance:none去掉默认样式，比如type=checkbox时，会受到默认样式的影响，自定义样式会被覆盖
否定选择器
<head>
<style>
:not(p) { /*不是p标签的其他*/
background-color: #ff0000;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
</body>
- 写法
:not(s)，s代指要否定的属性/类/id/元素标签等
选择器的权重
一般情况下选择器的权重用四位数 0 0 0 0 表示
- 样式冲突时候，权重高的覆盖权重低的
- 权重相同时，按照就近原则
属性
文本属性
font-size 文本大小
font-family 字体
color 字体颜色
font-weight 加粗
font-style 倾斜
text-align 文本水平对齐
line-height 行高
letter-spacing 字符间距
word-spacing 单词间距
text-indent 首行缩进
text-decoration 文本线修饰
text-transform 英文大小写转换
text-shadow 文本阴影
<style>
div{
text-shadow: 0px -10px 1px red, 0px 10px 1px yellow;
/* text-shadow: 0px 10px 1px yellow; */
}
</style>
font 文本属性复合写法
列表属性
list-style-type 列表样式
list-style-image 将图片设置为列表样式
list-style-position 列表样式标记位置
list-style 复合写法
背景属性
background-color 背景色
background-image:url() 背景图片
background-repeat 平铺效果
background-position 背景图片位置
background-size 背景大小
background-attachment 背景图片固定
background 复合写法
浮动
<head>
<style>
p {
width:200px;
height:200px;
background-color: #ff0000;
float:left;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
</body>
- 使独占一行的元素能够在一行显示
- 浮动会脱离文档流
- 浮动后，元素内的文字会产生文字环绕的效果
清除浮动
- 给浮动元素的父类定义同样的高度
- 给浮动元素的父类的兄弟使用clear
- 给浮动元素增加一个空兄弟并使用clear
- 给浮动元素的父类使用overflow:hidden
- 万能清楚浮动
-
<style> div::after{ content: ""; clear: both; display: block; width: 0; height: 0; visibility: hidden; } </style>
盒模型
盒子的宽高由三部分组成
盒子宽高 = 内容宽高 + 内边距 + 边框宽度
内边距
padding 内容和边框之间的距离，不支持负值
边框
border 边框
border-width 边框宽度
border-style 边框样式
border-color 边框颜色
border-radius 边框圆角
支持多值写法
支持水平垂直分别设置长度而产生弧度
将盒子变成圆
复合写法 border:width style color
border 设置为空是0，不是none
外边距
margin 盒子和其他元素的距离，可以负值
margin:0 auto 在屏幕横向居中
img标签特性
<img> 属于行内块元素，初始化margin和padding都设置为0，对此标签作用无效，在和其他标签配合时会产生间距，使用 display：block 转化为块元素即可。
box-sizing
正常情况下，盒子在设置宽高之后，再增加padding或border则需要重新计算内容宽高，否则盒子的总宽高就会改变
盒子阴影
box-shadow
溢出属性
overflow 对于溢出边界的内容如何解决
空余空间
white-space 规定文本显示方式
多余文本显示省略号
<style>
div{
background:yellow;
width: 200px;
height: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
- 必须设置宽度
- 必须
white-space: nowrap - 必须
overflow:hidden - text-overflow:ellipsis（省略号） | clip（不显示省略号）
元素类型转换
display
定位
position
通常会用到“子绝父相”的原则，即子类绝对定位，父类相对定位
使用 top | right | bottom | left 产生position的位置
使用position设置三角号
<style>
span{
width: 0;
height: 0;
display: inline-block;
border:5px solid transparent;
border-top:5px solid black;
position: relative;
top:2.5px;
}
</style>
水平垂直居中
<style>
/*子绝父相*/
.box{
position:relative;
}
.box div{
position:absolute;
top:50%;
right:50%;
margin-left:-width/2;
margin-top:-height/2;
}
</style>
- 若针对浏览器，则不需要设置相对定位
- 子绝父相是相对于子类在父类的位置
定位于浮动区别
- 浮动是半脱离文档流，会产生文字环绕效果
- 绝对定位是完全脱离文档流
行内元素变块元素
- display:block
- position:absolute
- float
透明度
opacity
隐藏滚动条
<style>
::-webkit-scrollbar {
display: none;
}
</style>
锚点
使用<a>标签实现页面不同区域的跳转
<ul>
<li>
<a href="#a">A page</a>
</li>
<li>
<a href="#b">B page</a>
</li>
<li>
<a href="#c">C page</a>
</li>
<li>
<a href="#d">D page</a>
</li>
</ul>
<div id="a">
a page
</div>
<div id="b">
b page
</div>
<div id="c">
c page
</div>
<div id="d">
d page
</div>
- 通过某区域的
id关联<a>标签的href属性
宽度自适应
适用块元素
<style>
*{
margin:0;
padding:0;
}
div{
width: auto; /*不写或者 auto就是自适应*/
height: 100px;
padding-left: 100px;
background:yellow;
}
</style>
高度自适应
- 父类高度在不设置的情况下，由内容撑起
- 一般会设置
min-height来保证基本布局的合理性和美观性
隐藏属性
display：none不占位隐藏visibility:hidden占位隐藏
字体引入
<style>
@font-face{
font-family: fontName;
src:url(font/ygyxsziti2.0.ttf);
}
div{
font-family: fontName;
font-size: 50px;
color:red;
text-shadow: 5px 0px 0px green;
}
</style>
- 自定义foneName和字体路径
- 使用
font-family引用自定义的fontName
窗口自适应
常用于移动端
<head>
<style>
*{
margin:0;
padding: 0;
}
html,body{
height: 100%;
}
.box{
width: 100%;
height: 100%;
}
.child1{
background:blue;
height: 50%;
}
.child2{
background:red;
height: 50%;
}
</style>
</head>
<body>
<div class="box">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
- html,body { height: 100%; }
- 元素 { width: 100%; height: 100%; }
动态计算函数-calc( )
width:calc(100% - 20px);
支持 + - * /，遵循运算优先级
弹性盒
适用移动端布局
给父类设置 display:flex
<head>
<style>
.box{
width: 500px;
height: 500px;
border:2px solid black;
margin:100px auto;
display: flex;/* 弹性盒 */
}
.box span{
width: 100px;
height: 100px;
border:1px dashed red;
margin:auto;
}
</style>
</head>
<body>
<div class="box">
<span>1111</span>
<span>2222</span>
<span>3333</span>
<span>4444</span>
</div>
</body>
- 子元素默认横向排列
- 行内元素变成了块级元素
- 只有一个元素的时候，
margin:auto自动居中
弹性盒轴
默认水平向右是主轴，垂直向下是侧轴
更改弹性盒主轴
flex-direction
column 纵向 | column-reverse 纵向反向
容器和项目定义
弹性盒叫容器，内部元素叫项目
弹性容器
主轴对齐方式
justify-content
侧轴对齐方式
align-item
弹性盒折行
默认情况下项目过多，会互相挤压
flex-warp:warp; 产生折行
行间距
align-content
弹性项目
在侧轴上的对齐方式
align-self
调整项目顺序
order
剩余空间
flex
- 当存在多个项目时，例如box1，box2，box3
- box1，box2设置width或者height，box3设置flex任意值时，box1和2受宽高影响，box3占满剩余空间
- 当均设置width或者height，但是同时设置flex时，width或者height失效，根据各自flex值按照比例分配所有空间
挤压空间
flex-shrink
数值型
移动端布局
移动端布局三种方式
- 百分比
- 弹性盒
- rem布局
移动端必备标签
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
width
initial-scale
user-scalable
分辨率
- 开发者模式下的移动端像素是CSS像素，即常使用的px单位
- 手机出厂的分辨率是物理分辨率，是设备真正的像素
- 在web上，设计图是1px，则代码写1px，但是在移动端，是不一定的，需要转化
浅谈css像素与物理像素
常用单位
px与em与rem
px 像素
em 相对于父元素的字体大小，总是找父元素来定义自己的值
rem 相对于根元素html的字体大小，常用移动端布局
vw和vh
vh view-height
vw view-width
多列布局
多数使用于 瀑布流
<head>
<style>
.box{
column-count: 5;
/* 设置显示列数 */
}
.box img {
width: 100%;
}
.box div{
border:3px solid green;
padding:5px;
margin-bottom: 10px;
break-inside: avoid;
/* 禁止盒子内部折行 */
}
.box div p {
line-height: 30px;
text-align: center;
font-size: 14px;
}
</style>
</head>
<body>
<div class="box">
<div>
<img src="images/1.jpg" alt="">
<p>title</p>
</div>
<div>
<img src="images/2.jpg" alt="">
<p>title</p>
</div>
<div>
<img src="images/3.jpg" alt="">
<p>title</p>
</div>
.
.
.
.
.
.
</div>
</body>
column-gap 列间距
column-rule 列边框
column-span 跨列
break-inside 设置盒子内部中断（折行）效果
网格布局
display:grid
会将元素变成块级元素
将容器划分为行和列并产生单元格
网格线：网格线的划分用于跨行跨列
- 要记住网格线的编号
容器属性
行与列的宽度
grid-template-rows 行宽度
grid-template-columns 列宽度
<head>
<style>
div.box{
width: 600px;
height: 600px;
border:5px solid gray;
display: grid;
/* 1 固定值 */
grid-template-rows: 200px 200px 200px;
grid-template-columns: 200px 200px 200px;
/* 2 百分比 */
grid-template-rows: 33.3% 33.3% 33.4% ;
grid-template-columns: 33.3% 33.3% 33.4% ;
/* 3 repeat */
grid-template-rows: repeat(3,33.33%);
grid-template-columns: repeat(3,33.33%);
/* 4. repeate autofill */
grid-template-rows: repeat(auto-fill,200px);
grid-template-columns: repeat(auto-fill,20%);
/* 5. fr 片段 */
grid-template-rows: 1fr 2fr 1fr;
grid-template-columns: 1fr 2fr 1fr;
/* 6. minmax */
grid-template-rows: minmax(100px,200px) 200px 100px;
grid-template-columns: 200px 200px 200px;
/* 7 auto */
grid-template-rows: 100px 200px auto;
grid-template-columns: 100px 200px auto;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
auto-fill
fr片段
minmax取值
auto自动占满剩余空间
行/列间距
grid-row-gap 行间距
grid-column-gap 列间距
grid-gap 复合写法
合并单元格
grid-template-area 划分区域
grid-area 指定区域
<head>
<style>
.box {
width: 600px;
height: 600px;
/* background:red; */
display: grid;
border: 5px solid gray;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px 200px;
grid-template-areas: 'a e e'
'a e e'
'g h i'
;
}
.box div{
width: 100%;
height: 100%;
border: 1px solid red;
}
.box div:nth-child(1){
grid-area:g;
}
.box div:nth-child(2){
grid-area:e;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>7</div>
</div>
</body>
- 通过
grid-template-rowsgrid-template-columns指定单元格数量和宽度 - 通过
grid-template-area划分区域 - 通过给项目用
grid-area指定区域
对齐方式
项目在容器中的排列方向
grid-auto-flow
column
单元格在容器中的对齐方式
当单元格设置的宽度不能完全占用容器时
<head>
<style>
.box{
width: 600px;
height: 600px;
border:5px solid gray;
display: grid;
grid-template-rows: repeat(3,100px);
grid-template-columns: repeat(3,100px);
justify-content: space-around;
align-content: center;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
justify-content 横向对齐方式
align-content 纵向对齐方式
place-content 复合写法，align | justify
- place-content:space-evenly center
space-around
space-between
center
start
end
项目在单元格中的对齐方式
<head>
<style>
.box{
width: 600px;
height: 600px;
/* background:red; */
border:5px solid gray;
display: grid;
grid-template-rows: repeat(3,100px);
grid-template-columns: repeat(3,100px);
place-content: center center;
justify-items: center;
align-items:center;
}
.box div{
border:1px solid green;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
justify-items 单元格内横向对齐方式
align-items 纵向对齐方式
place-items 复合写法，align justify
- place-items:start center
center
start
end
项目属性
合并单元格
通过网格线合并单元格
行
grid-row-start 起始网格线编号
grid-row-end 终止网格线编号
grid-row 复合写法，起始/终止
列
gird-column-start 起始网格线编号
grid-column-end 终止网格线编号
grid-column 复合写法，起始/终止
响应式布局
适用于展示性的页面，不适合电商等页面，效率低下
<style>
@media screen and (max-width:1000px) and (min-width:500px){
body{
background:red;
}
}
</style>
逻辑关键字
一些限制常用属性
min-height 最小高度
max-height 最大高度
min-width 最小宽度
max-width 最大宽度
orientation 屏幕方向
常用断点
320px（主） | 480px（次） | 640px（次） | 720px（主） | 768px（次） | 1024px（主）
rem布局
<style>
*{
margin:0;
padding:0;
}
html{
/*基准font-size*/
font-size: 100px;
}
</style>
<script>
//font-size 计算 px
document.documentElement.style.fontSize=document.documentElement.clientWidth/750 * 100 +'px'
//font-size 计算 vw
document.documentElement.style.fontSize=100/750 * 100 +'vw'
</script>
- 设置html根目录
基准font-size - 设置
script代码两种方式- 动态获得
px
- 动态获得
vw
- 动态获得
渐变函数
线性渐变
background/background-image:linear-gradient(direction, color-stop1, color-stop2, ...)
color：渐变的终止颜色，支持多颜色渐变，并且支持百分比，一般书写方式是 color percent，用空格连接
<head>
<style>
div{
width: 500px;
height: 500px;
border:10px solid gray;
background:linear-gradient(red 10%,yellow 10% ,yellow 30%,green 30%);
}
</style>
</head>
<body>
<div></div>
</body>
径向渐变
background/background-image:radial-gradient(shape size at position,color-stop1,color-stop2, ...)
英文写法
shape：径向渐变形状，但是受外部盒子形状的影响，如果是circle情况下，外部盒子需要是正方形
size：定义渐变的结束原则
color 渐变的终止颜色，支持多颜色渐变，并且支持百分比，一般书写方式是 color percent，用空格连接
<head>
<style>
div{
width: 500px;
height: 500px;
border:10px solid gray;
background-image: radial-gradient(circle farthest-side at 60% 55%, blue, green, yellow, black);
}
</style>
</head>
<body>
<div></div>
</body>
重复渐变
repeating-linear/radial-gradient(......)
动画过渡
transition:被执行动画的标签属性 动画持续时间 时间曲线 延迟时间;
多个动画可以用逗号隔开
设置单个transition
动画属性
transform
支持多动画，各个动画之间用空格相连，一般一定是先做位移再做其他动画
实现过渡动画可以配合transition，否则动画就比较跳跃
坐标系
X、Z轴顺时针为正，Y轴逆时针为正
2D/3D平台
transform-style
3D景深
perspective:800/900px
一般设置为800px或者900px景深度
改变中心位置
transform-origin:(x,y,z)
z：为3d属性时使用，px
x：left | center | right | px | %
y：top | center | bottom | px | %
3D效果必备属性
transform-style:preserve-3d
perspective:800px
位移动画
-
2D位移
translate(X,Y)translateX(px)translateY(px)
-
3D位移
translateZ(px) -
复合写法
translate3d(X,Y,Z)
<head>
<style>
div{
width: 200px;
height: 200px;
background:red;
transition:all 2s;/*过渡动画*/
transform: translateX(50px);/*初始就移动一定的位移*/
}
div:hover{
transform: translate(100px,100px);/*产生动画的最后效果*/
}
</style>
</head>
<body>
<div></div>
</body>
缩放
-
2D缩放
scale(倍数)scaleX()scaleY()
-
3D缩放
scaleZ(倍数) -
复合写法
scale3d(x,y,z)
旋转
-
2D旋转
rotate(deg)rotateZ()默认
-
3D旋转
rotateX()rotateY() -
复合写法
rotate3d(x,y,z,deg)x,y,z取值0-1，根据deg的数值相乘得到最终旋转效果
倾斜
skew(xdeg，ydeg)
skewX()右下角往右边拉动skewY()右下角往下边拉动
关键帧动画
animation:动画名称 持续时间 时间曲线 重复次数
时间曲线 请参照 动画过渡
声明动画
-
from和to
<head> <style> div{ width: 200px; height: 200px; background:red; animation: whchange 2s linear infinite; /* infinite 无限次 */ } /* 声明动画 */ @keyframes whchange { from{ width: 200px; height: 200px; background:red; } to{ width: 400px; height: 600px; background:green; } } </style> </head> <body> <div></div> </body>格式
@keyframes 动画名称{ from{ 属性初始值 } to{ 属性终止值 } } -
百分比
<head> <style> div{ width: 200px; height: 200px; background:red; animation: whchange 2s linear infinite; /* infinite 无限次 */ } /* 声明动画 */ @keyframes whchange { 0%{ transform: translateX(0); } 5%{ transform: translateX(-640px); } 25%{ transform: translateX(-640px); } 30%{ transform: translateX(-1280px); } 50%{ transform: translateX(-1280px); } 55%{ transform: translateX(-1920px); } 75%{ transform: translateX(-1920px); } 80%{ transform: translateX(-2560px); } 100%{ transform: translateX(-2560px); } } </style> </head> <body> <div></div> </body>格式
@keyframes 动画名称{ 0%{ 属性 } 10%{ 属性 } . . . 100%{ 属性 } }
关键帧动画单一属性
animation-direction：动画运行状态
animation-fill-mode：动画停止状态
逐帧动画
animation: run 5s steps(1,end);
帧状态
-
end
保留当前帧，直到动画结束
当前帧就是正在播放的这一帧，刚开始的帧是0%，当动画进行到最后刚进入100%时候，表示动画已经结束，所以100%这一阵会以肉眼捕捉不到的速度播放过去，回到0%这一帧，所以此值时看不到最后一帧的
可以增加
forwards保留最后一帧 -
start
保留下一帧，直到动画结束
保留下一帧导致0%会以很快的速度过去，看不到第一帧
可以在100%后循环第一帧0%，这样就全部看到了
