CSS
Cascading Style Sheets 层叠样式表
给HTML文档进行样式设计以及布局的
CSS是为HTML文档服务的
需要在HTML文档中引入CSS的行为操作
引入方式
- 行内引用
在开始标签添加属性 style 在属性值中设置标签样式 - 内部引用
在head标签中 添加style标签 在style标签之间就是CSS的内容 - 外部引用
单独的CSS文件
在head标签中通过link引入CSS层叠样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 外部引用
rel 必须设置的 CSS文件的话 对应的值就是stylesheet
href 引入的是css文件的路径
-->
<link rel="stylesheet" href="../css/style.css" />
<!-- 内部引用 -->
<style>
/* CSS的内容 */
/* 元素选择器定位标签 */
p{
/* 边框 */
border: dotted 2px palevioletred;
/* 设置文字颜色 */
color: purple;
/* 设置背景颜色 */
background-color: deepskyblue;
}
</style>
</head>
<body>
<!-- 行内引入设计文字颜色 -->
<p style="color: red;">草莓喜温凉气候，草莓根系生长温度5-30℃，适温15-22℃，茎叶生长适温为20-30℃，芽在-15-10℃发生冻害，花芽分化期温度须保持5-15℃，开花结果期4-40℃。草莓越夏时，气温高于30℃并且日照强时，需采取遮荫措施。</p>
<p>香蕉喜湿热气候，在土层深、土质疏松、排水良好的地里生长旺盛。在类似牙买加南部的半干旱地区灌溉栽培也已成功。野生香蕉采用种子栽培，人工香蕉可用吸根和假鳞茎分株栽培；第一次收获需10～15个月，之后几乎连续采收。</p>
<p>苹果是落叶乔木，有较强的极性，通常生长旺盛，树冠高大，树高可达15米，栽培条件下一般高3～5米左右。树干灰褐色，老皮有不规则的纵裂或片状剥落，小枝光滑。果实为仁果，颜色及大小因品种而异。喜光，喜微酸性到中性土壤。最适于 土层深厚、富含有机质、心土为通气排水良好的沙质土壤。</p>
<div>
草莓地应选择地势稍高，地面平整，排灌方便，光照良好，有机质丰富，保水力强，通气性良好，PH值呈弱酸性或中性的肥沃土地。前茬作物以蔬菜、豆类、瓜类、小麦等较好。
</div>
</body>
</html>
-
这三种引入方式的作用范围：
- 行内引用 — 只作用于当前行
- 内部引用 — 作用于当前的HTML文档
- 外部引用 — 作用于关联该CSS文件的所有HTML文档
-
这三种引入方式的优先级别：
选择器也是以这种方式判断优先级别的
查找标签定位越精确 优先级别越高
行内引用 > 内部引用=外部引用
到底采用内部还是采用外部 看后来者 因为后来者会把对应相同的样式设计给覆盖掉 -
CSS的注释方式：
/注释的内容/
不可以相互嵌套
选择器
在内部引用和外部引用的时候 需要查找定位到需要进行样式设计的标签，这种查找定位的方式就称作是选择器
元素选择器 — 标签名称选择器
就是根据标签名称进行定位查找
语法格式：
标签名称{
样式名:样式值;
样式名:样式值;
....
}
全局选择器 — 匹配所有的标签
*{
样式名:样式值;
样式名:样式值;
....
}
根选择器
根 — 只有子标签 没有父标签
:root{
样式名:样式值;
样式名:样式值;
....
}
id选择器
根据id属性值去进行定位查找标签的
#id值{
样式名:样式值;
样式名:样式值;
....
}
类选择器
根据class的属性值进行查找的
一个标签可以赋予多个类
一个类可以被应用于多个标签
多个类使用空格分开
<开始标签 class="类1 类2 类3"></开始标签>
.类名{
样式名:样式值;
样式名:样式值;
....
}
属性选择器
name title href 这些属性是没有特殊符号可以表示的 如果我想通过这些属性来进行定位查找 怎么操作？？ 格式如下：
- 只根据属性名进行定位的
选择器[属性名]{
样式名:样式值;
样式名:样式值;
....
}
- 明确属性值定位查找
选择器[属性名=“属性值”]{
样式名:样式值;
样式名:样式值;
....
}
- 多个属性的筛查
选择器[属性1][属性2]{
样式名:样式值;
样式名:样式值;
....
}
- 筛选属性值以指定内容开头
选择器[属性^="内容"]{
样式名:样式值;
样式名:样式值;
....
}
- 筛选属性值以指定内容结尾的
选择器[属性$="内容"]{
样式名:样式值;
样式名:样式值;
....
}
- 筛选属性值包含指定内容
选择器[属性*="内容"]{
样式名:样式值;
样式名:样式值;
....
}
包含选择器
定位具有标签嵌套这种格式的标签的
- 父找子标签
父标签对应的选择器 > 子标签对应的选择器{
样式名:样式值;
样式名:样式值;
....
}
- 先辈找后辈标签(包含子标签)
先辈标签对应的选择器 后辈标签对应的选择器{
样式名:样式值;
样式名:样式值;
....
}
- 相邻标签
- 兄弟标签
伪类选择器
- 鼠标悬浮选择器: 当鼠标悬浮到这个标签上就能触发这个选择器
.类名:hover{
样式名:样式值;
样式名:样式值;
....
}
- 针对于超链接的
- 未被访问
标签:link{ 样式名:样式值; 样式名:样式值; .... } - 即将访问
标签:active{ 样式名:样式值; 样式名:样式值; .... } - 访问后
标签:visited{ 样式名:样式值; 样式名:样式值; .... }
- 未被访问
结构选择器
- 否定选择器
在选择器中定位到没有选择器1标记的标签
选择器:not(选择器1){
样式名:样式值;
样式名:样式值;
....
}
- 空节点选择器
- 找全局空节点
:empty{ 样式名:样式值; 样式名:样式值; .... }- 找指定选择器中为空间点的
选择器:empty{ 样式名:样式值; 样式名:样式值; .... } - 针对于一些被包含的标签的结构选择器 例如 td li
- 选择器:first-child 指定选择器下的第一个子节点
- 选择器:last-child 指定选择器下的最后一个子节点
- 选择器:nth-child(数值/even/odd) 指定选择器下的第几个节点 或者 偶数行 或者是奇数行
组合选择器
不同标记的标签 样式是一样
选择器1, 选择器2, 选择器3,...{
样式名:样式值;
样式名:样式值;
....
}
样式设计
关于背景的样式设计
设置宽度、高度
单位 px 像素 或者 %（占父标签的百分之多少）
width: 100%;
height: 300px;
背景颜色
background-color: red;
background-color: #aafcbe;
background-color: rgb(252, 162, 150);
background-color: rgba(255, 12, 35,0.5);
background-color: hsl(10, 100%, 0%);
设置背景颜色过渡
- 线性过渡
linear-gradient(方向， 颜色值1，颜色值2， 颜色值3…)
方向不设置的话默认为从上到下的 to bottom
还可以设置成角度- 从下到上 to top
- 从左到右 to right
- 从有到左 to left
- 从右下到左上 to top left
- 从左下到右上 to top right
- to bottom left
- to bottom right
- odeg 从下到上的渐变
- 180deg 从上到下
- 90deg 从左到右
- 270deg 从右到左
background: linear-gradient(30deg,red, orange, yellow, green, cyan, blue, purple); - 设置 椭圆形渐变
radial-gradient(形状, 颜色值， 颜色值…)
形状默认为椭圆
可以设置为circle 变成圆
background: radial-gradient(red, orange, yellow, green, cyan, blue, purple);
background: radial-gradient(circle,red, orange, yellow, green, cyan, blue, purple);
设置背景图片
background-image: url(…/img/动漫.jpg);
- 图片大小 = 标签大小 正好设置背景图
- 图片大小 > 标签大小 按照标签大小截取图片设置为背景图
- 图片大小 < 标签大小 平铺的现象
设置平铺的效果
background-repeat: no-repeat;
- no-repeat 不出现平铺的状态 图片默认在左上角
- repeat-x 横向平铺 纵向不平铺
- repeat-y 横向不平铺 纵向平铺
- repeat 平铺默认值
背景图位于标签的中央
相对于标签移动背景图的位置
- 横向移动 left(默认) center right 自定义数值（距离左边多少，向右移动值为正 反之为负）
- 纵向移动 top(默认) center bottom 自定义数值(距离上边多少，向下移动值为正 反之为负)
如果横向和纵向一样 写一个值即可
- background-position: center center;
- background-position: center;
- background-position: -100px 100px;
上面三个行为合并成一个方法
background: url(…/img/动漫.jpg) no-repeat center bottom;
- url引入图片路径
- 是平铺的状态
- 水平移动
- 垂直移动
background_size:
- contain 适应
关于文字的样式设计
-
设置文字的字体
font-family: “楷体”;
可以设置多种字体
使用空格隔开即可 字体是汉字或者多个单词组成的使用引号包含
使用的时候使用哪个字体 — 浏览器识别 识别哪个用那个 都不识别用默认的 -
设置文字的颜色
color: red; -
设置字号
font-size: 2em;
单位：- px 像素
- em 默认字体的倍数
-
设置字体加粗
font-weight: normal;
100到900 100-500是常规字体 600-900是加粗字体- bold
- bolder 加粗
- normal 常规字体
- lighter 细体
-
设置字体风格
font-style: italic;
斜体：oblique、italic -
设置标签内容的水平对齐方式
text-align: left;- left
- center
- right
-
设置行高
一行文本的高度 = font-size + 文本与标签上下的间隙
line-height: 60px;
当标签中只有一行文本的时候 行高设置成标签的高度 文本内容是可以达到上下居中的 -
文本修饰
text-decoration: none;- underline 下划线
- line-through 删除线
- overline 上划线
- none 去除划线修饰
-
首行缩进 2个字符 — 2em 3个字符就是3em
text-indent: 2em; -
字符和字符之间的间隙
- 不管是汉字还是英文字母 都当做是字符 都会设置间隙
letter-spacing: 10px;
需求： 汉字之间的间隙是10px 单词的字母之间的间隙不变 但是单词和单词之间的间隙是10px
- 不管是汉字还是英文字母 都当做是字符 都会设置间隙
-
单词之间的间隙
对于汉字没有影响的 影响的是英文单词和单词之间的间隙
word-spacing: 10px; -
文本阴影
水平偏移
垂直偏移
羽化度 — 设置的是阴影的虚化度 值越大 模糊度越高
阴影的颜色
text-shadow: 5px 5px 5px gray;
关于列表的样式设计
设计项目符号的样式
- none – 去除项目符号
list-style-type: none; - 自定义项目符号： 给的是一个图片
list-style-image: url(…/img/listicon.png); - 设置项目符号的位置
默认情况下项目符号是在li元素外的 outside
inside设置项目符号在li元素之内
list-style-position: inside;
盒子模型
标准盒子模型
- 去除标签自带的边距
*{
margin: 0;
padding: 0;
}
width与height为内容区的大小，不包括任何边框和内边距
img{
width: 50%;
height: 142px;
background-color: plum;
/* 内边距: 标签内容与标签之间的间隙 */
padding: 20px;
}
怪异盒子模型
width与height为整个标签大小
img{
box-sizing: border-box;
width: 50%;
height: 142px;
background-color: plum;
/* 内边距: 标签内容与标签之间的间隙 */
padding: 20px;
}
属性详情
内边距
内容区与边框之间的间隙
- 上下左右都会有间隙 而且 间隙是一致的
padding: 10px; - 上下左右都会有间隙 第一个控制的是上下， 第二个控制的是左右
padding: 10px 30px; - 上下左右都会有间隙 上 左右 下
padding: 10px 30px 50px; - 上下左右都会有间隙 上 右 下 左
padding: 10px 30px 50px 70px; - 某个方向有间隙 其他方向没有
padding-left: 10px;
padding-top: ;
padding-bottom: ;
padding-right: ;
边框
标签的边缘线 宽度默认是0
- 线宽
- 线的样式
- solid 单实线
- double 双实线
- dashed段虚线
- dotted点虚线
- 线的颜色
顺序没有关系
border: solid 2px deepskyblue;
只有一边有边框 其他的没有
border-bottom: ;
border-top: ;
border-left: dotted 3px deepskyblue;
border-right: ;
外边距
标签与其他标签之间的间隙
- 上下左右的间隙一致
margin: 50px;
0 默认
auto — 子标签 相对于父标签水平居中 - margin的赋值情况类似于padding
有四种赋值情况 每一种赋值都会使上下左右有间隙的 - 只设置某一边的外边距
margin-left: 50px;
margin-right: ;
margin-top: ;
margin-bottom: ;
切圆角
- 四个角都有切的
赋值情况类似于padding
border-radius: 30px; - 设置两个值 左上与右下 左下与右上
border-radius: 20px 40px; - 左上 左下与右上 右下
border-radius: 20px 40px 60px; - 左上 右上 右下 左下
border-radius: 20px 40px 60px 80px; - 只设置某一个角
border-top-left-radius: 50%;
border-top-right-radius: ;
border-bottom-left-radius: ;
border-bottom-right-radius: ;
溢出
子标签的大小超过了父标签的大小
或者是标签的内容超出了标签的范围
处理溢出overflow
overflow: scroll;
- visible 溢出部分是可见的
- hidden 溢出的部分隐藏
- scroll 溢出的部分隐藏 但是可以滚动可见 不管有没有溢出 滚动条都可见
- auto 自适应 溢出的话 溢出部分隐藏 但是滚动可见
如果没有溢出 正常显示 不会出现滚动条
盒子阴影
水平偏移、垂直偏移、羽化度、阴影颜色
box-shadow: 5px 5px 5px palevioletred;
滚动条
overflow
标签的显示状态 display
标签的显示模式的分类： 块级标签(block) 行内标签(inline) 行内-块级标签(inline-block)
块级标签block
标签独占一行 宽度默认与父标签等宽 高度随着内容自适应 设置宽高时有效
例如 div p li tr body
行内标签inline
不会独占一行的 直到父标签宽度不够 内容才会换行 宽高是随着内容自适应的
设置宽高无效
例如 span b i a font
行内-块级标签inline-block
不会独占一行 直到父标签宽度不够 内容才会换行 宽高是随着内容自适应的
设置宽高有效
例如 img
可以通过display的样式修改标签的状态
需求： 就像设置span 宽高有效 但是不会独占一行
p标签 设置宽高无效 宽高随着内容自适应
修改行内标签的特点比较多一下
display还有一个值 为none 隐藏标签 隐藏标签之后 被隐藏的标签的位置是不会保留的
<head>
<meta charset="utf-8">
<title></title>
<style>
span{
background-color: paleturquoise;
color: palevioletred;
/* 行内标签 设置宽高 */
width: 100px;
height: 100px;
/* 设置宽高 有效 但是不会独占一行 */
display: inline-block;
/* 有溢出使用overflow */
overflow: hidden;
}
p{
background-color: plum;
color: white;
/* 块级标签设置宽高 */
width: 200px;
height: 500px;
/* 行内设计 */
display: inline;
}
img{
width: 300px;
}
</style>
</head>
<body>
<!-- 行内标签 -->
<span>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也.然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。</span>
<b>然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。</b>
<p>诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。</p>
<p>诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。</p>
<a href="http://www.baidu.com">百度一下</a>
<img src="../img/2.png" />
<img src="../img/2.png" />
<img src="../img/2.png" />
</body>
网页布局
布局分类：流式布局(标准文档流) 浮动布局(float) 定位布局(position属性)
流式布局
从上到下 从左到右输出文档内容
是由块级元素 或者 行内元素 或者 行内块级元素组成的
浮动布局float
这种布局会脱离流式布局(脱离了标准文档流)
以坐标系为例 讲解
- 流式布局 在xy平面上布局的标签 （z=0）
- 浮动布局 会脱离流式布局
浮动布局就是 在xy平面上布局的标签 z大于0的
浮动布局的元素就有可能会遮盖住流式布局的元素
例如
- 流式布局 （10， 20， 0）
- 浮动布局 (10, 20 , 1)
在浮动布局的基础上 ， 标签就没有块级和行内之分了
浮动布局的标签的大小都是有内容自适应 而且设置宽高有效
因为浮动布局的维度比流式布局维度高 会出现遮盖流式布局的情况出现。 这个问题怎么解决？？？
给被遮挡的元素添加 clear：both
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
color: white;
text-align: center;
line-height: 2;
margin: 5px;
}
.div_float{
/* 从左向右浮动布局 left
从右向左布局 right
*/
float: right;
}
/* 现在是既要显示浮动布局的内容 又有显示流式布局的内容
浮动布局不能遮挡流式布局：
解决这个问题：让流式布局在浮动布局的下方开始布局就不会出现遮挡的情况了
怎么设置这个呢？
样式 clear ---> 清除浮动
让标签在浮动布局的下方开始布局
*/
.clear_float{
/* left: 表示在从左向右的浮动布局的下方开始布局
right: 表示在从右向左的浮动布局的下方开始布局
both: 不管什么浮动 都从其下方开始布局
*/
clear: both;
}
</style>
</head>
<body>
<div class="div_float">1</div>
<div class="div_float">2</div>
<div class="div_float">3</div>
<div class="div_float">4</div>
<div class="clear_float">5</div>
<div>6</div>
</body>
问题：
在一个容器中有流式布局的元素 还有浮动布局的元素
因为浮动布局 导致容器的高度 并没有把浮动布局的标签包含在内， 这个问题怎么解决：
在浮动布局的下方 添加一个标签 这个标签也要在容器中
布局的时候这个标签不能被浮动布局的标签遮挡， 所以要给这个标签添加clear清除浮动 在浮动布局的下方开始布局。那么就可以通过这个标签的设计将容器的高度拉伸 将浮动布局的元素包含在内
在流式布局中对应的位置没有标签，下方的标签会向上移动
<head>
<meta charset="utf-8">
<title></title>
<style>
div:hover img{
/* 隐藏
标签的位置不会被保留
在流式布局中 如果对应的位置空出来了 下面的内容就会向上移动
*/
display: none;
}
</style>
</head>
<body>
<div>
悬浮隐藏图片
<br>
<img src="../img/2.png" />
诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
</div>
</body>
隐藏标签
- display 隐藏之后标签的位置不会保留
display: none;
下面的这几种方式都是保留位置的
-
设置是否可见
- visible 可见的
- hidden 隐藏的
visibility: hidden;
-
设置透明 opacity
0到1 0表示完全透明 1表示完全不透明
opacity: 0.5;
<head>
<meta charset="utf-8">
<title>隐藏标签</title>
<style>
body{
background-color: palegoldenrod;
}
div{
width: 200px;
height: 200px;
background-color: palevioletred;
}
/* 鼠标悬浮在文档 隐藏图片 */
body:hover img{
/* display: none; */
/* visibility: hidden; */
opacity: 0.5;
}
</style>
</head>
<body>
<img src="../img/img2.png" />
<div></div>
</body>
定位布局
position这个属性有四个值：
- static — 标签默认的就是static 就是流式布局
- relative – 相对定位
参照物：标签原本的位置
在标签原本位置的基础上进行移动
不会脱离流式布局 - absolute – 绝对定位 脱离流式布局
参照物：首先先看该标签的先辈标签中是否有设置有效的定位属性值(除了static都是有效的)， 如果有的话 就以该先辈标签为参照物进行定位。 否则就以body为参照物进行定位 - fixed — 固定定位 脱离流式布局
参照物：以窗口为参照物的
不管文档怎么上下移动 就相当于窗口定位在固定位置
当设置有效的定位属性后 标签相对于参照物如何进行定位：
当设置有效的定位属性后 会启动top left right bottom这几个属性。
- top:
正数：相对于参照物向下移动的位移
负数：相对于参照物向上移动的位移 - left:
正数：相对于参照物向右移动的位移
负数：相对于参照物向左移动的位移 - right：
正数：相对于参照物向左移动的位移
负数：相对于参照物向右移动的位移 - bottom：
正数：相对于参照物向上移动的位移
负数：相对于参照物向下移动的位移
相对定位
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
}
.div1{
background-color: palevioletred;
/* 设置相对定位 */
position: relative;
/* 设置定位的位置 保留原来的位置 不会脱离流式布局*/
top: 0px;
left: 150px;
}
.div2{
background-color: plum;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
绝对定位
需求： 相对于outer 让inner进行移动
outer就得设置有效的定位属性：在三个有效的定位属性中设置哪个？？
就看outer是否有移动的需求 如果有就根据需求设置为绝对定位或者固定定位
如果没有移动的需求 设置为relative即可
<head>
<meta charset="utf-8">
<title></title>
<style>
.outer{
width: 300px;
height: 300px;
background-color: palegoldenrod;
border: solid 3px blueviolet;
position: relative;
}
.center{
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: palevioletred;
margin: 50px;
border: solid 3px orange;
/* inner移动的参照物是center */
position: relative;
}
.inner{
box-sizing: border-box;
width: 100px;
height: 100px;
background-color: deepskyblue;
/* margin: 10px; */
/* 设置绝对定位： */
position: absolute;
/* 定位的位置 */
/* 相对于参照物 上边为0 */
top: 50px;
/* 相对于参照物 右边为0 */
right: 50px;
}
.inner1{
width: 50px;
height: 50px;
position: absolute;
background-color: mediumpurple;
}
</style>
</head>
<body>
<div class="outer">
<div class="center">
<div class="inner"></div>
<div class="inner1"></div>
</div>
</div>
</body>
固定定位
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 999px;
background: linear-gradient(to bottom,palegoldenrod,palevioletred,deepskyblue );
}
.fixed_pos{
width: 50px;
height: 50px;
background-color: darkcyan;
/* 设置固定定位 */
position: fixed;
/* 确定定位的位置 */
right: 0;
bottom: 0;
}
.model{
width: 200px;
height: 200px;
background-color: darkgreen;
/* position: fixed; */
}
</style>
</head>
<body>
<div class="model"></div>
<div class="fixed_pos"></div>
</body>
z-index
设置z轴层次的位移值。 值越大 标签相对于咱们的视角就越靠前
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
/* 相对于body */
position: absolute;
top: 50px;
}
.div1{
background-color: palevioletred;
left: 50px;
z-index: 3;
}
.div2{
background-color: deepskyblue;
left: 100px;
z-index: 2;
}
.div3{
background-color: darkcyan;
left: 150px;
z-index: 1;
}
/* 鼠标悬浮到标签 z-index发生变化 */
div:hover{
z-index: 4;
}
</style>
</head>
<body>
<!-- 几个div相对同一个参照物进行定位 然后又叠加部分
当我鼠标悬浮到哪个div哪个div就在最前面
-->
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
问题：
行内 或者 行内块级标签 设置元素的时候 横向并不会在同一个水平线上
解决：
两种形式
- 设置 vertical-align: middle; 上下基准线对齐
- 还有一个是设置float 悬浮
从左向右走的 基准线在上方
形变
transform
- 拉伸形变 scale(sx, sy）
transform: scale(0.5,1.5);
横向拉伸
纵向拉伸
设置的是拉伸的倍数
如果这两个值一致 设置成一个即可 - 旋转形变 rotate(度数)
transform: rotate(-30deg);
度数单位deg
正数是顺时针旋转
默认以中心点为旋转点- 设置旋转点
transform-origin: left top;
x坐标 left center(默认值) right 自定义数值
y坐标 top center(默认值) bottom 自定义数值 - 既有拉伸 又有旋转
transform: scale(1.5) rotate(30deg);
- 设置旋转点
<style>
div{
width: 100px;
height: 100px;
background-color: plum;
color: white;
margin: 50px auto;
line-height: 100px;
text-align: center;
transform: scale(1.5) rotate(30deg);
}
</style>
过渡
transition
发生变化的数据 有一个渐变的特效
添加过渡属性
transition:all 2s linear;
- 发生过渡的属性名 如果有多个属性 可以赋值为all(所有都有过渡)
- 过渡需要的时间 单位是s秒
- 过渡渐变过程中的变化轨迹 默认ease由慢到快 linear 线性变化
<style>
div{
width: 200px;
height: 200px;
background-color: palevioletred;
transition:all 2s linear;
}
div:hover{
background-color: darkcyan;
transform: rotate(360deg);
}
</style>
动画
animate
添加动画属性：
- 自定义动画的名字
- 动画执行一次需要的时间 单位s
- 动画执行的次数 一直执行的话 infinite 无数次
- 动画执行期间的运动轨迹 ease linear
动画的效果需要自己设置 — 自己需要定义动画步骤
指定动画步骤：
- -webkit- 谷歌和safari
- -mz- IE浏览器
- -mos- 火狐
- -o- 欧朋
@keyframes 自定义动画名 {
from{动画起始的样式}
to{动画结束的样式}
}
动画步骤结束之后 标签的样式会回归到默认设计的样式
@keyframes 自定义动画名 {
0%{动画起始的样式}
....
100%{动画结束的样式}
}
例子：
<style>
div{
width: 200px;
height: 200px;
background-color: palevioletred;
animation: cus_an 6s infinite linear;
}
@keyframes cus_an{
from{
也可以不写 不写的话默认就是初始设置的标签的样式
}
to{
margin-left: 500px;
background-color: blue;
}
}
@keyframes cus_an{
0%{
opacity: 0;
margin-left: 0px;
transform: rotate(0deg);
}
25%{
opacity: 0.5;
margin-left: 250px;
transform: rotate(180deg);
}
50%{
opacity: 1;
margin-left: 500px;
transform: rotate(360deg);
}
75%{
opacity: 0.5;
margin-left: 250px;
transform: rotate(180deg);
}
100%{
opacity: 0;
margin-left: 0px;
transform: rotate(0deg);
}
}
</style>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
