CSS过渡效果

来源：互联网发布：nginx http host 编辑：程序博客网时间：2024/05/22 08:20

我们经常会看到有些网页上很多动画效果，比如下面这个：

类似这样的效果是怎么实现的呢？

这里我们要用到 CSS 实现过渡效果的属性 transition。

transition 是干什么用的？

transition 用于将元素从一种样式的效果逐渐转变为另一种样式的效果。它是一个复合 CSS 属性。

transition 由哪些简单属性组成？

transition-property指定应用过渡效果的属性名transition-duration指定过渡效果花费时间，默认为 0transition-timing-function指定过渡效果的时间曲线，默认为 “ease”transition-delay指定过渡效果延时时间（多长时间后开始），默认为 0

transtion-property 属性

transtion-property 属性值：

none：没有属性应用过渡效果
all：所有的属性都应用过渡效果
类似 width、height 的简单属性：指定属性获得过渡效果

transition-timing-function 属性

transition-timing-function 属性值：

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-besizer(n,n,n,n)：自定义过渡效果，n 是介于 0 和 1 之间的值

如何使用 transition？

语法transition: property duration timing-function delay;

看了语法之后，transition 的使用就很简单了，像这样：

{
transition: width 2s linear 0.1s;
}

也可以同时设置好几个属性的过渡效果，比如：

{
transition: width 2s, height 2s, transform 2s;
}

代码示例

#rotated-boy {
    background-image: url(little-boy.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 30px;
    left: 30px;
    opacity: 1;
    transition: width 1s, height 2s, left 1s, top 2s, opacity 3s;
}

#rotated-boy:hover {
    width: 300px;
    height: 300px;
    top: 300px;
    left: 300px;
    opacity: 0.5;
}

效果如下：

阅读全文

0 0