CSS学习笔记12——CSS3新增特性

CSS3新增特性

属性选择器

选择符 简介
E[att] 选择具有att属性的E元素
E[att="val"] 选择具有att属性且属性值等于val的E元素
E[att^="val"] 匹配具有att属性且值以val开头的E元素
E[att$="val"] 匹配具有att属性且值以Val结尾的E元素
E[att*="val"] 匹配具有att属性且值中含有val的E元素

类选择器、属性选择器、伪类选择器,权重为10

结构伪类选择器

根据文档结构来选择

选择符 简介
E:first-child 匹配父元素的第一个子元素E
E:last-child 匹配父元素中最后一个E元素
E:nth-child(n) 匹配父元素中的第n个子元素E
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个
nth-child(n)选择某父元素的一个/多个特定子元素
  • n可以是数字、关键字或公式
  • n是数字:选择第n个子元素
  • n是关键字:even偶数,odd奇数
  • n是公式:从0开始计算,但第0 个元素或超出了元素的个数会被忽略
公式 取值
2n 偶数
2n+1 奇数
5n 5 10 15...
n+5 从第五个开始(包含第五个)到最后
-n+5 前五个(包含第五个)...
  • nth-child会把所有盒子都排列序号
  • 执行的时候会先看:nth-child(1) 之后回去看前面的元素

伪元素选择器

可以帮助我们利用CSS创建新标签元素,而不需要HTML标签

选择符 简介
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
  • before和after创建一个元素,但是属于行内元素
  • 新创建的元素在文档树中是找不到的,所以我们称为伪元素
  • before和after必须有content属性
css 复制代码
div::before {
    content:'我';
}
  • 伪元素选择器和标签选择器一样,权重为1

伪元素清除浮动

css 复制代码
.clearfix:after {
    content:"";           /*伪元素必须写的属性*/
    display:block;        /*插入的元素必须是块级元素*/
    height:0;             /*不看见这个元素*/
    clear:both;           /*清除浮动核心代码*/
    visibility:hidden;    /*不看见这个元素*/
}
css 复制代码
.clearfix:before,.clearfix:after {
    content:"";
    display:table;          /* 转换为块级元素并且在一行显示 */
}
.clearfix:after {
    clear:both;
}

CSS3盒子模型

可以通过box-sizing指定盒模型

  1. box-sizing:content-box (以前默认的)
  • 盒子大小为width+padding+border
  1. box-sizing:border-box
  • 盒子大小为width (padding和border不会撑大盒子)

CSS3其他特性

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

css 复制代码
filter:函数();
例如:
filter:blur(5px);  /*blur模糊处理 数值越大越模糊 */

calc 函数

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

css 复制代码
width:calc(100%-80px);

括号里可以使用±*/来进行计算

CSS3过渡

当元素从一种样式变换为另一种样式是为元素添加效果

经常和:hover一起搭配使用

css 复制代码
transition:要过渡的属性 花费时间 运动曲线 何时开始; /*若写多个属性,用逗号分割*/
  1. 属性:想变化的CSS属性,宽/高/背景颜色/内外边距都可以。

若想所有属性都变化过渡,写一个all就可以

  1. 花费时间:单位是秒(必须写单位) 如0.5s
  2. 运动曲线:默认是ease(可以省略)
  3. 何时开始:单位是秒(必须写单位) 可以设置延时触发时间 默认是0s(可以省略)

过渡的使用:谁做过渡给谁加

2D转换

transform可以实现元素的位移、旋转、缩放等效果

  • 移动:translate(不会影响其他元素的位置)
  • 旋转:retate
  • 缩放:scale

  1. translate移动
css 复制代码
transform:translate(x,y); /* 或分开写*/  /* 百分比单位是相对于自身元素的*/
transform:translateX(n);
transform:translateY(n);
让盒子实现水平和垂直居中
css 复制代码
p {
    position:absolute;
    top:50%;
    left:50%;
    width:200px;
    height:200px;
    /*margin-top: -100px;
    margin-left: -100px; */
    transform:translate(-50%,-50%);
}
移动盒子位置:
  1. 定位
  2. 盒子的外边距
  3. 2d转换

  1. rotate旋转
css 复制代码
transform:rotate(度数)
  • 度数单位是deg 如rotate(45deg)
  • 度数为正则顺时针,负为逆时针
  • 默认旋转中心点为元素的中心点
设置转换中心点transform-origin
css 复制代码
transform-origin: x y;
  • 默认中心点为元素中心点(50% 50%)
  • 还可以给xy 设置像素/方位名词(top bottom left right center)

3.scale缩放

css 复制代码
transform:scale(x,y);
  • transform:scale(2)

只写一个参数,则第二个参数和第一个参数一样,相当于 scale(2,2),宽高都放大两倍

  • transform:slate(0.5) 缩小
  • 可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子
2D转换综合写法
  1. 同时使用多个转换格式
css 复制代码
transform:translate() rotate() scale();
  1. 其顺序会影响转换效果(先旋转会改变坐标轴方向)
  2. 当同时有位移和其他属性时,要将位移放到最前

CSS3动画(animation)

可设置多个节点来精确控制一个/一组动画

  1. 定义动画
  2. 调用动画
1.keyframes(关键帧)定义动画(类似定义类选择器)
css 复制代码
@keyframes 动画名称 {
    0%{
        width:100px;
    }
    100%{
        width:200px;
    }
}
  • 动画是元素从一种样式逐渐变为另一种样式的效果。可以改变任意多样式和任意多次数

  • 用百分比规定变化发生的时间

    或用关键词"from"和"to",等同0%和100%

2.元素使用动画
css 复制代码
div {
    /*调用动画*/
    animation-name:动画名称;
    /*持续时间*/
    animation-duration:持续时间;
}
动画常用属性
属性 描述
@keyframes 规定动画
animation 所有动画属性的简写属性,除了animation-play-state属性
animation-name 规定@keyframes动画的名称(必须)
animation-duration 规定动画完成一个周期花费的秒/毫秒 默认0(必须)
animation-timing-function 规定动画速度曲线。默认ease
animation-delay 规定动画何时开始,默认0
animation-iteration-count 规定动画播放次数,默认1,还有无限循环 infinite
animation-direction 规定动画是否在下一周期逆向播放,默认normal。 altermate逆向播放
animation-play-state 规定动画是否正在运行或暂停,默认running 还有paused
animation-fill-mode 规定动画结束后状态,保持forwards 回到起始backwards
动画简写属性
css 复制代码
/*animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画起始或结束的状态*/
animation: myfirst 5s linear 2s infinite alternate;
速度曲线细节
描述
linear 匀速
ease 默认。动画以低速开始,然后加快,在结束前变慢
ease-in 以低速开始
ease-out 以低速结束
ease-in-out 以低速开始和结束
steps() 指定了时间函数中的间隔数量(步长)
相关推荐
牧杉-惊蛰7 分钟前
修改输入框选择框颜色
前端·html
Catfood_Eason30 分钟前
XML简介
xml·java·前端
L107320348234 分钟前
深度学习笔记40_中文文本分类-Pytorch实现
笔记·深度学习·分类
黄同学real2 小时前
ES6 知识点整理
前端·javascript·es6
JQLvopkk2 小时前
c#读取txt指定行
java·前端·c#
姜太小白2 小时前
【前端】CSS实现div双背景图叠加
前端·css
安冬的码畜日常3 小时前
【玩转 JS 函数式编程_016】DIY 实战:巧用延续传递风格(CPS)重构倒计时特效逻辑
开发语言·前端·javascript·重构·函数式编程·cps风格·延续传递风格
观无3 小时前
Nginx部署Vue+ElementPlus应用案例(基于腾讯云)
前端·javascript·vue.js
李匠20243 小时前
C++负载均衡远程调用学习之TCP连接封装与TCPCLIENT封装
c++·网络协议·学习·tcp/ip
不太可爱的叶某人4 小时前
【学习笔记】深入理解Java虚拟机学习笔记——第2章 Java内存区域与内存溢出异常
java·jvm·笔记·学习