目录
- css3中的过渡
- css3中的2d变换
- css3中的渐变
1. css3中的过渡
css3中的过渡功能像是一种黄油，通过一些CSS的简单动作触发样式平滑过渡。W3C标准中描述的transition功能非常简单：CSS3的transition允许CSS的属性值在规定的时间区间内平滑的过渡。
1.1 CSS3的过渡属性
-
transition属性是一个复合属性，出于简洁性和便于维护考虑，过渡语法通常以简化的形式表达。
-
transition: <过渡属性><过渡所需的时间> <过渡动画函数> <过渡延迟时间>
-
transition 属性主要包含了四个属性:
-
transition-property: 指定过渡或动态模拟的CSS属性。
-
transition-duration: 指定完成过渡所需的时间。
-
transition-timeing-function: 指定过渡函数
-
transition-delay: 指定过渡开始出现的延迟时间。
1.2 指定过渡属性transition-property
我们是可以通过设置指定的属性，使元素发生相对应的变化。需要注意的是,并不是所有的css属性都可以过渡，一般情况下，我们会对以下的类型属性来处理。
-
颜色属性
-
具有长度值，百分比的属性
-
真实的数值:如opacity,font-weight,font-size
-
变形系类的属性:如rotate(),scale(),translate()等
-
visibility:在0-1的范围内。0表示隐藏，1表示完全显示
-
阴影:例如text-shadow属性。
-
渐变
1.3 指定过渡时间transition-duration
transition-duration:time
time为数值，单位为s(秒)或ms(毫秒)。可以作用与所有元素。默认值为0，也就是说变换是即时的。当你设置transition-duration为0时，指定的元素样式过渡时，看不到过渡过程，直接看结果。和transition-property属性一样，当你设置多个过渡属性的时候，也可以设置多个过渡时间，每个值之间需要用逗号隔开。
1.4 指定过渡函数transition-timing-function
transition-timing-function属性指定某种指代过渡”缓冲函数”的属性。此属性可指定浏览器的过渡速度，以及过渡期间的操作进展情况。可以将某个值指定为预定义函数，阶梯函数或者三次方贝塞尔曲线。（cubic-bezier(0.145,1.295,0,1.610)）
1.5 指定过渡延迟时间transition-delay
过渡属性transition还有一个过渡延迟时间属性transition-delay,用来定义过渡延迟时间。transition-delay用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行过渡效果，它的取值可以是正整数和0，非0的时候必须设置单位s(秒)或者ms(毫秒)
练习
练习1：鼠标悬浮body上时，盒子的高度从100px过渡到50px,然后宽度从 50px过渡到300px，同时盒子的背景颜色从”#8ec63f”色过渡到”#f7941d”色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过度时间</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
margin: 200px auto;
border: 1px solid #666;
height: 200px;
}
.wrap{
width: 50px;
height: 100px;
background: #8ec63f;
transition: 2s all;
}
body:hover .warp{
height: 50px;
width: 300px;
background: #f7941d;
}
</style>
</head>
<body>
<div class="wrap">
</div>
</body>
</html>
练习2：CSS3实现导航条下拉效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #666;
}
ul li{
list-style: none;
}
.nav {
width: 250px;
margin: 20px auto;
}
.nav ul:nth-child(1){
display: flex;
}
.nav ul:nth-child(1)>li{
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
border: 1px solid #ddd;
box-shadow: 2px 2px 4px #ddd;
transition:1s all;
}
.nav ul:nth-child(2){
height: 0;
}
.nav ul:nth-child(2)>li{
height: 0;
overflow: hidden;
transition:0.7s;
}
ul:nth-child(1)>li:hover a .creat{
border-top: 8px solid #ddd;
border-bottom: 0px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
}
ul:nth-child(1)>li:hover ul:nth-child(2)>li{
border: 1px solid #ddd;
height: 40px;
}
.creat{
display: inline-block;
transition: 1s all;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #ddd;
border-right: 0px solid;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="javascript:;">下拉菜单 <span class="creat"></span></a>
<ul>
<li><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
</ul>
</li>
<li>
<a href="javascript:;">下拉菜单 <span class="creat"></span></a>
<ul>
<li><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
</ul>
</li>
</ul>
</div>
<script src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
练习3：移入出现遮盖层
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>遮盖层</title>
<style>
*{
margin: 0;
padding: 0;
}
.content{
width: 520px;
height: 520px;
border: 1px solid #ddd;
box-shadow: 2px 2px 4px #ddd;
margin: 20px auto;
display: flex;
box-sizing: border-box;
padding: 10px;
}
.item{
width: 200px;
height: 150px;
border: 1px solid #666;
position: relative;
overflow: hidden;
transition: 2s all;
}
.over{
width: 200px;
height: 150px;
background: rgba(0,0,0,0.5);
position: absolute;
top: 150px;
transition: 1s all;
color: #fff;
text-align: center;
}
.item:hover .over{
top: 0;
}
</style>
</head>
<body>
<div class="content">
<div class="item">
<h2>内容</h2>
<div class="over">
遮盖层
</div>
</div>
</div>
</body>
</html>
2. css3中的2d变换
在css2.0中，如果需要我们对于某个元素进行一个倾斜，缩放，移动以及翻转元素，是非常困难的一件事。只能借助photoshop切图的方式来完成。但在css3中，为我们新增了变形的功能。
CSS3变形时一些效果的集合，比如平移，旋转，缩放和倾斜效果，每个效果都称为变形函数，它们可以操控元素发生旋转，缩放，平移等变化。不需要我们依赖图片，FLASH或javascript才能完成。而使用纯CSS来完成这些变形效果。
2.1 transform属性
transform属性让元素在一个坐标系统中变形，包含了一系列变形函数，可以移动，旋转和缩放元素。
transform:none|<transform-function>
可用于内联元素和块元素。其默认值为none，表示元素不进行变形。属性值transform-function,表示一个或多个变形函数，以空格分开。例如rotate,scale,translate等。需要注意的时，在transform中使用过多个transform-function时却需要用空格隔开。
练习1：图片列表带有旋转动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>旋转图片</title>
<style>
*{
margin: 0;
}
.wrap{
width: 600px;
height: 400px;
border: 1px solid black;
padding: 10px 15px;
box-sizing: border-box;
}
.wrap .item{
width: 120px;
height: 120px;
border: 1px solid #ddd;
background: url(img/1.jpg) no-repeat;
background-size:100% 100%;
position: relative;
overflow: hidden;
float: left;
}
.wrap .item .info{
position: absolute;
width: 100%;
height: 120px;
background:rgba(0,0,0,0.5);
color: #fff;
left: 0;
transition: 0.75s all;
-webkit-transform:rotate(60deg) translate(94px,52px);
}
.wrap .item:hover .info{
-webkit-transform:rotate(360deg) translate(0px,0px);
}
</style>
</head>
<body>
<div class="wrap">
<div class="item">
<span class="info">斗破苍穹</span>
</div>
<div class="item">
<span class="info">斗破苍穹</span>
</div>
<div class="item">
<span class="info">斗破苍穹</span>
</div>
<div class="item">
<span class="info">斗破苍穹</span>
</div>
<div class="item">
<span class="info">斗破苍穹</span>
</div>
<div class="item">
<span class="info">斗破苍穹</span>
</div>
<div class="item">
<span class="info">斗破苍穹</span>
</div>
</div>
</body>
</html>
练习2：扇形导航
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>扇形导航</title>
<style>
*{
margin: 0;
}
.wrap{
position: fixed;
width: 50px;
height: 50px;
right: 20px;
bottom: 20px;
}
.wrap img{
position: absolute;
transition: 1s all;
left: 0;
top: 0;
}
.home{
width: 50px;
height: 50px;
background: url(img/home.png) no-repeat;
position: absolute;
left: 0;
top: 0;
transition: 1s all;
}
</style>
</head>
<body>
<div class="wrap" id="wrap">
<img src="img/clos.png" />
<img src="img/full.png" />
<img src="img/open.png" />
<img src="img/prev.png" />
<img src="img/refresh.png" />
<div class="home" id="home">
</div>
</div>
<script>
var oHome = document.getElementById("home")
var oImg = document.getElementById("wrap").getElementsByTagName("img")
var onOff = true
var iR = -150
oHome.onclick = function(){
if(onOff){
this.style.webkitTransform = "rotate(360deg)"
for (var i=0;i<oImg.length;i++) {
var iLt = toChage(iR,90/4*i)
oImg[i].style.left = iLt.left+"px"
oImg[i].style.top = iLt.top+"px"
oImg[i].style.webkitTransform = "rotate(-720deg)"
}
onOff = false
}else {
this.style.webkitTransform = "rotate(0deg)"
for (var i=0;i<oImg.length;i++) {
oImg[i].style.transition = "0.5s "+(oImg.length-1-i)*100+"ms"
oImg[i].style.left = 0+"px"
oImg[i].style.top = 0+"px"
oImg[i].style.webkitTransform = "rotate(-720deg)"
}
onOff = true
}
}
function toChage(iR,iRotate){
var l = Math.round(Math.sin(iRotate/180*Math.PI)*iR)
var t = Math.round(Math.cos(iRotate/180*Math.PI)*iR)
return {
left:l,
top:t
}
}
</script>
</body>
</html>
2.2 transform-orign属性
- transform-orign属性的x轴和y轴的值可以重置元素变形原点的位置。
- transform-orign:x,y
- 属性值可以是百分比,em,px等具体的值，也可以是top,right,bottom,left和center这样的关键词。
3. css3中的渐变
一直以来,Web设计师都是通过图形软件设计这些渐变效果，然后以图片的形式或者背景图片的形式运用到页面中。Web页面上实现的效果，仅从页面的视觉效果上来看，与设计并无任何差异。
事实上这种方法比较麻烦，因为首先需要设计师进行设计，然后进行切图，在通过样式应用到页面中。另外，在实际应用中可扩展性差，还直接影响页面性能。
值得庆幸的是，W3C组织将渐变设计收入到CSS3标准中，可以直接通过CSS的渐变属性制作类似渐变图片的效果。
3.1 CSS3的线性渐变
在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧，从右侧到左侧，从顶部到底部，从底部到顶部或沿任意轴。
在CSS3中制作线性效果，首先要指定一个渐变的方向，起始颜色，结束颜色。具有这三个参数就可以制作一个最简单，最普遍的渐变效果。
基本用法：
- -webkit-linear-gradient(type,start,end，startColor，endColor)
- -webkit-linear-gradient是webkit引擎对渐变的实现一共有5个参数。
- 第一个参数type表示渐变类型，默认是线性渐变。
- 第二个参数start表示渐变的起始值
- 第三个参数end表示渐变的终点值
- 第四个参数startColor表示起始的颜色
- 第五个参数endColor表示结束的颜色
练习1：CSS3进度条
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3进度条</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
width: 200px;
height: 40px;
margin: 20px auto;
border: 1px solid #ddd;
overflow: hidden;
}
.progress{
width: 400px;
height: 40px;
transition: 3s all;
background: -webkit-repeating-linear-gradient(30deg,green 0,green 10px,#fff 10px,#fff 20px);
}
.wrap:hover .progress{
background-position: -100px 0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="progress">
</div>
</div>
</body>
</html>
练习2：光线轨迹
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>百度光斑</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
width: 300px;
height: 300px;
background: -webkit-linear-gradient(-25deg,rgba(255,255,255,0) 0,
rgba(255,255,255,0) 150px,
rgba(255,255,255,1) 160px,
rgba(255,255,255,1) 170px,
rgba(255,255,255,0) 180px)
no-repeat -140px 0px,
red;
transition: 1s all;
}
.wrap:hover{
background-position: 300px 0;
}
</style>
</head>
<body>
<div class="wrap">
</div>
</body>
</html>