CSS3 的其他特性（了解）

news2024/12/26 2:12:48

1.CSS3滤镜filter：

2.CSS3 calc函数

3.CSS3 过度（重点）

4.进度条案例

5.侠义的HTML5 CSS3

1.CSS3滤镜filter：

filter CSS属性及那个模糊或颜色偏移等图形效果应用于元素。

filter: 函数()；例如：filter: blur(5px); blur 模糊处理数值越大越模糊

2.CSS3 calc函数

calc() 此CSS函数让你在声明CSS属性值时执行一些计算。

width:calc(100% - 80px);

括号里面可以使用 + - * / 来计算。

3.CSS3 过度（重点）

过度(transition) 时Css3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一个样式换成另外一个样式时为元素添加效果。

过度动画：是从一个状态渐渐过度到另外一个状态。

可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）但时不会影响页面布局。

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

transition：要过度的属性花费时间运动曲线何时开始；

属性：想要变换的CSS属性，宽度高度，背景颜色，内外边距都可以，如果想要所有属性变化过度，写一个all 就可以
花费时间：单位是秒（必须写单位）比如 0.5s
运动曲线：默认是 ease （可以省略）
何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是 0s (可以省略）

过度的使用口诀：谁做过度给谁加

4.进度条案例

1.进度条如何布局

2.过度的使用

代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3过度练习-进度条</title>
    <style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7.5px;
        }
        
        .bar-1 {
            width: 50%;
            height: 100%;
            background-color: red;
            padding: 1px;
            transition: all .7s;
        }
        
        .bar:hover .bar-1 {
            width: 100%;
            ;
        }
    </style>
</head>

<body>
    <div class="bar">
        <div class="bar-1"></div>
    </div>
</body>

</html>