1、过渡动画
需求：鼠标移上去，div那一块发生改变，用到transition属性；
代码实现：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1 {
height: 200px;
width: 200px;
border: 1px black solid;
background: red;
transition: all 1s 0s linear;
}
#d1:hover {
width: 400px;
height: 400px;
background: yellow;
/* 过渡的属性 过渡时长 延时过渡 过渡速率方式 */
transition: all 1s 0s linear;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
- transition属性的语法规则如下：
我们一般可以使用复合属性直接给出，也可以拆开写；
/* 要过渡的属性 */
transition-property: width;
/* 过渡时长 */
transition-duration: 1s;
/* 过度延时 */
transition-delay: 0s;
/* 速率 */
transition-timing-function: linear;
2、transform动画
- 该动画有以下几种动画方式；
位移动画：
div{
/* 左右移动 上下移动 */
transform: translate(100px,20px);
}
旋转动画：
div{
/* 旋转45度 */
transform: rotate(45deg);
}
缩放动画：
div{
/* 等比例缩放0.5倍 */
transform: scale(0.5);
}
扭曲动画：
div{
transform: skew(15deg,25deg);
}
3、自定义动画
- 本质上，动画要设计的新颖，可以很复杂；
格式：
----开启这个动画
animation:mydh 5s;（myfirst动画名，5s动画时间）
@keyframes mydh{
from{
....
}
to{
....
}
}
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 200px;
width: 200px;
background: red;
/* 开启动画
animation: mydh 2s 1s; */
animation-name: mydh;
animation-duration: 2s;
animation-delay: 0s;
animation-iteration-count: 10;
animation-timing-function: linear;
/* 动画执行完停留 backwards最开始的那一帧 forwards 停留在最后一帧 */
/* animation-fill-mode:forwards; */
/* normal 默认值。动画按正常播放。
reverse 动画反向播放。
alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
*/
/* animation-direction:alternate-reverse; */
/* 动画开启或暂停 */
animation-play-state: running;
}
/* 自定义动画 */
@keyframes mydh {
from {
height: 200px;
width: 200px;
background: red;
}
to {
width: 1500px;
background: yellow;
}
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
- 混合调用与分开调用语法：
混合调用语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
单个使用属性
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。 infinite无限次
animation-direction 指定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。
4、百分比设定动画
不光是能控制开始和结尾的动画效果，我们可以通过百分比控制每一帧的动画效果；语法如下：
@keyframes guanggao{
1%{
....
}
2%{
....
}
.......
}
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wai {
height: 300px;
width: 150px;
background: url(img/girl1.jpg);
background-size: 100% 100%;
position: absolute;
/* 开启动画 */
animation-name: guangao;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay: 0s;
animation-direction: alternate;
animation-play-state: running;
}
#wai:hover {
animation-play-state: paused;
cursor: pointer;
}
#nei {
height: 30px;
width: 150px;
background: rgba(0, 0, 0, 0.3);
color: white;
}
/* 自定义动画 */
@keyframes guangao {
10% {
left: 500px;
background: url(img/girl2.jpg);
background-size: 100% 100%;
}
20% {
top: 100px;
background: url(img/girl3.jpg);
background-size: 100% 100%;
}
30% {
top: 100px;
left: 300px;
background: url(img/girl4.jpg);
background-size: 100% 100%;
}
50% {
top: 600px;
left: 800px;
background: url(img/girl4.jpg);
background-size: 100% 100%;
}
60% {
top: 20px;
left: 20px;
background: url(img/girl5.jpg);
background-size: 100% 100%;
}
80% {
top: 20px;
left: 20px;
background: url(img/girl4.jpg);
background-size: 100% 100%;
}
90% {
top: 620px;
left: 320px;
background: url(img/girl1.jpg);
background-size: 100% 100%;
}
100% {
top: 200px;
left: 920px;
background: url(img/girl2.jpg);
background-size: 100% 100%;
}
}
</style>
</head>
<body>
<div id="wai">
<div id="nei">
<span οnclick="gb()">关闭</span>
</div>
</div>
<script type="text/javascript">
function gb() {
document.getElementById("wai").style.display = "none";
}
</script>
</body>
</html>
5、盒子模型
- 弹性盒子是 CSS3 的一种新的布局模式；
- CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式；
- 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间；
- 之前的布局当中，我们采用层的浮动布局，缩小页面，很多横着放不下的会竖着排列，这样做不好，我们引入盒模型；
CSS3 弹性盒子内容:
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
1、弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
2、弹性容器内包含了一个或多个弹性子元素。
3、注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
4、弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
以下元素展示了弹性子元素在一行内显示，从左到右:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
当然我们可以修改排列方式，如果我们设置 direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变:
body {
direction: rtl;
}
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
flex-direction:
flex-direction 属性指定了弹性子元素在父容器中的位置
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐），从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
以下实例演示了 row-reverse 的使用:
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
justify-content 属性:
- 内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
justify-content 语法如下：
justify-content: flex-start | flex-end | center | space-between | space-around
各个值解析:
1、flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
2、flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
3、center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
4、space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
5、space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
align-items 属性:
- align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
语法
align-items: flex-start | flex-end | center | baseline | stretch
各个值解析:
1、flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
2、flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
3、center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
4、baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
5、stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
flex-wrap 属性:
- flex-wrap 属性用于指定弹性盒子的子元素换行方式。
语法：
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
各个值解析:
1、nowrap - 默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
2、wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
3、wrap-reverse -反转 wrap 排列。
align-content 属性:
- align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
语法
align-content: flex-start | flex-end | center | space-between | space-around | stretch
各个值解析:
stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
弹性子元素属性:
- 排序
语法:order
各个值解析：
<integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值。
order 属性设置弹性容器内弹性子元素的属性:
- 对齐
设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。
- 完美的居中
使用弹性盒子，居中变的很简单，只想要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中；
align-self:
align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
语法：
align-self: auto | flex-start | flex-end | center | baseline | stretch
各个值解析:
auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
flex:
- flex 属性用于指定弹性子元素如何分配空间。
语法
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
各个值解析:
auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none：计算值为 0 0 auto
inherit：从父元素继承
[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。
6、浏览器支持
- 表格中的数字表示支持该属性的第一个浏览器的版本号，紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀；
2590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
