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

本文介绍了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;
        }

二、进度条案例

效果:
在这里插入图片描述

<!DOCTYPE html>
<html lang
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值