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 ...
随机推荐
- tornado django flask 跨域解决办法(cors)
XMLHttpRequest cannot load http://www.baidu.com. No 'Access-Control-Allow-Origin' header is present ...
- tornado 第二种路由方法(装饰器)
#!/usr/bin/env python # _*_coding:utf-8 _*_ import tornado.ioloop import tornado.web application = t ...
- python3 黑板客爬虫闯关游戏(一)
这是学习python爬虫练习很好的网站,强烈推荐! 地址http://www.heibanke.com/lesson/crawler_ex00/ 第一关猜数字 很简单,直接给出代码 import ur ...
- PHP写的异步高并发服务器,基于libevent
PHP写的异步高并发服务器,基于libevent 博客分类: PHP PHPFPSocketLinuxQQ 本文章于2013年11月修改. swoole已使用C重写作为PHP扩展来运行.项目地址:h ...
- Spring PropertyPlaceholderConfigurer数据库配置
pom.xml中添加依赖 <!-- mysql-connector-java --> <dependency> <groupId>mysql</groupId ...
- .NET LINQ 数据分组
数据分组 分组指将数据放入组中以便每个组中的元素共享公共特性的操作. 方法 方法名 说明 C# 查询表达式语法 Visual Basic 查询表达式语法 更多信息 GroupBy 对共享 ...
- RSA加密(C语言)
/** * \file rsa.h * * \brief The RSA public-key cryptosystem * * Copyright (C) 2006-2010, Brainspark ...
- js 定时器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 51nod1073(约瑟夫环)
题目链接: http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1073 题意: 中文题诶~ 思路: 直接模拟的话O(n*k)的 ...
- Nginx 反代理其他搜索引擎
反向代理 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客 ...