简介:transition(过渡)字如其名,是用来设置元素由一种状态到另一种状态中间的过渡效果的,比如变化的速度,变化的持续时间等。它主要有4个属性,分别是transition-property(属性,如width,color等),transition-duration(变化持续时间),transition-timing-function(如何变化),transition-delay(延迟时间)。使用方法如下:
一.语法
transition:property duration timing-function delay;
二.参数
1.property:指对哪个属性进行过渡,有三种设置方法,none(不对任何属性进行过渡),all(对所有属性都进行过渡),indent(元素属性名,如width,color等)。
2.duration:规定过渡持续的时间,单位为秒或毫秒(s/ms)。
3.timing-function:过渡的效果:
(1)ease:逐渐变慢,默认值
(2)linear:匀速
(3)ease-in:加速
(4)ease-out:减速
(5)ease-in-out:加速然后减速
(6)cubic-bezier:该值允许你去自定义一个时间曲线 ,(x1, y1, x2, y2)四个值特定于曲线上点P1和点 P2。所有值需在[0, 1]区域内,否则无效。
4.delay:过渡效果何时开始。
三.小练习
<!DOCTYPE html>
<html>
<head>
<title>transition的应用</title>
<style>
html,body
{
margin: 0;
padding: 0;
font-size: 36px;
}
.demo-parent
{
width: 100%;
height: 700px;
background: black;
position: fixed;
display: flex;
flex-direction:row;
justify-content: center;
padding-top: 260px;
}
.demo
{
background: yellow;
transition: 3s linear 1s;
color: #fff;
height: 30%;
text-align: center;
opacity: 1;
padding: 10px;
}
.demo:hover
{
background: #ccc;
color: green;
opacity: 0.9;
border-radius: 5px;
}
h1
{
font-size: 2em;
}
p
{
font-size: 1em;
}
</style>
</head>
<body>
<div class="demo-parent">
<div class="demo">
<h1>我是最大的字</h1>
<p>注意看我的颜色和背景如何变化哦!</p>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
效果如图:
图片只是个变化的各个阶段的效果,当然过渡不会这么生硬,一切以运行效果为准。