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变形的代码
<section class="Qcontainer">
<div class="film">
<div class="face front">
<img src="__PUBLIC__/Images/one.jpg" alt="The Goonies" />
</div>
<div class="face back"><h5>HOT!</h5></div>
</div>
</section>
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
CSS3过渡、变形和动画的更多相关文章
- css3中变形与动画(三)
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
- css3中变形与动画(二)
css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). transform介绍过了.接下来介绍过渡transition. 一.例子 先通过一 ...
- css3中变形与动画(一)
css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). 首先介绍transform变形. transform英文意思:改变,变形. css3 ...
- css3实现循环执行动画,且动画每次都有延迟
一.最终效果 需求:gift图片的小动画每隔2s执行一次. 需求就一句话,我们看一下实现过程. 二.实现过程 1.网页结构 <!DOCTYPE html> <html lang=&q ...
- css3中的变形(transform)、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
- CSS3中的变形与动画【转】
最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...
- CSS3学习(CSS3过渡、CSS3动画)
CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加 ...
- css3基础教程十六变形与动画animation
前面我们讲过的变形与动画一般都是通过鼠标的单击.获得焦点,被点击或对元素进行一定改变后以后触发效果的,那么有没有像Flash一样自动播放的动画效果呢?答案当然是肯定的,这就是我们今天要讲到的anima ...
- 从零开始学习前端开发 — 15、CSS3过渡、动画
一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...
随机推荐
- 《征服 C 指针》笔记6:练习——挑战那些复杂的声明
应该是小试牛刀的时候了. 在 ANSI C 的标准库中,有一个 atexit()函数.如果使用这个函数,当程序正常结束的时候,可以回调一个指定的函数. atexit()的原型定义如下: int ate ...
- 第2月第25天 BlocksKit
1.blockskit https://github.com/zwaldowski/BlocksKit bk_showAlertViewWithTitle 2.toast +(void)showToa ...
- Nginx 限速模块一览
为了保护服务器不被刷流量,或者业务方面的一些限制,需要做一些限速措施. 一.http 请求并发连接数模块:ngx_http_limit_conn_module 这个模块可以设置每个定义的变量(比如客户 ...
- linux各目录的作用
- 倾力总结40条常见的移动端Web页面问题解决方案
1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率 ...
- ABAP 数量单位转换
CALL FUNCTION 'UNIT_CONVERSION_SIMPLE' EXPORTING input = wa_ite ...
- Python:Pycharm下无法导入安装好的第三方模块?
Pycharm下无法导入安装好的第三方模块requests? 在cmd下使用pip安装好requests模块后,可以使用import requests,但在Pycharm IDE下无法导入,出现如下错 ...
- Effective C++ -----条款55:让自己熟悉Boost
Boost 是一个社群,也是一个网站.致力于免费.源码开放.同僚复审的C++ 程序库开发.Boost 在C++ 标准化过程中扮演深具影响力的角色. Boost 提供许多TR1 组件实现品,以及其他许多 ...
- mysql事务和锁InnoDB
背景 MySQL/InnoDB的加锁分析,一直是一个比较困难的话题.我在工作过程中,经常会有同事咨询这方面的问题.同时,微博上也经常会收到MySQL锁相关的私信,让我帮助解决一些死锁的问题.本文,准备 ...
- 原生java 压缩解压zip文件
import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.File; import ...