1.transition属性:

transition属性是一个速记属性有四个属性:transition-property , transition-duration, transition-timing-function,and transition-delay。
注意: 始终指定transition-duration属性,否则持续时间为0,transition不会有任何效果。
默认值:all 0 ease 0
js语法: object.style.transition = "width 2s";
transition-property: 指定CSS属性的name,transition效果

transition-duration: transition效果需要指定多少秒或毫秒才能完成

transition-timing-function: 指定transition效果的转速曲线

transition-delay: 定义transition效果开始的时候

例子:

div
{
width:100px;
height:100px;
background:red;
transition:transform 1s ease 1s;
-webkit-transition:transform 2s ease 1s;
} div:hover
{
transform:translate(200px, 0px);
}

当鼠标移在div上,1s延迟后,div向右以ease方式,在2s内,移动200px。

还有transition属性的分解写法:

<style>
div
{
width:100px;
height:100px;
background:red;
transition-property:width;
transition-duration:2s;
transition-delay:2s;
transition-timing-function: ease; /* Safari/Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:2s;
-webkit-transition-delay:2s;
-webkit-transition-timing-function: ease;
} div:hover
{
width:300px;
}
</style>

注意:

该属性不兼容IE9以及更早版本的浏览器;

该过度效果开始前会停顿2s;

transition-timing-function属性值:属性指定切换效果的速度;此属性允许一个过渡效果,以改变其持续时间的速度;默认值ease;
描述
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

关于这几个速度的例子,看下面:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transaction</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
<style type="text/css">
.trans_box {
padding: 20px;
background-color: #f0f3f9;
width: 800px;
}
.trans_list {
width: 10%;
height: 64px;
margin:10px 0;
background-color:#486AAA;
color:#fff;
text-align:center;
}
.ease {
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
}
.ease_in {
-webkit-transition: all 4s ease-in;
-moz-transition: all 4s ease-in;
-o-transition: all 4s ease-in;
transition: all 4s ease-in;
}
.ease_out {
-webkit-transition: all 4s ease-out;
-moz-transition: all 4s ease-out;
-o-transition: all 4s ease-out;
transition: all 4s ease-out;
}
.ease_in_out {
-webkit-transition: all 4s ease-in-out;
-moz-transition: all 4s ease-in-out;
-o-transition: all 4s ease-in-out;
transition: all 4s ease-in-out;
}
.linear {
-webkit-transition: all 4s linear;
-moz-transition: all 4s linear;
-o-transition: all 4s linear;
transition: all 4s linear;
}
.trans_box:hover .trans_list{
margin-left: 89%;
background-color: #beceeb;
color: #333;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
} </style>
</head>
<body>
<div id="transBox" class="trans_box">
<div class="trans_list ease">ease</div>
<div class="trans_list ease_in">ease-in</div>
<div class="trans_list ease_out">ease-out</div>
<div class="trans_list ease_in_out">ease-in-out</div>
<div class="trans_list linear">linear</div>
</div> </body>
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript"> </script>
</html>

二、transform
transform指变换,使用过photoshop的人应该知道里面的Ctrl+T自由变换。transform就是指的这个东西,拉伸,压缩,旋转,偏移。见下面示例代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transform</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
<style type="text/css">
.demo {
padding: 10px;
margin-top: 100px;
}
.trans_box {
display: inline-block;
margin: 10px;
padding: 20px 10px;
border: 1px solid #beceeb;
background-color: #f0f3f9;
}
.trans_skew {
-moz-transform: skew(35deg);
-webkit-transform: skew(35deg);
-o-transform: skew(35deg);
transform: skew(35deg);
}
.trans_scale {
-moz-transform: scale(1,0.5);
-webkit-transform: scale(1,0.5);
-o-transform: scale(1,0.5);
transform: scale(1,0.5);
}
.trans_rotate {
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.trans_translate {
-moz-transform: translate(10px, 20px);
-webkit-transform: translate(10px, 20px);
-o-transform: translate(10px, 20px);
transform: translate(10px, 20px);
}
.trans_rotate_skew_scale_translate {
-moz-transform: skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);
-webkit-transform: skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);
-o-transform: skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);
transform: skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);
}
</style>
</head>
<body>
<div class="demo">
<span class="trans_box trans_skew">transform: skew(35deg);</span>
<span class="trans_box trans_scale">transform:scale(1,0.5);</span>
<span class="trans_box trans_rotate">transform:rotate(45deg);</span>
<span class="trans_box trans_translate">transform:translate(10px, 20px);</span>
<span class="trans_box trans_rotate_skew_scale_translate">transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);</span>
</div> </body>
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript"> </script>
</html>

属性解释:
translate: 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数;
     值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。
 
rotate:      通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
           值 rotate(30deg) 把元素顺时针旋转 30 度。
 
scale:      通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:
         值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。
 
skew:     通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:
         值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。
 
transform属性要是加上transition的过渡特性,那可就是如虎添翼:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transform</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
<style type="text/css">
.demo {
padding: 10px;
margin-top: 100px;
}
.trans_effect {
display: block;
line-height: 100px;
width: 100px;
background: #beceeb;
margin: 30px auto;
text-align: center;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: transform 2s ease-in-out;
}
.trans_effect:hover {
-webkit-transform: rotate(720deg) scale(2,2);
-moz-transform: rotate(720deg) scale(2,2);
-o-transform: rotate(720deg) scale(2,2);
-ms-transform: rotate(720deg) scale(2,2);
transform: rotate(720deg) scale(2,2);
}
</style>
</head>
<body>
<div class="demo">
<div class="trans_effect">look</div>
</body>
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript"> </script>
</html>

三、animation

animation 属性是一个简写属性,用于设置六个动画属性:
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。
语法:
animation: name duration timing-function delay iteration-count direction;

animation-name: 规定需要绑定到选择器的 keyframe 名称。

animation-duration: 规定完成动画所花费的时间,以秒或毫秒计。

animation-timing-function: 规定动画的速度曲线。

animation-delay: 规定在动画开始之前的延迟。

animation-iteration-count: 规定动画应该播放的次数。

animation-direction: 规定是否应该轮流反向播放动画。

CSS3 @keyframes 规则

浏览器支持情况:

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释:Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。

下面的表格列出了 @keyframes 规则和所有动画属性:

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 infinite 无限; 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。

alternate 反向播放;
3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
animation-fill-mode 规定对象动画时间之外的状态。 3

下面是例子使用:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transform</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
<style type="text/css">
.demo {
padding: 10px;
margin-top: 100px;
}
#animated_div {
width: 80px;
height: 60px;
background: #92B901;
color: #ffffff;
position: relative;
font-weight: bold;
font-size: 12px;
padding: 20px 10px 0px 10px;
animation: animated_div 5s infinite alternate;
-moz-animation: animated_div 5s infinite alternate;
-webkit-animation: animated_div 5s infinite alternate;
-o-animation: animated_div 5s infinite alternate;
border-radius: 5px;
-webkit-border-radius: 5px;
}
@keyframes animated_div{
0% {transform: rotate(0deg);left: 0px;}
25% {transform: rotate(20deg);left: 0px;}
50% {transform: rotate(0deg);left: 500px;}
55% {transform: rotate(0deg);left: 500px;}
70% {transform: rotate(0deg);left: 500px;background: #1ec7e6;}
100% {transform: rotate(-360deg);left: 0px;}
}
@-moz-keyframes animated_div{ /* Firefox */
0% {transform: rotate(0deg);left: 0px;}
25% {transform: rotate(20deg);left: 0px;}
50% {transform: rotate(0deg);left: 500px;}
55% {transform: rotate(0deg);left: 500px;}
70% {transform: rotate(0deg);left: 500px;background: #1ec7e6;}
100% {transform: rotate(-360deg);left: 0px;}
}
@-webkit-keyframes animated_div{ /* Safari and Chrome */
0% {transform: rotate(0deg);left: 0px;}
25% {transform: rotate(20deg);left: 0px;}
50% {transform: rotate(0deg);left: 500px;}
55% {transform: rotate(0deg);left: 500px;}
70% {transform: rotate(0deg);left: 500px;background: #1ec7e6;}
100% {transform: rotate(-360deg);left: 0px;}
}
@-o-keyframes animated_div{ /* Opera */
0% {transform: rotate(0deg);left: 0px;}
25% {transform: rotate(20deg);left: 0px;}
50% {transform: rotate(0deg);left: 500px;}
55% {transform: rotate(0deg);left: 500px;}
70% {transform: rotate(0deg);left: 500px;background: #1ec7e6;}
100% {transform: rotate(-360deg);left: 0px;}
}
</style>
</head>
<body>
<div class="demo">
<p id="animated_div">CSS3 动画</p>
</div> </body>
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript"> </script>
</html>

=====================================下面是例子  有些是摘抄的================================================

例子1:头像照片发光:

animations不仅适用于CSS2中的属性,CSS3也是支持的,例如box-shadow盒阴影效果,所以,我们可以实现外发光效果的。使用过web qq的人应该有印象,当鼠标移到聊天对象脑袋上的时候会有蓝色外发光的动画,但是那是gif动画图片实现的(现在自动跳转到web qq 2.0已看不到效果)。但是gif的重用性有限而且制作破费功夫,如果简单几行CSS代码就可以实现高性能高扩展的效果岂不更加,现在animations就可以搞定这一些。

例子:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>照片外发光动画demo</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
<style type="text/css">
.demo {
padding: 10px;
margin: 100px 0 0 100px;
}
.anim_image {
padding: 3px;
border: 1px solid #beceeb;
background-color: white;
-moz-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
-webkit-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
}
.anim_image:hover {
background-color: #f0f3f9;
-webkit-animation-name: glow;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes glow {
0% {
-webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 0.5);
border-color: rgba(160, 179, 214, 0.5);
}
100% {
-webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 1.0), 0 0 18px rgba(0, 140, 255, 1.0);
border-color: rgba(160, 179, 214, 1.0);
}
}
</style>
</head>
<body>
<div class="demo">
<img class="anim_image" src="data:images/head14.jpg">
</div> </body>
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript"> </script>
</html>

例子2:图片轮转缩放显示动画demo

下面这个实例是与图片位置,比例尺寸挂钩的,聪明的你是不是想到了transform属性呢。对的,transform+tranisition,双剑合璧,天下无敌。下面这个效果是很酷很酷的,以前基本上只能在Flash中可以看到。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮转缩放显示动画demo</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
<style type="text/css">
.demo {
padding: 10px;
margin: 100px 0 0 100px;
}
.anim_box {
width: 200px;
cursor: pointer;
}
.anim_image {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
cursor:pointer;
}
.anim_image_top {
position: absolute;
-webkit-transform: scale(0, 0);
opacity: 0;
filter: Alpha(opacity=0);
}
.anim_box:hover .anim_image_top{
opacity: 1;
filter: Alpha(opacity=100);
-webkit-transform: scale(1, 1);
-webkit-transform-origin: top right;
}
.anim_box:hover .anim_image_bottom{
-webkit-transform: scale(0, 0);
-webkit-transform-origin: bottom left;
}
</style>
</head>
<body>
<div class="demo">
<div id="testBox" class="demo anim_box">
<img class="anim_image anim_image_top" src="data:images/ps6.jpg">
<img class="anim_image anim_image_bottom" src="data:images/ps4.jpg">
</div>
</div> </body>
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript"> </script>
</html>

transform-origin:
transform-origin 属性允许您改变被转换元素的位置。
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
默认值:50% 50% 0
语法:
transform-origin: x-axis y-axis z-axis;
x-axis:
定义视图被置于 X 轴的何处。可能的值:
  • left
  • center
  • right
  • length
  • %
y-axis:
定义视图被置于 Y 轴的何处。可能的值:
  • top
  • center
  • bottom
  • length
  • %
z-axis:
定义视图被置于 Z 轴的何处。可能的值:
  • length

例子3:选项卡切换

我们平时的选项卡切换基本上都是很生硬的,直接啪啪啪,切换过来了,没有点过渡啊什么的(毕竟写JavaScript动画成本较高),现在,有了transitions,实现过渡效果就是几行CSS代码的事情,不多说了,直接上实例。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>平滑选项卡切换demo</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
<style type="text/css">
.demo {
padding: 10px;
margin: 100px 0 0 100px;
}
.trans_image_box {
width: 1600px;
height: 300px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.trans_box {
width: 400px;
margin: 20px;
overflow: hidden;
}
.trans_image {
width: 400px;
float: left;
}
.trans_image_trigger {
padding-top: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="demo"> <div class="trans_box">
<div id="transImageBox" class="trans_image_box">
<img class="trans_image" src="data:images/ps1.jpg">
<img class="trans_image" src="data:images/ps2.jpg">
<img class="trans_image" src="data:images/ps3.jpg">
<img class="trans_image" src="data:images/ps4.jpg">
</div>
<div id="transImageTrigger" class="trans_image_trigger">
<a href="#1">图片1</a> 
<a href="#2">图片2</a> 
<a href="#3">图片3</a> 
<a href="#4">图片4</a>
</div>
</div> </div>
</body>
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript">
(function() {
var $ = function(id) {
return document.getElementById(id);
};
var oBox = $("transImageBox"),
oTrigger = $("transImageTrigger").getElementsByTagName("a"),
lTrigger = oTrigger.length; if (oBox && lTrigger) {
for (var i = 0; i<lTrigger; i+=1) {
oTrigger[i].onclick = function() {
var index = Number(this.href.replace(/.*#/g, "")) || 1;
oBox.style.marginLeft = (1 - index) * 400 + "px";
return false;
};
}
}
})();
</script>
</html>

CSS其作用的就是那个值以all开头的transition属性;

这里点击控制transImageBox的margin-left,而由于transition对all都有效果,所以改变margin-left也是有动画效果的;

只要是CSS值变换的,只要是额外有transition属性设置的,都是平滑效果,都是动画。

-------------

css transition transform animation例子讲解的更多相关文章

  1. css动画(transition/transform/animation)

    在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...

  2. css010 css的transform transition和animation

    css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1.         Transform    Transform(变形) r ...

  3. css 动画 transform transition animation

    1.transform  transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...

  4. CSS动画transform、transition和animation的区别

    CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation. 1.transform:描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转rotat ...

  5. CSS製作動畫效果(Transition、Animation、Transform)

    CSS 2D Transforms https://www.w3schools.com/css/css3_2dtransforms.asp CSS 3D Transforms https://www. ...

  6. css3实践之图片轮播(Transform,Transition和Animation)

    楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...

  7. 区别Transform、Transition、Animation

    另一篇参考文章:http://www.7755.me/Article/CSS3/39/ 近来上班之外就是研究研究CSS动画,下面是第一阶段总结.话说为加强记忆,实则想抛砖引玉!   标题直译一下就是: ...

  8. Atitti css transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. Transition ...

  9. Atitti  css   transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. js 动态改变 st ...

随机推荐

  1. [转载]oracle游标概念讲解

    原文URL:http://www.2cto.com/database/201203/122387.html ORACLE游标概念讲解 什么是游标?  ①从表中检索出结果集,从中每次指向一条记录进行交互 ...

  2. 关于rowid的函数

    1. select dbms_rowid.rowid_object(rowid) object_id, dbms_rowid.rowid_relative_fno(rowid) file_id, db ...

  3. NodeJS类型定义方式

    最近在学习nodejs,就是因为它比较轻便,并发量大,上手快.由于以前一直在做C#的后端,没有接触过javascript,所以还得慢慢学习之. nodejs所用的是javascript语言,它没有如C ...

  4. (C/C++学习笔记) 十五. 构造数据类型

    十五. 构造数据类型 ● 构造数据类型概念 Structured data types 构造数据类型 结构体(structure), 联合体/共用体 (union), 枚举类型(enumeration ...

  5. 201621123010《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 为你的系统增加网络功能(购物车.图书馆管理.斗地主等)-分组完成 为了让你的系统可以被多个用户通过网 ...

  6. anu - controlledComponent

    /** input, select, textarea这几个元素如果指定了value/checked的**状态属性**,就会包装成受控组件或非受控组件 受控组件是指,用户除了为它指定**状态属性**, ...

  7. php_os 检查php运行环境

    if(strtolower(PHP_OS)=='linux'){ $tests['os']['state']="good"; $tests['os']['message']='OS ...

  8. python3.6 django2.06 使用QQ邮箱发送邮件

    开通QQ邮箱IMAP/SMTP服务,忘记了,重新开通一下,记住密码串. import smtplib from email.mime.text import MIMEText # 收件人列表 mail ...

  9. 12.2 linux下的线程

    什么是线程: 在一个程序里的一个执行路线就叫做线程(thread),更准确的定义是:线程是“一个进程内部的控制序列” 一切进程至少都有一个执行线程 进程与线程: 进程是资源竞争的基本单位 线程是程序执 ...

  10. 原生JS 的cookie和jq的cookie,

    COOKIE基础及应用:1.什么是COOKIE==>页面用来保存信息,比如:自动登录,记住用户名2.COOKIE的特性:  --同一个网站中,所有的页面共享同一套cookie  --数量,大小有 ...