Web前端学习笔记3（filter，transition，transtion应用，进度条，calc()）

最新推荐文章于 2024-04-23 19:06:37 发布

rootting

最新推荐文章于 2024-04-23 19:06:37 发布

阅读量189

点赞数

分类专栏： web前端文章标签：前端学习 css

本文链接：https://blog.csdn.net/m0_60531106/article/details/125563733

版权

web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

filter：

1、数值越大越模糊

        img{
            /* //数值越大，越模糊,要跟上单位px */
            filter: blur(5px);
        }
        img:hover{
            /* 鼠标经过不模糊 */
            filter: blur(0px);
        }

transition:

transition: 变化属性，花费时间（单位为s）运动曲线（默认为ease）何时开始

运动曲线和何时开始可以省略

谁做过渡给谁加

加逗号，两个进行变换

transition: width 1s, height 1s;

如果想要多个属性都变换，用all

        div{
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 变化属性，花费时间（单位为s） 运动曲线（默认为ease） 何时开始; */
            /* 运动曲线和何时开始可以省略 */
            /* 加逗号，两个进行变换 */
            /* transition: width 1s, height 1s; */
            /* 如果想要多个属性都变换，用all */
            /* 谁做过渡给谁加 */
            transition: all 1s;
        }
        div:hover {
            width: 400px;
            height: 300px;
            background-color: skyblue;
        }

transtion应用，进度条

        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }
        .bar_in{
            width: 50%;
            height: 100%;
            background-color: red;
            transition: width 1s;
        }
        .bar_in:hover{
            width: 100%;
        }

calc():

        .father{
            width: 300px;
            height: 200px;
            background-color: pink;
        }
        .child{
            /* 用calc函数可以计算 */
            width: calc(100%-30px);
            height: 30px;
            background-color: red;
        }