学习目标
本期将会学习动画原理、携程网案例、3D等知识。
1.动画(CSS3) animation
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
语法格式： animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向;
关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r
@keyframes 动画名称 {
from{ 开始位置 } 0%
to{ 结束 } 100%
}
体会动画：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
/*调用动画 animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向;*/
animation: move 3s ease 0s infinite alternate;
}
/*声明动画 关键帧*/
@keyframes move{
from{
left: 0;
}
to{
left: 1000px;
background-color: yellow;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
运行试试。
animation-iteration-count:infinite; 无限循环播放 默认是1次
animation-direction： alternate 动画应该轮流反向播放 默认是 normal
animation-play-state:paused; 暂停动画"
动画旋转
所需图片：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 214px;
height: 214px;
position: relative;
}
div img{
animation: rotate linear 2s infinite;
}
@keyframes rotate{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
div p{
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 214px;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div>
<img src="web.png" alt="" />
<p>web 前端</p>
</div>
</body>
</html>
运行看看。
大海波涛案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
background-color: #0ea9b1;
}
img{
width: 100%;
height: auto;
position: absolute;
bottom: 0;
left: 0;
}
img:first-child{
animation: move 2s linear infinite;
}
img:last-child{
animation: move 1.5s linear infinite;
}
@keyframes move{
0%{
bottom: 0;
}
50%{
bottom: -50px;
}
100%{
bottom: 0;
}
}
.sun{
width: 100px;
height: 100px;
/*background-color: pink;*/
margin: 100px;
position: relative;
}
.sun::before,.sun::after{
content: "";
position: absolute;
left: 50%;
top: 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);
}
@keyframes sun{
0%{
transform:translate(-50%,-50%) scale(1);
box-shadow: 0px 0px 0px rgba(255,255,255,0.7);
}
50%{
transform:translate(-50%,-50%) scale(1.1);
box-shadow: 0px 0px 16px rgba(255,255,255,0.7);
}
100%{
transform:translate(-50%,-50%) scale(1);
box-shadow: 0px 0px 0px rgba(255,255,255,0.7);
}
}
</style>
</head>
<body>
<div class="sun"></div>
<img src="1.png" alt="" />
<img src="2.png" alt="" />
</body>
</html>
小汽车案例
body {
background: white;
}
img {
width: 200px;
}
.animation {
animation-name: goback;
animation-duration: 5s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
@keyframes goback {
0%{}
49%{
transform: translateX(1000px);
}
55%{
transform: translateX(1000px) rotateY(180deg);
}
95%{
transform: translateX(0) rotateY(180deg);
}
100%{
transform: translateX(0) rotateY(0deg);
}
}
2.伸缩布局
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏览器支持不一致，致使Flexbox布局使用不多。
2、各属性详解****
1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
min-width 最小值 min-width: 280px 最小宽度 不能小于 280
max-width: 1280px 最大宽度 不能大于 1280
2.flex-direction调整主轴方向（默认为水平方向）
flex-direction: column 垂直排列
flex-direction: row 水平排列
http://m.ctrip.com/html5/ 携程网手机端地址.
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
section{
width: 80%;
height: 150px;
background-color: pink;
margin: 100px auto;
/*父亲添加伸缩布局*/
display: flex;
}
section div{
height: 100%;
flex: 1;/*孩子的份数*/
}
section div:nth-child(1){
background-color: pink;
flex: 3;/*第一个孩子占3份,其他孩子平分剩下的*/
}
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>
这样布局的好处就是没有浮动那样会影响后面的。
min-width:500px意思是当你伸缩浏览器，盒子会压缩，但最低值是500，到500后就不再压缩了。
3.携程网
要达成的效果图：
完整的图片，用ps量各个数值：
所需图片：
所需精灵图：
文字阴影(CSS3)
以后我们可以给我们的文字添加阴影效果了 Shadow 影子
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
1.前两项是必须写的。 后两项可以选写。
我们先把基础的先做出来：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
/*移动端(手机网页)的宽度最大值和最小值一般是以下值*/
min-width: 320px;
max-width: 540px;
/*background-color: pink;*/
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;
/*text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;*/
text-shadow: 0 2px 1px rgba(0,0,0,.2);
}
nav a{
text-decoration: none;
color: #fff;
}
.row{
height: 90px;
display: flex;/*伸缩布局*/
border-radius: 5px;
overflow: hidden;
}
.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;
}
</style>
</head>
<body>
<header>
<img src="img/banner.jpg"/>
</header>
<nav>
<div class="row">
<div>
<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>
效果图：
下面就是导入图片，完善这个项目。但是，当你对精灵图量数值时，你会发现精灵图的大小和实际需要的大小不一样，精灵图是实际需要的2倍大。这是因为在移动端（手机）中ios（苹果）系统要求高清版本，所以要做成2倍大小，再缩放以达到高清。
背景缩放(CSS3)
通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下：
a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多
c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */
先看一个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 400px;
height: 400px;
background: url(x.jpg) no-repeat;
border: 1px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
盒子很大，背景很小，所以就需要缩放。我们来讲一下“cover”
我们来看：
红色是盒子，绿色是背景。用cover的话来放大绿色背景，宽度虽然超出盒子，但是高度不够的话还会继续缩放。直到高度与盒子一样，所以用cover一定会超出盒子一部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 400px;
height: 400px;
background: url(x.jpg) no-repeat;
/*背景属性:颜色/图片/平铺/位置/滚动*/
border: 1px solid red;
/*background-size: 规定背景图像的尺寸;*/
/*background-size: 300px 300px;*/
/*background-size: 300px;如果只有一个值,后面一个值默认为auto,等比例缩放*/
background-size: cover;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 400px;
height: 400px;
background: url(x.jpg) no-repeat;
/*背景属性:颜色/图片/平铺/位置/滚动*/
border: 1px solid red;
/*background-size: 规定背景图像的尺寸;*/
/*background-size: 300px 300px;*/
/*background-size: 300px;如果只有一个值,后面一个值默认为auto,等比例缩放*/
/*background-size: cover;*/
background-size: contain;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
用contain的话，宽度满了就不会再缩放了，这样会显示完整的图片。
那么精灵图也要用ps或者fireworks进行等比例缩放，这样才能找到正确的坐标。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
/*移动端(手机网页)的宽度最大值和最小值一般是以下值*/
min-width: 320px;
max-width: 540px;
/*background-color: pink;*/
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;
/*text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;*/
text-shadow: 0 2px 1px rgba(0,0,0,.2);
}
nav a{
text-decoration: none;
color: #fff;
}
.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(img/ctrip.png) no-repeat 0 -127px;
background-size: 104px;
}
.row .icon-flight{
background-position: 0 -288px;
}
</style>
</head>
<body>
<header>
<img src="img/banner.jpg"/>
</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>
<a href="#">
<em>景点·玩乐</em>
<i></i>
</a>
</div>
<div class="row33">
<a href="#">美食林</a>
<a href="#">WIFI·电话卡</a>
</div>
<div class="row33">
<a href="#">购物·信用卡</a>
<a href="#">保险·签证</a>
</div>
</div>
</nav>
</body>
</html>
效果图
4.浏览器前缀
| 浏览器前缀 | 浏览器 |
|---|---|
| -webkit- | Google Chrome, Safari, Android Browser |
| -moz- | Firefox |
| -o- | Opera |
| -ms- | Internet Explorer, Edge |
| -khtml- | Konqueror |
有些代码在某个浏览器不支持，那么加上前缀就行了。
后面我们会有 常用的解决H5和C3 的兼容解决文件， 我们这里暂且不涉及。
5.了解背景渐变
在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件，比如说Photoshop，你对线性渐变并不会陌生。
兼容性问题很严重，我们这里之讲解线性渐变
语法格式：
background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；
background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)；
例子1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 100px;
/*background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；*/
background: -webkit-linear-gradient(top,red,green);/*要加前缀,否则浏览器不支持*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
例子2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 100px;
/*background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；*/
/*background: -webkit-linear-gradient(top,red,green);*//*要加前缀,否则浏览器不支持*/
/*background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)；*/
background: -webkit-linear-gradient(top,red 0%,green 50%,blue 100%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6.多背景
多背景(CSS3)
以逗号分隔可以设置多背景，可用于自适应布局 做法就是 用逗号隔开就好了。
- 一个元素可以设置多重背景图像。
- 每组属性间使用逗号分隔。
- 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px ,
所需图片：
url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 500px;
height: 500px;
/*多背景用逗号隔开*/
background:url(2.jpg) no-repeat top left,url(3.jpg) no-repeat bottom right;
border: 1px solid #000;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
泡泡案例
图片是白色，不容易看见，所需图片：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 80px;
border-radius: 20px;
background: url(paopao.png) no-repeat top left,url(paopao.png) no-repeat bottom right;
background-color: blue;
transition: all 3s;
}
div:hover{
background-position: right bottom,top left;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
7.盒子半透明
先看一个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background: rgba(255,0,0,.2);/*盒子的背景透明*/
}
</style>
</head>
<body>
<div>123456</div>
</body>
</html>
这个方法背景半透明，字不透明。
下一个方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
/*background: rgba(255,0,0,.2);*//*盒子的背景透明*/
opacity: 0.2;
}
</style>
</head>
<body>
<div>123456</div>
</body>
</html>
这个方法字也半透明了。
8. 优雅降级和渐进增强（取决于客户需求）
什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？
渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
类似 爬山，由低出往高处爬
<b>优雅降级 graceful degradation：</b>
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
类似蹦极，由高处往低处下落
区别：渐进增强是向上兼容，优雅降级是向下兼容。
个人建议： 现在互联网发展很快， 连微软公司都抛弃了ie浏览器，转而支持 edge这样的高版本浏览器，我们很多情况下没有必要再时刻想着低版本浏览器了，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。
9.3D变形(CSS3) transform
2d x y
3d x y z
左手坐标系
伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图
CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图
简单记住他们的坐标：
x左边是负的，右边是正的
y 上面是负的， 下面是正的
z 里面是负的， 外面是正的
rotateX()
就是沿着 x 立体旋转.
img {
transition:all 0.5s ease 0s;
}
img:hove {
transform:rotateX(180deg);
}
rotateY()
沿着y轴进行旋转
img {
transition:all 0.5s ease 0s;
}
img:hove {
transform:rotateX(180deg);
}
rotateZ()
沿着z轴进行旋转
img {
transition:all .25s ease-in 0s;
}
img:hover {
/* transform:rotateX(180deg); */
/* transform:rotateY(180deg); */
/* transform:rotateZ(180deg); */
/* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}
透视(perspective)
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
- 透视原理： 近大远小 。
- 浏览器透视：把近大远小的所有图像，透视在屏幕上。
- perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
理解透视距离原理：
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
perspective: 500px;/*太大太小效果都不好,一般是500左右*/
}
img{
transition: all 2s;
}
img:hover{
transform: rotateY(360deg);
}
</style>
</head>
<body>
<img src="1498446043198.png"/>
</body>
</html>
translateX(x)
仅水平方向移动**（X轴移动）
主要目的实现移动效果
translateY(y)
仅垂直方向移动（Y轴移动）
translateZ(z)
transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。
translate3d(x,y,z)
[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值。
backface-visibility
backface-visibility 属性定义当元素不面向屏幕时是否可见。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 224px;
height: 224px;
}
div:hover img{
transform: rotateY(180deg);
}
div img{
position: absolute;
top: 0;
left: 0;
transition: all 2s;
}
div img:last-child{
backface-visibility: hidden;
}
</style>
</head>
<body>
<div>
<img src="hou.svg"/>
<img src="qian.svg"/>
</div>
</body>
</html>
前：
后：
10.总结
css的知识就先学习到这。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
