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-rows
grid-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%,这样就全部看到了