CSS实现进度条---CSS3新特性之过渡

最新推荐文章于 2024-09-18 16:43:04 发布

H千面

最新推荐文章于 2024-09-18 16:43:04 发布

阅读量1.2k

点赞数

分类专栏： # HTML&CSS&Sass

本文链接：https://blog.csdn.net/h200102/article/details/111246606

版权

本文介绍了CSS3中的过渡特性，通过基础知识讲解和进度条案例，展示了如何在不依赖Flash或JavaScript的情况下，创建平滑的样式变换效果。过渡动画通常与`:hover`伪类结合，提供更动感的用户体验，虽然在低版本浏览器中可能不受支持。

摘要由CSDN通过智能技术生成

一、基础知识

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画：是从一个状态渐渐的过渡到另外一个状态，可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）但是不会影响页面布局。

我们现在经常和 :hover 一起搭配使用。

在这里插入图片描述
样例：鼠标放上去变化

 div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
            /* transition: width .5s ease 0s, height .5s ease 1s; */
            /* 如果想要写多个属性，利用逗号进行分割 */
            /* transition: width .5s, height .5s; */
            /* 如果想要多个属性都变化，属性写all就可以了 */
            /* transition: height .5s ease 1s; */
            /* 谁做过渡，给谁加 */
            transition: all 0.5s;
        }
        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }