CSS3过渡、变形和动画

1.CSS3过渡

　　所谓CSS3过渡，就是使用CSS3让元素从一种状态慢慢转换到另一种状态。如鼠标的悬停状态就是一种过渡。如下例子：

　　#content a{
   　　text-decoration: none;
   　　font:2.25em;
   　　background-color: #b01c20;
   　　text-transform: uppercase;
   　　border-radius: 8px;
   　　color: #fff;
   　　padding:30px;
   　　float: left;
   　　background: linear-gradient(90deg,#b01c20 0%,#f15c60 100%);
   　　margin-top: 30px;
   　　box-shadow: 5px 5px 5px hsla(0,0%,26.6667%,0.8);
   　　text-shadow:0px 1px black;
   　　 border:1px solid #bfbfbf;
   　　}

　　现在给按钮增加一个悬停效果：

　　#content a:hover{
   　　border:1px solid #000;
   　　color: #000;
   　　text-shadow:0px 1px #fff;
　　}

　　使用这段CSS代码，当鼠标悬停在按钮上面时，按钮会直接从第一种状态（白色文字）突变到第二种状态（黑色文字）-就是一个开关效果。设置平滑过渡，代码如下：

　　#content a{

　　　　/*.......原来的样式.......*/

　　　　transition:all 1s ease 0s;

　　}

　　注意：这里把过渡应用到了元素而不是悬停状态上。这样做是为了让元素的其他状态也能设置不同的样式并拥有类似的效果。所以，过渡声明要放在过渡效果开始的元素上。

　　1.1.过渡相关的属性

　　　　（1）transition-property:要过渡的CSS属性名称（比如background-color、text-shadow或者all，使用all则过渡会被应用到每一个可能的CSS属性上）；

　　　　（2）transition-duration:定义过渡效果持续的时间（时间单位为秒，比如.3s、2s或1.5s）;

　　　　（3）transition-timing-function:定义过渡期间速度如何变化（比如ease、linear、ease-in、ease-out、ease-in-out或cubic-bezier）；

　　　　（4）transition-delay:可选，用于定义过渡开始前的延迟时间。相反，将该值设置为一个负数，可以让过渡效果立即开始，但过渡旅程则会在半路结束。

　　　　单独使用各种过渡属性创建转换效果的语法如下：　　

　　　　　　#content a{

　　　　　　　　　/*.....其他样式......*/

　　　　　　　　transition-property:all;

　　　　　　　　transition-duration:1s;

　　　　　　　　transition-timing-function:ease;

　　　　　　　　transition-delay:0s;　

　　　　　　}

2.CSS3的2D变形

　　2.1.scale:用来缩放元素（放大或缩小）

　　　　nav ul li a:hover{

　　　　　　/*......其他代码......*/

　　　　　　transform:scale(1.7);

　　　　}

　　　　要想看到效果必须让应用该规则的原始原始以块状显示。如下：

　　　　nav ul li a{

　　　　　　/*.....其他代码.....*/

　　　　　　display:block;

　　　　}

　　2.2 translate:在屏幕上移动元素（上下左右四个方向）

　　　　transform:translate(40px,0px);

　　　　translate会告知浏览器按照一定度量值移动元素，可以使用像素或百分比。语法是第一个值表示从左向右移动的距离，然后是从上向下移动的距离。正值会让元素向右或向下移动，负值则会让元素向左或向上移动。

　　要想看到效果必须让应用该规则的原始原始以块状显示。

　　2.3 rotate:按照一定角度旋转元素（单位为度）

　　　　transform:rotate(90deg);

　　　　　括号中的值只能以度为单位。当然，也可以如下设置

　　　　　　transform:rotate(3600deg);

　　　　　　这会让元素旋转整整10圈。

　　2.4 skew:沿X和Y轴对元素进行斜切

　　　　transform:skew(10deg,2deg);

　　2.5 matrix:允许你以像素精度来控制变形效果。

　　　　transform:matrix(1.678,-0.256,1.522,2.333,-51.533,-1.989);

　　　　它基本上能让你将若干变形效果（scale、rotate、skew等等）组合成单个声明。

　　2.6傻瓜化的矩阵变形工具

　　访问这里：http://www.useragentman.com/matrix/。Matrix Construction Set这个网站可以让你精确地将元素拖拽成想要的样子，然后它会自动生成完美的矩阵代码（代码中包含了浏览器私有前缀）。

　　2.7 transform-origin属性

　　在使用上述变形效果的同时，你还可以使用transform-origin属性来修改变形效果的起点。

　　　　transform:rotate(45deg);　　

　　　　transform-origin:20% 20%;

　　2.8 CSS3的2D变形模块的完整规范文档请见：http://www.w3.org/TR/css3-2d-transforms/、

3.尝试CSS3的3D变形

　　Webkit核心浏览器（safari和Chrome）和Firefox10+都已支持CSS3的3D变形，但最新的IE10+都还不支持该特性。尽管缺少“桌面版”浏览器的广泛支持，但多亏了移动平台浏览器基本都是Webkit血统，所以3D变形在Android（V3以后的版本）和IOS（所有版本）均被支持。

　　当3D变形被广泛支持，我们就可以用它来做图片轮播效果，而不用再依赖jQuery等JavaScript方案了。

　　下面是一个3D变形的代码

　　CSS代码如下：

　　　　.Qcontainer{
   　　　　height: 100%;
   　　　　width: 28%;
   　　　　position: relative;
   　　　　-webkit-perspective:800;    　　//设置透视，透视的值越大，就表示你的视点与3D场景之间的景深越大。
   　　　　float: left;
   　　　　margin-right: 2%;
　　　　}
　　　　.film{
   　　　　 width: 100%;
   　　　　 height: 15em;
   　　　　 -webkit-transform-style:preserve-3d;　　//.Qcontainer类中添加的透视声明只会应用到其第一个子元素上（即本例中的class为.film的div）。因此，为了延续父元素的透视，我们给.film元素设定了preserve-3d（这样可以设置一个3D场景）。
　　　　 -webkit-transition:1s;
　　　　}
　　　　.Qcontainer:hover .film{
   　　　　-webkit-transform:rotateY(180deg);　　//当鼠标悬停在.Qcontainer模块时，给.film这个div添加一个翻转的效果
　　　　}
　　　　.face{
   　　　　position: absolute;　　　　　　　　　　//.face必须使用绝对定位，这样海报才能盖在.back这个div上
   　　　　-webkit-backface-visibility:hidden;　　//当海报翻转之后隐藏在其背面的内容
　　　　}
　　　　.back{
   　　　　width: 66%;
   　　　　height: 127%;
   　　　　-webkit-transform:rotateY(180deg);   //不加这句的话，.back这个div就会显示在正面海报之上。
   　　　　background: #3b3b3b;
   　　　　background: -webkit-linear-gradient(top,rgba(0,0,0,0.65) 0%,
                                       rgba(0,0,0,0) 100%);
   　　　　 padding:15%;
　　　　}

　　该3D效果只有Webkit核心浏览器支持

　　但我们可以用一点传统的CSS代码为非Webkit核心浏览器提供一个合理的降级方案；

　　　　.front{
　　　　 z-index: 5;
　　　　}
　　　　.Qcontainer:hover .front{
　　　　 z-index: 0;
　　　　}

　　想要了解W3C有关CSS 3D变形的最新进展，请见这里：http://dev.w3.org/csswg/css3-3d-transforms/

4.CSS3动画效果

　　CSS3动画由两部分组成：首先是关键帧声明，然后在动画属性中使用该关键帧声明。

　　（1）首先是关键帧声明规则：

　　　　@keyframes warning{
   　　　　0%{
       　　　　text-shadow:0px 0px 4px #000000;
   　　　　}
   　　　　50%{
       　　　　text-shadow:0 0 20px #000000;
   　　　　}
   　　　　100%{
       　　　　 text-shadow:0px 0px 4px #000000;
   　　　　 }
　　　　}

　　此处的代码没有添加前缀，如果在浏览器中没有效果，你可能需要添加一组完整的浏览器私有前缀（如@-webkit-keyframes）

　　（2）然后在动画属性中引用它：

　　　　.back h5{
   　　　　font-size: 4em;
   　　　　color: #f2050b;
   　　　　text-align: center;
   　　　　 animation:warning 1.5s infinite ease-in;
　　　　}

　　在animation属性之后，我们设定了要使用的关键帧（例子中的warning，即关键帧的名字），然后设定的动画的持续时间（1.5s）,之后设定了animation-iteration-count(我们在这里使用了infinite让动画连续循环播放)，最后设定了调速函数（ease-in）。

　　CSS3动画技巧范例：http://webdesignerwall.com/trends/47-amazing-css3-animation-demos

posted @ 2015-07-20 09:10 梦想的天空分外蓝阅读(426) 评论(0) 编辑收藏举报

刷新页面返回顶部

梦想的天空分外蓝

CSS3过渡、变形和动画

公告