CSS3,用transition实现过渡动画
用到了transition就先说说这个属性吧!
一、transition属性简介
transition是网页上的过渡动画,变化的逐渐过渡效果,简称过渡动画!在CSS3出现之前,网页上的动画大多是用flash实现的,flash动画会产生很大的弊端!操作不便等等
1. 语法
transition: property duration timing-function delay;
2. 定义和用法
transition 属性是一个简写属性,用于设置四个过渡属性:
-
transition-property
- --规定设置过渡效果的 CSS 属性的名称。 transition-duration
- --规定完成过渡效果需要多少秒或毫秒。 transition-timing-function
- --规定速度效果的速度曲线。 transition-delay
- --定义过渡效果何时开始。
-
-
transition-property
transition-property 属性规定应用过渡效果的 CSS 属性的名称。(当指定的 CSS 属性改变时,过渡效果将开始)。
提示:过渡效果通常在用户将鼠标指针浮动到元素上时发生。
transition-property: none|all|property;
值 | 描述 |
---|---|
none | 没有属性会获得过渡效果。 |
all | 所有属性都将获得过渡效果 |
property | 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。 |
transition-duration
transition-duration 属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。
transition-duration: time;
注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。
值 | 描述 |
---|---|
time | 规定完成过渡效果需要花费的时间(以秒或毫秒计)。默认值是 0,意味着不会有效果。 |
transition-timing-function 属性
transition-timing-function 属性规定过渡效果的速度曲线。该属性允许过渡效果随着时间来改变其速度。
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);
值 | 描述 |
---|---|
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 之间的数值。推荐个有意思的链接,贝塞尔曲线链接 |
transition-delay
transition-delay 值以秒或毫秒计。
transition-delay: time;
注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。
值 | 描述 |
---|---|
time | 规定在过渡效果开始之前需要等待的时间,以秒或毫秒计。 |
二丶介绍下他们的使用情况吧
1.首先,先写个字体出来吧!那就我上一篇介绍的火焰字好了!上篇的代码对这篇的代码不会有干扰的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小效果</title>
<style type="text/css">
/*通配符重置浏览器默认的两个值,
对本文没有太大影响,不知道可以无视*/
*{
margin: 0;
padding: 0;
}
.div1{
width: 300px;
height: 100px;
padding-top: 20px;
line-height: 100px;
margin:200px auto 0;
text-align: center;
font-size: 40px;
font-weight: bold;
font-family: "华文行楷";
background: #000;
color:#F60;
}
</style>
</head>
<body>
<div class="div1">超炫火焰字</div>
</body>
</html>
效果如图:
2.其次,我们在.div{..略..}后面加上如下代码
.div1:hover{
text-shadow: 0px 0px 2px #fff,
0px -3px 3px #1EB,
0px -6px 4px #01DEFD,
0px -9px 5px #0BF,
0px -12px 6px #08F;
}
我们就会发现当我们鼠标移进这个div的时候,文字的阴影是不是一瞬间出现的?很明显是的
3.最后,我们在.div{..略..}里面加上如下代码
transition-property: all;/*变化的东西。all是所有*/
transition-duration: 1s;/*变化过程的时间*/
transition-timing-function: linear;/*linear是匀速变化*/
transition-delay: 0s;/*没有延迟变化*/
/*下面的是简写属性*/
/*
transition:all 1s linear 0s;
*/
我们是不是发现这个背景阴影是不是经过1s中的过渡过程才能达到最后的变化?这样是不是感觉灰常有意思?
变化过程:
变化结果:
好了,本次文章到此结束,谢谢观看