CSS3新增特性（盒子模型、滤镜filter、calc函数、过渡）

最新推荐文章于 2024-04-08 22:57:24 发布

ItDaChuang

最新推荐文章于 2024-04-08 22:57:24 发布

阅读量311

点赞数

分类专栏：前端 # CSS3 文章标签： css3 css html

本文链接：https://blog.csdn.net/ItDaChuang/article/details/120446182

版权

前端同时被 2 个专栏收录

43 篇文章 7 订阅

订阅专栏

CSS3

4 篇文章 0 订阅

订阅专栏

CSS3 的其他新特性

2.1 CSS3 盒子模型

CSS3之前写盒子的时候，如果盒子加上了边框，或者 padding （内容与盒子边框的距离）值，都会将盒子撑大。

<style>
    div {
        display: inline-block;		// 转为行内块元素，可以一行显示
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .two,.three {
        border: 5px solid red;		// 加边框
    }
    .three {
        padding: 5px;				// 加内边距
    }
</style>
</head>
<body>
    <div class="one">1</div>
    <div class="two">1</div>
    <div class="three">1</div>
</body>

CSS3 中可以通过 box-sizing 来指定盒子模型，有两个值：content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

box-sizing: content-box：盒子大小为 width + padding + border (以前默认的)
box-sizing: border-box：盒子大小为 width

修改上述代码中的 div 样式，加上 box-sizing: border-box 则不会撑大盒子。

2.2 CSS3 滤镜 filter（模糊图片）

CSS3的 filter 属性将模糊或颜色偏移等图形效果应用于元素。语法：

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

2.3 CSS3 calc 函数

calc() 函数可以让你在声明CSS属性值时执行一些计算。语法：

width: calc(100%-80px);	// 括号内可以使用 + - * / 来进行计算

制作一个子盒子永远比父盒子宽度小30px的模型。

<style>
    .fater {
        position: relative;
        height: 50px;
        width: 100%;
        border: 1px solid black;
    }
    .son {
        position: absolute;
        left: 15px;
        bottom: 5px;
        width: calc(100% - 30px);
        height: 3px;
        background-color: red;
    }
</style>
<body>
    <div class="fater">
        <div class="son">
        </div>
    </div>
</body>

红线永远比黑色框框短 30px。

2.4 CSS3 过渡（重点）

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

过渡动画：是从一个状态渐渐的过渡到另外一个状态。可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持(ie9以下版本) 但是不会影响页面布局。经常和：hover 一起搭配使用。

// 语法：
transition：transition-property transition-duration transition-timing-function transition-delay

transition-property： 过渡属性(默认值为all)，想要变化的 css 属性，宽度高度、背景颜色、内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以。
transition-duration： 过渡持续时间(默认值为0s)，单位是秒s(必须写单位)或毫秒ms 比如 0.5s。
transiton-timing-function： 过渡函数(默认值为ease函数)，也可以是 linner 匀速运动曲线对比
transition-delay： 过渡延迟时间(默认值为0s)

【注意】：谁做过渡给谁加 transition 属性

div{
        width: 200px;
        height: 40px;
        background-color: pink;
        /* 多个属性一起时，用逗号隔开即可 */
        transition: width 0.5s ease 0s,height 0.5s ease 0s;
    }
    div:hover {
        width: 400px;
        height: 80px;
    }
}

过渡练习：进度条

制作下图效果：鼠标经过时进度条遍满。

<style>
    .bar{
        width: 200px;
        height: 10px;
        border: 1px solid red;
        border-radius: 6px;
        padding: 1px;
    }
    .bar-in{
        width: 50%;
        height: 100%;
        background-color: red;
        /* border: 0px; */
        border-radius: 5px;
        transition:all 1s;
    }
    .bar:hover .bar-in {
        width: 100%;
    }
</style>
<body>
    <div class="bar" >
        <div class="bar-in">

        </div>
    </div>
</body>

过渡练习:logo 变换

制作下图效果：鼠标离开时显示小米logo，鼠标经过时显示首页logo。

<style>
    @font-face {
        font-family: "iconfont"; /* Project id 2830040 */
        src: url('iconfont.woff2?t=1632411105688') format('woff2'),
            url('iconfont.woff?t=1632411105688') format('woff'),
            url('iconfont.ttf?t=1632411105688') format('truetype');
    }
    .box {
        position: relative;
        width: 50px;
        height: 50px;
        background-color: #ED702E;
        margin: 10px auto;
    }
    .logo {
        position: absolute;
        width: 100px;
        top: 0;
        left: -50px;
        font-family: "iconfont";
        font-size: 30px;
        color: #fff;
        transition: all 0.3s;
    }
    .logo div{
        float: left;
        width: 50px;
        text-align: center;
        line-height: 50px;
    } 
    .box:hover .logo {
        left: 0px;
    }
</style>
<body>
    <div class="box" >
        <div class="logo">
            <div>&#xe8b9;</div><div>&#xe661;</div>
        </div>
    </div>
</body>

ItDaChuang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3新增特性（盒子模型、滤镜filter、calc函数、过渡）

总结整理CSS3中新增的相关属性：盒子模型(box-sizing)、图片模糊(filter:blur())、calc函数、过渡(transition)。
复制链接

扫一扫