CSS3 过渡、变形和动画

一、我们来给按钮增加一个悬停效果:
#content a:hover {
border: 1px solid #000000;
color: #000000;
text-shadow: 0px 1px white;
}
两种状态下的效果如下,先看默认状态:

再看悬停状态:

这里只是在鼠标悬停时简单地修改了一下文字、文字阴影以及边框的颜色。所以,你可
能想象出来,使用这段 CSS 代码,当鼠标悬停在按钮上面时,按钮会直接从第一种状态
(白色文字)突变到第二种状态(黑色文字)——就是一个开关效果。我们来给第一段
CSS规则添加一点 CSS3魔法:
#content a {
transition: all 1s ease 0s;
}

现在再把鼠标悬停在按钮上,文字、文字阴影和边框阴影的颜色都会从第一种状态平滑
过渡到第二种状态。

CSS3过渡效果涉及四个属性,也可以使用包含这四个属性的缩写。
? transition-property :要过渡的 CSS 属性名称(比如 background-color 、
text-shadow 或者 all ,使用 all 则过渡会被应用到每一个可能的 CSS属性上);
? transition-duration :定义过渡效果持续的时间(时间单位为秒,比如 .3s 、 2s
或 1.5s );
? transition-timing-function :定义过渡期间速度如何变化(比如 ease 、 linear 、
ease-in 、 ease-out 、 ease-in-out 或 cubic-bezier );
? transition-delay :可选,用于定义过渡开始前的延迟时间。相反,将该值设置为
一个负数,可以让过渡效果立即开始,但过渡旅程则会从半路开始。
单独使用各种过渡属性创建转换效果的语法如下:
#content a {
……其他样式……
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}

1. 过渡的简写语法
正如我们之前所见过的那样,我们可以将单个的声明组合成一个简写版:
transition: all 1s ease 0s;

简写声明添加了浏览器私有前缀
之后,代码如下:
-o-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s;
transition: all 1s ease 0s;

2. 在不同时间段内过渡不同属性
当一条规则要实现多个属性过渡时,这些属性不必步调一致。看看下面这段代码:
#content a {
/*……其他样式……*/
transition-property: border, color, text-shadow;
transition-duration: 2s, 3s, 8s;
}
此处我们通过 transition-property 来指定只过渡 border 、 color 和 text-shadow ,
然后在 transition-duration 声明中我们设定边框过渡效果应该 2秒内完成,文字颜
色 3秒,文字阴影 8秒。由逗号分隔的过渡持续时间按顺序对应上面的 CSS属性。

二、CSS3 的 2D 变形

有两种可用的 CSS3变形:2D变形和 3D变形。2D变形的实现更广泛,浏览器支持更好,
写起来也更简单些,所以我们先来看看 2D 变形。CSS3 的 2D 变形模块允许我们使用下
列变形。
? scale :用来缩放元素(放大或缩小)
? translate :在屏幕上移动元素(上下左右四个方向)
? rotate :按照一定角度旋转元素(单位为度)
? skew :沿 X和 Y轴对元素进行斜切
? matrix :允许你以像素精度来控制变形效果

傻瓜化的矩阵变形工具
无论怎么想象我都不是一个数学家,所以当我需要创建矩阵变形时,我一般都走捷径。
如果你的数学也不太好,我建议你访问这里

傻瓜化的矩阵变形工具
无论怎么想象我都不是一个数学家,所以当我需要创建矩阵变形时,我一般都走捷径。
如果你的数学也不太好,我建议你访问这里:http://www.useragentman.com/matrix/

尝试 CSS3 的 3D 变形

将鼠标悬停在图片上(在触摸屏上则是触击图片)就能揭晓答案。
下面的代码是相关的页面标签,其中省略了重复的图片标签,因为它们的结构都一样:
<section class="Qcontainer">
<div class="film">
<div class="face front">
<img src="img/goonies.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;
float: left;
margin-right: 2%;
}
.film {
width: 100%;
height: 15em;
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s;
}
.Qcontainer:hover .film {
-webkit-transform: rotateY(180deg);
}
.face {
position: absolute;
-webkit-backface-visibility: hidden;
}
.back {
width: 66%;
height: 127%;
-webkit-transform: rotateY(180deg);
background: #3b3b3b;
background: -webkit-linear-gradient(top,
rgba(0,0,0,0.65) 0%,
rgba(0,0,0,0) 100%);
padding: 15%;
}
代码部署好之后,将鼠标悬停在海报图片上,会看到图片翻转到背面并显示出了该电影
的评判结果。

CSS3 动画效果

首先是关键帧规则:
@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 )。

分析代码:

首先,我们定义了一个 @keyframes (关键帧)声明。然后为这个特定的关键帧声明设置
了一个名称: warning 。你可以将其叫成任何名字,但考虑到这些关键帧声明可以在多
个元素上复用,所以建议取一个合理的名字。
可以设置多个关键帧(比如百分比值 10%、20%、30%、40%等等),或者也可以使用 from
和 to 值来定义动画的开始帧和结束帧。

动画开始时是 4像素阴影,然后用 50%的时间变化至 40像
素阴影,之后再变化回 4像素阴影

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

原文地址:https://www.cnblogs.com/lishenghao/p/css3GuoDuBianXingDongHua.html

时间: 2024-10-10 16:07:41

CSS3 过渡、变形和动画的相关文章

css3中变形与动画(三)

transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. animation属性通过一些关键帧中元素属性的改变来实现动画效果.当然也可以控制动画持续时间,动画迭代次数等. 一.例子 在介绍transition时开篇有一个例子就是实现鼠标放上去,div宽度从100px缓慢增大到200px. 用transition实现方法如下 div:hover{ width: 200

css3中变形与动画(一)

css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). 首先介绍transform变形. transform英文意思:改变,变形. css3中transform注意包括以下几种:旋转(rotate),扭曲(skew),缩放(scale).移动(translate)和矩阵变形matrix. 语法: transform : none | <transform-function> [ <transform-function> ]

css3中的变形(transform)、过渡(transtion)、动画(animation)

Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一起来看看CSS3中transform的旋转rotate.扭曲skew.缩放scale和移动translate具体如何实现,老样子,我们就从transform的语法开始吧.是构成transtion和animation的基础. 语法: transform : none | <transform-func

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;     flo

CSS3中的变形与动画【转】

最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速,性能更好. (下面均没写浏览器前缀,如有需要请自行添加~~) CSS3常见的动画效果的实现,其实主要是靠 transition和 animation . 而通常,这两个又会和CSS3中的新属性transform 来搭配使用 那么这三个东西其实是干什么用的呢?我按我自己的理解来下个简单结论. tran

CSS3学习(CSS3过渡、CSS3动画)

CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加过渡效果.我们仅仅使用到了一个transition属性,专门来写过渡从一个样式到另一个样式过渡时所花费的时间,以秒为单位.若时长不规定,默认为0,即没有过渡时间.在使用这个过渡效果的时候,我们使用了类似于超链接的l(link).v(visited).h(hover).a(active)样式的控制.此

css3过渡和动画

一.CSS3过渡:(浏览器要加前缀,一般要配合hover使用,transition) 通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果.1.要实现过渡,必须规定两项内容: 规定您希望把效果添加到哪个 CSS 属性上 . 规定效果的时长(以秒为单位) .2.transition-property 属性 规定应用过渡效果的 CSS 属性的名称,有height.width等.3.transition-duration

jQuery+CSS3过渡动画模态窗口特效

在线预览   源码下载 jQuery+CSS3过渡动画模态窗口特效是一款基于Codrops的ModalWindowEffects来制作,通过jQuery插件的方式来统一管理各种打开模态窗口的效果.适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器. 加入前端爱好者QQ群(123235875) 点击加群,共同交流进度!

15款css3鼠标悬停图片动画过渡特效

分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="htmleaf-container"> <div class="container bs-docs-container"> <div class="row"> <div class="col-md-3

【CSS3】transition过渡和animation动画

转自:http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135 写在前面的话: 最近写css动画发现把tansition和animation弄混淆了,而且发现两个动画叠加后在一个元素上后,动画效果没有了,最后想的办法是在里面再包一层元素,把两个动画分开在不同的元素上,这样动画效果不受影响了.在网上找了一个tansition和animation的区别: 一.transition CSS3的过渡功能就像是一种黄油,可以让CSS的一些变化变得平