继上篇文章之后,先对之前学的内容进行复习一下
01、过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
transition: all .3s; /* 过渡写再本身是 谁做动画写再谁身上 s ms*/
}
div:hover {
/*background: green no-repeat url();*/
background: green ;
/*transform: translate(100px, 100px); 只有 x y 默认为0
transform: scale(1.3); 只有 x y 默认 等比例缩放 */
transform: translate(100px, 100px) scale(0.3) rotate(45deg); /*顺序有关系 先 移动后缩放*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
02、体会动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>03体会动画</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
/*调用动画 */
/* animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 */
animation: move 2s ease 0s infinite alternate;
-webkit-animation: move 2s ease 0s infinite alternate;
}
/* 声明动画 关键帧 @keyframes 动画名称{} */
@keyframes move{
from{
left: 0;
background-color: pink;
}
to{
left: 1000px;
background-color: yellow;
}
}
@-webkit-keyframes move{
from{
left: 0;
background-color: yellow;
}
to{
left: 1000px;
background-color: yellow;
}
}
@-ms-keyframes move{
from{
left: 0;
background-color: pink;
}
to{
left: 1000px;
background-color: yellow;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
03、心跳
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>04心跳</title>
<style>
img{
width: 400px;
height: auto;
/* animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 */
animation: heart 0.5s infinite;
}
div{
width: 100px;
height: 100px;
background-color: pink;
margin: 100px auto;
animation: heart 0.5s infinite;//一个叫heart的动画 每隔0.5s执行动画 无限次
}
@keyframes heart{
0%{
transform: scale(1);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1);
}
}
</style>
</head>
<body>
<img src="../images/1.jpg" height="744" width="800" alt="loading" />
<div></div>
</body>
</html>
05、sea大海
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
background-color: #0EA9B1;
overflow: hidden;
}
img {
width: 100%;
height: auto;
position: absolute;
bottom: 0;
left: 0;
}
img:first-child {
animation: move 2s linear infinite;
}
img:last-child {
animation: move 2s linear 0.3s infinite;
}
.sun {
width: 100px;
height: 100px;
/*background-color: pink;*/
margin: 100px;
position: relative;
}
.sun::before, .sun::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
animation: sun 2s infinite;
}
.sun::after {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.6);
animation: sun 3s infinite;
}
@keyframes move {
0% {
bottom: 0;
}
50% {
bottom: -50px;
}
100% {
bottom: 0;
}
}
@keyframes sun {
0% {
transform:translate(-50%, -50%) scale(1);
box-shadow: 0px 0px 5px rgba(255,255,255,0.7);
}
50% {
transform:translate(-50%, -50%) scale(1.1);
box-shadow: 0px 0px 30px rgba(255,255,255,0.7);
}
100% {
transform:translate(-50%, -50%) scale(1);
box-shadow: 0px 0px 5px rgba(255,255,255,0.7);
}
}
</style>
</head>
<body>
<div class="sun"></div>
<img src="../images/1.png" height="211" width="2000" alt="loading">
<img src="../images/2.png" height="211" width="2000" alt="loading">
</body>
</html>
06、三列等宽布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>07三列等宽布局</title>
<style>
section{
width: 80%;
height: 150px;
margin: 100px auto;
}
section div{
width: 30%;
height: 100%;
float: left;
margin: 0 10px;
}
section div:nth-child(1){
background-color: pink;
}
section div:nth-child(2){
background-color: purple;
}
section div:nth-child(3){
background-color: blue;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
07、css3伸缩布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3伸缩布局</title>
<style>
section{
width: 80%;
height: 150px;
margin: 100px auto;
/* 父亲添加 伸缩布局 */
display: flex;
}
section div{
height: 100%;
flex: 1;//孩子的份数
}
section div:nth-child(1){
background-color: pink;
flex: 2;
}
section div:nth-child(2){
background-color: purple;
margin: 0 10px;
}
section div:nth-child(3){
background-color: blue;
flex: 3;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
08、css3伸缩布局固定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3伸缩布局固定宽度</title>
<style>
section{
width: 80%;
height: 150px;
margin: 100px auto;
/* 父亲添加 伸缩布局 */
display: flex;
min-width: 500px;//section最小的宽度就是500px
}
section div{
height: 100%;
/* flex:1 孩子的份数 */
}
section div:nth-child(1){
background-color: pink;
width: 200px;
}
section div:nth-child(2){
background-color: purple;
margin: 0 10px;
flex: 2;
}
section div:nth-child(3){
background-color: blue;
flex: 1;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
09、css3伸缩布局垂直分布
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3伸缩布局垂直分布</title>
<style>
section{
width: 80%;
height: 150px;
margin: 100px auto;
/* 父亲添加 伸缩布局 */
display: flex;
min-width: 500px; //section最小的宽度就是500px
flex-direction: column;//垂直分布
}
section div{
flex: 1;//孩子的份数
}
section div:nth-child(1){
background-color: pink;
}
section div:nth-child(2){
background-color: purple;
}
section div:nth-child(3){
background-color: blue;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
10、携程网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>11携程网</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
min-width: 320px;
max-width: 540px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
}
header {
height: 108px;
}
header img {
height: 100%;
width: auto;
}
nav {
border: 1px solid #ccc;
padding: 4px;
}
nav a {
text-decoration: none;
color: #fff;
text-shadow: 0 2px 1px rgba(0,0,0,.2);
/*text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;*/
}
.row {
height: 90px;
display: flex; /*伸缩布局*/
border-radius: 5px;
overflow: hidden;
margin-bottom: 5px;
}
.row div {
height: 100%;
flex: 1;
background-color: #FF697A;
border-right: 1px solid #fff;
}
.row div:nth-child(3) {
border-right: 0;
}
.row div a {
display: block;
width: 100%;
height: 100%;
}
.row33 {
display: flex;
flex-direction: column;
}
.row33 a {
flex: 1;
text-align: center;
line-height: 45px;
}
.row33 a:first-child {
border-bottom: 1px solid #fff;
}
.row em {
display: block;
height: 45px;
text-align: center;
line-height: 45px;
font-style: normal;
}
.row i {
display: block;
width: 43px;
height: 43px;
margin: -5px auto 0;
background: url(../images/ctrip.png) no-repeat 0 -127px;
-webkit-background-size: 104px; /* 前缀 */
-moz-background-size: 104px; /* 前缀 火狐 */
-ms-background-size: 104px; /* 前缀 ie */
-o-background-size: 104px; /* 前缀 ie */
background-size: 104px;
}
.row .icon-flight {
background-position: 0 -288px;
}
</style>
</head>
<body>
<header>
<img src="../images/banner.jpg" height="307" width="1536" alt="">
</header>
<nav>
<div class="row">
<div>
<a href="#">
<em>酒店</em>
<i></i>
</a>
</div>
<div class="row33">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row33">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>
<div class="row">
<div>
<a href="#">
<em>酒店</em>
<i class="icon-flight"></i>
</a>
</div>
<div class="row33">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row33">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>
<div class="row">
<div>
<a href="#">
<em>酒店</em>
<i></i>
</a>
</div>
<div class="row33">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row33">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>
<div class="row">
<div class="row33">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row33">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row33">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>
</nav>
</body>
</html>
11、背景缩放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>12背景缩放</title>
<style>
div{
width: 400px;
height: 400px;
background: url(../images/x.jpg) no-repeat;
/* 颜色 图片 平铺 位置 滚动 */
border: 1px solid red;
/* background-size: w h 规定背景图像的尺寸; */
/* background-size:100px 100px; */
/* background-size:100px; 如果只有一个值 后面一个值默认为auto 等比例缩放 */
/* background-size:cover; */
background-size: contain;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
12、背景渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>13背景渐变</title>
<style>
div{
width: 300px;
height: 100px;
/* background:-webkit-linear-gradient(渐变的起始位置,颜色位置,颜色位置) */
background: -webkit-linear-gradient(top,red 0%,green 50%,blue 100%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
13、多背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>14多背景</title>
<style>
div{
border: 1px solid #000;
width: 600px;
height: 600px;
background: url(../images/2.jpg) no-repeat top left,url(../images/3.jpg) no-repeat bottom right;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
14、泡泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>15泡泡</title>
<style>
div{
width: 300px;
height: 80px;
border-radius: 20px;
background:url(../images/paopao.png) no-repeat top left,url(../images/paopao.png) no-repeat right bottom;
background-color: blue;
transition: all 3s;
}
div:hover{
background-position: right bottom,top left;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
15、透明度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>16透明度</title>
<style>
div{
width: 100px ;
height: 100px;
background-color: red;
/* background:rgba(255,0,0,.2) 盒子的背景透明*/
opacity: 0.2;//盒子半透明
/* filter:alpha(opacity=20) ie 6写法*/
}
</style>
</head>
<body>
<div></div>
<p>12312312</p>
</body>
</html>
16、rotateX
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>17rotateX</title>
<style>
img{
transition: all 2s;
}
img:hover{
transform: rotateX(360deg);
}
</style>
</head>
<body>
<img src="../images/x.jpg" height="226" width="300" alt="loading" />
</body>
</html>
17、rotateY
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>18rotateY</title>
<style>
body{
perspective: 500px;
}
img{
transition: all 2s;
}
img:hover{
transform: rotateY(360deg);
}
</style>
</head>
<body>
<img src="../images/1498446043198.png" alt="loading" />
</body>
</html>
18、两面翻转的盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>18rotateY</title>
<style>
body{
perspective: 500px;
}
img{
transition: all 2s;
}
img:hover{
transform: rotateY(360deg);
}
</style>
</head>
<body>
<img src="../images/1498446043198.png" alt="loading" />
</body>
</html>
好用的话,关注一下我的公众号支持一下吧