弹性盒模型
介绍
伸缩盒模型也叫弹性盒模型，或flex。它决定一个盒子在其它盒子中的分布，以及如何处理可用的空间。使用该模型，可以轻松的创建“自适应”浏览器窗口的流动布局。
flexbox是一个很新的东西，在w3c希望可以使用flexbox实现一些更复杂的布局和应用。传统盒模型基于HTML文档流排列，使用弹性盒模型可以规定特定的顺序。要开启弹性盒模型，只需要设置display的属性值 flex，因为它是CSS3中为display新添加的值类型。
目的
在浏览器窗口变化时，盒子相应改变大小。 设置了弹性盒模型后，float，clear和vertical-align在flex中不起作用。
display:flex 定义父容器是一个弹性盒。
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style>
.one{
width:980px;
height: 500px;
border:1px solid #ddd;
margin: 20px auto;
/*伸缩盒属性需要给容器设置*/
display: flex;
}
.one>div{
width: 400px;
height: 300px;
border:1px solid tomato;;
}
</style>
</head>
<body>
<!--父容器-->
<div class="one">
<!--每一个被包含的就是一个项目-->
<div>左</div>
<div>中</div>
<div>右</div>
</div>
</body>
</html>
display:inline-flex 定义父容器时行内弹性盒
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style>
.one{
width:980px;
height: 500px;
border:1px solid #ddd;
margin: 20px auto;
/*伸缩盒属性需要给容器设置*/
display: inline-flex;
}
.one>div{
width: 400px;
height: 300px;
border:1px solid tomato;;
}
</style>
</head>
<body>
a
<!--父容器-->
<div class="one">
<!--每一个被包含的就是一个项目-->
<div>左</div>
<div>中</div>
<div>右</div>
</div>
a
</body>
</html>
Justify-content 设置活检索弹性盒子元素在(主轴)方向上的对齐方式。
flex-start 默认值。项目位于容器的开头
flex-end 项目位于容器的结尾
center 项目位于容器的中心
space-between 项目位于各行之间留有空白的容器内。
space-around 项目位于各行之前、之间、之后都留有空白的容器内。
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style>
.one,.two,.three,.four{
width:980px;
height: 500px;
border:1px solid #ddd;
margin: 20px auto;
/*伸缩盒属性需要给容器设置*/
/*display: inline-flex;*/
display: flex;
/*设置主轴对齐方式*/
/*设置结尾*/
justify-content: flex-end;
}
.one>div,.two>div,.three>div,.four>div{
width: 200px;
height: 300px;
border:1px solid tomato;;
}
.two{
/*设置主轴居中*/
justify-content: center;
}
.three{
/*设置主轴两端对齐中间留有对应的空白*/
justify-content: space-between;
}
.four{
/*两端留有对应的空白 中间留有对应的空白*/
justify-content: space-around;
}
</style>
</head>
<body>
<!--父容器-->
<div class="one">
<!--每一个被包含的就是一个项目-->
<div>左</div>
<div>中</div>
<div>右</div>
</div>
<div class="two">
<!--每一个被包含的就是一个项目-->
<div>左</div>
<div>中</div>
<div>右</div>
</div>
<div class="three">
<!--每一个被包含的就是一个项目-->
<div>左</div>
<div>中</div>
<div>右</div>
</div>
<div class="four">
<!--每一个被包含的就是一个项目-->
<div>左</div>
<div>中</div>
<div>右</div>
</div>
</body>
</html>
align-items 定义flex子项在flex容器的当前行的侧轴(纵轴)方向的对齐方式
stretch 默认值，项目被拉伸以适应容器
center 项目位于容器的中心
flex-start 项目位于容器的开头
flex-end 项目位于容器的结尾
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style>
.one,.two,.three,.four{
width:980px;
height: 500px;
border:1px solid #ddd;
margin: 20px auto;
/*伸缩盒属性需要给容器设置*/
/*display: inline-flex;*/
display: flex;
/*设置主轴对齐方式*/
/*设置结尾*/
justify-content: flex-end;
/*设置侧轴对齐方式 垂直(默认)*/
align-items: flex-end;
}
.one>div,.two>div,.three>div,.four>div{
width: 200px;
height: 300px;
border:1px solid tomato;;
}
.two{
/*设置主轴居中*/
justify-content: center;
/*设置侧轴居中*/
align-items: center;
}
.two>div:nth-child(2){
display: flex;
justify-content: center;
align-items: center;
}
.three{
/*设置主轴两端对齐中间留有对应的空白*/
justify-content: space-around;
/*设置开头*/
align-items: flex-start;
}
.four{
/*两端留有对应的空白 中间留有对应的空白*/
justify-content: space-around;
/*默认的*/
align-items: stretch;
}
</style>
</head>
<body>
<!--父容器-->
<div class="one">
<!--每一个被包含的就是一个项目-->
<div>左</div>
<div>中</div>
<div>右</div>
</div>
<div class="two">
<!--每一个被包含的就是一个项目-->
<div>左</div>
<div>中</div>
<div>右</div>
</div>
<div class="three">
<!--每一个被包含的就是一个项目-->
<div>flex-start左</div>
<div>中</div>
<div>右</div>
</div>
<div class="four">
<!--每一个被包含的就是一个项目-->
<div>stretch左</div>
<div>中</div>
<div>右</div>
</div>
</body>
</html>
flex-direction 设置主轴的方向
row： 主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
row-reverse： 对齐方式与row相反。
column： 主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
column-reverse： 对齐方式与column相反。
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
width: 980px;
height: 800px;
border: 1px solid #ddd;
margin: 10px auto;
display: flex;
/*flex-direction:row-reverse ;*/
/*设置纵轴为主轴*/
/*flex-direction: column;*/
/*flex-direction: column-reverse;*/
flex-direction: column;
/*设置纵轴的对齐方式*/
justify-content: center;
/*设置侧轴的对齐方式*/
align-items: center;
}
.one>div{
width: 200px;
height: 200px;
border: 1px solid tomato;
}
</style>
</head>
<body>
<div class="one">
<div>第一块</div>
<div>第二快</div>
<div>第三块</div>
</div>
</body>
</html>
flex-wrap 控制flex容器是单行或者多行。
nowrap： flex容器为单行。该情况下flex子项可能会溢出容器
wrap： flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse： 反转 wrap 排列。
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
width: 980px;
height: 500px;
border: 1px solid #ddd;
margin: 10px auto;
display: flex;
/*设置为多行*/
/*flex-wrap: nowrap;*/
flex-wrap:wrap;
/*flex-wrap: wrap-reverse;*/
}
.one>div{
width: 300px;
height: 200px;
border: 1px solid orange;
}
</style>
</head>
<body>
<div class="one">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
flex-flow:‘flex-direction’ || ‘flex-wrap’
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
width: 980px;
height: 500px;
border: 1px solid #ddd;
margin: 10px auto;
display: flex;
/*设置为多行*/
/*flex-wrap: nowrap;*/
/*flex-wrap:wrap;*/
/*flex-wrap: wrap-reverse;*/
/*简写属性*/
flex-flow: row-reverse wrap;
}
.one>div{
width: 300px;
height: 200px;
border: 1px solid orange;
}
</style>
</head>
<body>
<div class="one">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
align-content 与align-items类似，主要用来调准伸缩行在伸缩容器里的对齐方式(多行时)
flex-start ：各行向伸缩容器的起点位置堆叠。
flex-end ：各行向伸缩容器的结束位置堆叠。
center ：各行向伸缩容器的中间位置堆叠。
space-between ：各行在伸缩容器中平均分布。
space-around ：各行在伸缩容器中平均分布，在两边各有一半的空间。
stretch ： align-content 的默认值，各行将会伸展以占用额外的空间。
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
width: 980px;
height: 500px;
border: 1px solid #ddd;
margin: 10px auto;
display: flex;
/*设置为多行*/
/*flex-wrap: nowrap;*/
flex-wrap:wrap;
/*flex-wrap: wrap-reverse;*/
/*简写属性*/
/*flex-flow: row-reverse wrap;*/
/*align-items: center;*/
/*作用与align-items类似 适用于多行*/
/*align-content: flex-start;*/
/*align-content: flex-end;*/
align-content: center;
/*align-content: space-around;*/
/*align-content: space-between;*/
justify-content: space-between;
}
.one>div{
width: 300px;
height: 200px;
border: 1px solid orange;
}
</style>
</head>
<body>
<div class="one">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
flex-grow:number 规定项目将相对于其他灵活的项目进行扩展的量。默认是0。
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
width: 980px;
height: 200px;
border: 1px solid #ddd;
margin: 10px auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.one>div{
border: 1px solid tomato;
}
.one>div:first-child{
flex-grow: 1;
}
.one>div:nth-child(2){
flex-grow: 2;
}
.one>div:nth-child(3){
flex-grow: 1;
}
</style>
</head>
<body>
<div class="one">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
CSS3新增属性
浏览器私有前缀
-moz- Firefox
-webkit- chrome safari
-ms- IE
-o- Opear
作用
用于区分不同浏览器的内核，当CSS属性是实验性质的时候，可以加浏览器私有前缀，让对应浏览器兼容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
width:800px;
height:300px;
background:pink;
display: flex;
/*-webkit-display:flex;*/
display: -o-flex;
display: -webkit-flex;
display: -moz-flex;
display:-ms-flex;
justify-content: space-between;
-o-justify-content:space-between;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
-ms-justify-content:space-between;
-webkit-align-items: center;
}
.one>div{
width:200px;
height:200px;
background:tomato;
}
</style>
</head>
<body>
<div class="one">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
圆角、阴影、渐变
border-radius 圆角
border-radius:左上角水平 右上角水平 右下角水平 左下角水平 / 左上角垂直 右上角垂直 右下角垂直 左下角垂直
border-radius:4个角水平半径/4个角垂直半径
关于圆角的形成
从指定角的顶端向内部引出垂直半径和水平半径
将水平半径和垂直半径相较于元素内部的一点(圆心点)
以该点为圆心，指定的垂直半径和水平半径画圆或者椭圆
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
width:100px;
height:100px;
border:1px solid #000;
/*最完整格式：2个参数8个值*/
/*border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;*/
/*2个参数 4个值*/
/*border-radius: 10px 20px / 10px 20px;*/
/*1个参数 4个值*/
/*border-radius: 10px 20px 30px 40px;*/
/*1个参数 2个值*/
/*border-radius: 10px 20px;*/
/*1个参数 1个值*/
/*border-radius: 10px;*/
/*1个参数 3个值*/
/*border-radius: 10px 20px 15px;*/
/*border-radius: 10px 20px 30px 40px / 15px 25px 35px 45px;*/
/*border-radius: 50px;*/
/*border-radius: 50%;*/
border-radius: 61px;
}
</style>
</head>
<body>
<div class="one"></div>
</body>
</html>
圆角边框案例(太极)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tj{
width: 100px;
height: 50px;
border:1px solid red;
border-bottom:50px solid red;
border-radius: 50%;
position: relative;
}
.tj:before{
width: 10px;
height: 10px;
background: #fff;
content: ' ';
border:20px solid red;
position: absolute;
top:25px;
left:0px;
border-radius: 50%;
}
.tj:after{
width: 10px;
height: 10px;
background: red;
content:" ";
border:20px solid #fff;
position: absolute;
top:25px;
right:0px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="tj"></div>
</body>
</html>
阴影
盒子阴影 box-shadow：阴影1，阴影2……；
阴影格式:水平偏移位置 垂直偏移位置 模糊度 外延值 颜色 内置阴影；
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
font-size: 100px;
text-shadow: -5px -5px 5px red,-10px -10px 5px orange;
}
.two{
width:100px;
height:100px;
margin:50px;
border:1px solid #000;
border-radius: 50%;
display: flex;
align-items: center;
/*box-shadow: 5px 5px red;*/
/*box-shadow: 5px 5px 5px red;*/
/*box-shadow: -5px 5px 5px red;*/
/*box-shadow: 0px 0px 5px red;*/
/*外延值*/
/*box-shadow: 0px 0px 5px 10px red;*/
/*内置阴影*/
/*box-shadow: 0px 0px 5px 10px red inset;*/
/*彩虹*/
box-shadow: 0px 0px 5px 5px red,
0px 0px 5px 10px orange,
0px 0px 5px 15px yellow,
0px 0px 5px 20px green;
}
</style>
</head>
<body>
<div class="one">我是文字阴影</div>
<div class="two">我是盒子阴影</div>
</body>
</html>
文字阴影 text-shadow：阴影1，阴影2……；
阴影格式:水平偏移位置 垂直偏移位置 模糊度 颜色 ;
案例
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
font-size: 100px;
text-shadow: -5px -5px 5px red,-10px -10px 5px orange;
}
</style>
</head>
<body>
<div class="one">我是文字阴影</div>
</body>
</html>
```
渐变
linear-gradients 线性渐变
/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
/* 渐变轴为45度，从蓝色渐变到红色 */
*linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */*
linear-gradient(to left top, blue, red);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*线性渐变*/
.one{
width: 200px;
height: 200px;
/*background: linear-gradient(to bottom,red,blue);*/
/*background: linear-gradient(to top,red,blue);*/
/*background: linear-gradient(to left,red,blue);*/
/*background: linear-gradient(to right,red,blue);*/
/*background-color:linear-gradient(to top,red,blue);*/
/*background-image:linear-gradient(to right bottom,red,blue);*/
background-image: linear-gradient(120deg,red,green,blue);
}
</style>
</head>
<body>
<div class="one">线性渐变</div>
</body>
</html>
-
radial-gradient 径向渐变
/*形状 大小 as 位置*/ background-image: radial-gradient(shape size at position, start-color, ..., last-color); -
shape 取值
- ellipse(默认)：指定椭圆形的径向渐变
- circle:指定圆形的径向渐变
-
size 取值
- farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
- closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
- closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
- farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
-
position 取值
- center（默认）：设置中间为径向渐变圆心的纵坐标值。
- top：设置顶部为径向渐变圆心的纵坐标值。
- bottom：设置底部为径向渐变圆心的纵坐标值。
- left:设置左为径向渐变圆心的纵坐标值。
- right:设置右为径向渐变圆心的纵坐标值。
- 也可使用百分比
-
案例
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*线性渐变*/
.one{
width: 200px;
height: 200px;
/*background: linear-gradient(to bottom,red,blue);*/
/*background: linear-gradient(to top,red,blue);*/
/*background: linear-gradient(to left,red,blue);*/
/*background: linear-gradient(to right,red,blue);*/
/*background-color:linear-gradient(to top,red,blue);*/
/*background-image:linear-gradient(to right bottom,red,blue);*/
/*background-image: linear-gradient(120deg,red,green,blue);*/
background-image: repeating-linear-gradient(red 15%,green 20% ,blue 30%);
}
/*径向渐变*/
.two{
width: 200px;
height: 200px;
border:1px solid #000;
margin: 50px;
/*background-image:radial-gradient(ellipse farthest-side,red,orange,blue);*/
/*background-image: radial-gradient(circle closest-corner at top,red,blue);*/
/*background-image: radial-gradient(circle closest-corner at left,red,blue);*/
/*background-image: radial-gradient(circle closest-corner at right,red,blue);*/
background-image: radial-gradient(circle closest-corner at 50% 50%,red,blue);
/*background-image: repeating-radial-gradient(circle at 50% 50%,red 10%,green 20%,blue 30%);*/
}
</style>
</head>
<body>
<div class="one">线性渐变</div>
<div class="two">径向渐变</div>
</body>
</html>
转换Transform
transform2D
translate(x,y) 2D转换转换
scale(x,z) 2D缩放
rotate(angle) 2D旋转
skew(x-angle,y-angle) 2D倾斜
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D转换</title>
<style>
#box1,#box2,#box3{
width: 200px;
height: 200px;
border:1px solid blue;
}
#box1:hover{
/*transform: translateX(50px) translateY(50px);*/
/*transform: translate(50px,100px);*/
/*水平和垂直方向移动函数：translate,支持一个参数，代表水平移动*/
transform: translate(50px);
}
#box2,#box4{
width: 200px;
height: 200px;
border:1px solid tomato;
}
#box2:hover{
/*transform: scaleX(0.5) scaleY(0.5);*/
/*
支持一个参数，水平和垂直等于一个值
支持两个参数，代表水平方向缩放和垂直方向缩放
*/
/*transform: scale(0.5);*/
transform: scale(0.5,1.5);
}
/*过度*/
#box3{
transition: all 3s linear;
}
#box3:hover{
transform: rotate(360deg);
}
/*倾斜*/
#box4{
transition: all 3s linear;
}
#box4:hover{
/*transform: skewX(30deg) skewY(50deg);*/
transform: skew(40deg,30deg);
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
</body>
</html>
transform3D
translate3d(x,y,z) 定义3D转换
translateZ(z) 定义3D转换，只适用Z轴的值
scale3d(x,y,z) 定义3D缩放
scaleZ(z) 通过设置Z轴的值来定义3D缩放转换
rotate3d(x,y,z,angle) 定义3D旋转
rotateZ(angle) 定义沿着Z轴的3D旋转
perspective(n) 为D3转换元素定义透视视图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent{
width: 200px;
height: 200px;
background: pink;
/*透视 呈现出伪3D*/
perspective: 500px;
}
.son{
width: 100%;
height: 100%;
background: blue;
transform: translateZ(-100px);
/*transform: translate3d(-10px,-10px,-100px);*/
transition: all 3s;
}
.son:hover{
transform: perspective(400px) scaleZ(1);
}
img{
transition: all 3s;
}
img:hover{
/*transform: rotate(180deg);*/
transform: rotateZ(180deg);
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
<img src="https://www.qianduange.cn/upload/article/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
</body>
</html>
过渡Transition
过渡指定四要素
transition-property 过渡属性，如background,color等。
transition-duration 过渡所需要时间。
transition-timing-function 过渡函数。既过渡的速度，方式等。
ease 默认值，规定慢速开始，然后变快，然后慢速结束过渡效果
linear 匀速
ease-in 规定以慢速开始，加速效果。
ease-out 规定以慢速结束，减速效果。
ease-in-out 规定以慢速开始和结束，先加速后减速效果。
transition-delay 过渡延迟时间。表示开始执行的时间。
transition 过渡属性简写属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 200px;
height: 200px;
background: tomato;
/*要过度的属性*/
/*transition-property: width;*/
/*!*过度完成时间*!*/
/*transition-duration: 3s;*/
/*!*过度函数*!*/
/*transition-timing-function: ease;*/
/*!*延时执行时间*!*/
/*transition-delay: 3s;*/
/*简写属性*/
transition: all 3s linear;
}
#box:hover{
width: 300px;
height: 300px;
transform: translate(3px,-10px);
background: green;
box-shadow: 0px 0px 10px 10px #ccc;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
动画animation
animation 属性用于控制动画
调用由@keyframes定义的动画
animation属性是一个简写属性
animation动画子属性
animation-name 调用动画，规定需要和keyframes的名字一致
animation-duration 动画完成一个周期所需要的时间
animation-timing-funtion 规定动画的速度变化类型
animation-delay 播放之前的延迟时间
Animation-iteration-count:数值|infinite 播放次数
infinite 表示无限次播放
animation-direction:normal|alternate 动画播放方向
normal 为默认值，表示正常播放
alternate 表示轮流播放，既动画会在奇数次正常播放，而在偶数次向后播放。
animation-fill-mode:forwards 动画停在最后一帧
默认值为none
animation-play-state:paused | running 属性规定动画正在运行还是停止
默认是为running
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
width:200px;
height:200px;
border: 1px solid #000;
/*transition: background-color 3s linear;*/
}
.one:hover{
/*background-color: red;*/
/*background-color: green;*/
/*background-color: blue;*/
}
.one{
animation-name: myname;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes myname {
0%{
background-color: red;
}
30%{
background-color: green;
}
60%{
background-color: blue;
}
100%{
background-color: red;
}
}
</style>
</head>
<body>
<div class="one"></div>
</body>
</html>
动画案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
section{
width: 500px;
height: 300px;
border:1px solid red;
margin: 10px auto;
overflow: hidden;
}
section>div{
width: 2000px;
height: 300px;
border:1px solid tomato;
animation: myname 10s infinite 1s;
}
section>div>img{
width: 500px;
height: 300px;
float:left;
}
@keyframes myname {
35%{
margin-left: -500px;
}
70%{
margin-left: -1000px;
}
100%{
margin-left: -1500px;
}
}
</style>
</head>
<body>
<section>
<div>
<img src="./img/1.png" alt="">
<img src="./img/2.png" alt="">
<img src="./img/1.png" alt="">
<img src="./img/2.png" alt="">
</div>
</section>
</body>
</html>
媒体查询
使用Media Query的基本语法
@media mediatype and | not | only (media feature) {
CSS-Code
}
