css3新特性的应用示例分析


Posted in HTML / CSS onMarch 16, 2022

css3 盒子模型

css3 中可以通过 box-sizing 来指定盒模型,有2个值:即可指定为 content-box 、border-box ,这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况:

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

box- sizing : border - box 盒子大小为 width

我们学盒子模型时知道padding 和 border 会撑大盒子,如果盒子模型我们改为了 box - sizing :border - box ,那 padding 和 border 就不会撑大盒子了(前提 padding 和 border 不会超过 width 宽度)

示例

<!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>Document</title>
    <style>
        div{
            box-sizing: border-box;
            border: 2px solid red;
            padding: 3px;
            width: 200px;
            height: 200px;
        }
  
    </style>
</head>
<body>
    <div></div>
</body>
</html>

css3新特性的应用示例分析

由图可以看到,当我去掉box- sizing : border - box ; 后,盒子宽高会变成210px,加上了padding 和 border。

css3 滤镜filter(可做图片模糊处理)

filter css属性将模糊或颜色偏移等图形效果应用于元素。

filter:函数 () ;例如: filter : blur (5px); blur 模糊处理,数值越大越模糊
(目前记住blur()这个函数就行)

示例

<!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>Document</title>
    <style>
        div{
            width: 200px;
        }
        div img{
            width: 100%;
            vertical-align: bottom;
            filter: blur(5px); /*必须要加单位px*/
        }
    </style>
</head>
<body>
    <div>
        <img src="123.jpg" alt="">
    </div>
</body>
</html>

css3新特性的应用示例分析

可以看到图片变模糊了。

css3 calc函数

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

width :calc(100%-80px);

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

示例

有两个盒子,不管父盒子宽度怎么变化,让子盒子宽度永远比父盒子小30px。

<!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>Document</title>
    <style>
        .father{
            width: 200px;
            height: 100px;
            background-color: pink;
        }
        .son{
            width: calc(100% - 30px);
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
</body>
</html>

css3新特性的应用示例分析

由上图可以看到,子盒子宽度会随父盒子宽度一同变化。

css3 过渡(transition) (重要)

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

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

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

transition :要过渡的属性 花费时间 运动曲线 何时开始;

1.属性:想要变化的 css 属性,宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡,写一个 all 就可以。

2.花费时间:单位是秒(必须写单位)比如0.5s

3.运动曲线:默认是 ease (可以省略)

4.何时开始:单位是秒(必须写单位)可以设置延迟触发时间,默认是 0s (可以省略)

运动曲线

css3新特性的应用示例分析

过渡使用口诀:谁做过渡给谁加

示例

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color: skyblue;
            /* transition :要过渡的属性  花费时间  运动曲线  何时开始; */
            /* 1. 给宽度加过渡 */
            /* transition: width 0.5s ease 0s; */
            /* 2. 给宽度和高度加过渡,多个属性中间用逗号分割 */
            /* transition: width 0.5s , height 0.5s; */
            /* 3. 对:hover里的全部属性加过渡,用all就行 */
            transition: all 0.5s;
        }
        div:hover{
            width: 400px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

css3新特性的应用示例分析

案例-进度条

<!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>Document</title>
    <style>
        .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 .5s;
        }
        .bar:hover .bar_in{
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>
</html>

css3新特性的应用示例分析

结语

以上就是css3新特性的应用示例分析的详细内容,更多关于css3新特性应用的资料请关注三水点靠木其它相关文章!

 
HTML / CSS 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
CSS3弹性盒模型开发笔记(一)
Apr 26 HTML / CSS
CSS3实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
HTML中的表单元素介绍
HTML中的表格元素介绍
HTML基本元素标签介绍
使用CSS连接数据库的方式
css常用字体属性与背景属性介绍
分享CSS盒子模型隐藏的几种方式
Feb 28 #HTML / CSS
You might like
php 图片上添加透明度渐变的效果
2009/06/29 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
python实现linux下使用xcopy的方法
2015/06/28 Python
Python实现字典依据value排序
2016/02/24 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
基于Python的Post请求数据爬取的方法详解
2019/06/14 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
如何清空Session
2015/02/23 面试题
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
学习十八大报告感言
2014/02/28 职场文书
运动会班级口号
2014/06/09 职场文书
学校工作推荐信范文
2014/07/11 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
被告代理词范文
2015/05/25 职场文书
JavaCV实现照片马赛克效果
2022/01/22 Java/Android
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL