C3学习笔记

C3简介

css2的升级版,修复不足并新增许多特性

浏览器对css3支持性较好,但由于移动端不存在低版本浏览器情况,所以移动端支持性要优于PC端

伪类选择器

  • child 系列
  1. :first-child
  2. :last-child
  3. :nth-child(n)
  4. :nth-last-child(n)

都是针对父元素下的直接子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*前三个*/
        li:nth-child(-n + 3) {
            color: hotpink;
        }
        /*后三个*/
        li:nth-last-child(-n + 3) {
            color: skyblue;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
</body>
</html>
  • empty

:empty

  1. 选择为空的元素
  2. 必须是空的,不能有任何子元素,空格也不行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid greenyellow;
        }
        div:empty {
            background-color: #f99;
        }
    </style>
</head>
<body>
<div> </div><!--无法被选中-->
<div></div><!--将被选中-->
</body>
</html>
  • not

指排除掉指定的选中的元素

div:not(#id_001):选中除了id为id_001的div元素
div:not(:nth-child(1)):选中除了作为第一个div直接子元素的div元素

  • target

:target

搭配 a 标签的锚点功能,选中被点击的锚点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1:target {
            color: red;
        }
    </style>
</head>
<body>
<nav>
    <a href="#1">模块1</a>
    <a href="#2">模块2</a>
</nav>
<div>
    <h1 id="1">对应的a标签锚点被选中后,此处文字将变红</h1>
    <h2 id="2">省略...</h2>
</div>
</body>
</html>
  • focus、checked、disabled、enabled

:focus:可以找到获取到焦点的input元素
:checked:可以找到被选中的input[checkbox]元素
:disabled:可以找到disabled属性的元素
:enabled: 可以找到enabled属性的元素

伪元素选择器

  • 简介

使用css模拟出html标签的效果,默认是行内元素,属于原元素的子元素,有个要求是必须有content属性,即使为空也要手动表示content: "";

  • 常用伪元素选择器
  1. ::before
  2. ::after
  3. ::first-letter
  4. ::first-line
  5. ::selection:不能改变文字大小、字体等影响布局的属性

C3新增的颜色模式

  • rgba模式
  • hsla模式
  1. h

色调,0-360,决定颜色

  1. s

饱和度,0-100%,越大其色彩越鲜艳

  1. l

亮度,0-100%,亮度为0表示黑色

  1. a

alpha透明度,0-1

浏览器私有前缀

不同浏览器有自己的私有前缀,用于解决兼容性问题

  1. 谷歌:-webkit-
  2. 苹果:-webkit-
  3. 火狐:-moz-
  4. 欧朋:-o-
  5. IE:-ms-

如渐变色:linear-gradient,直接这么写,存在css3兼容性问题,对谷歌和IE浏览器都是没有效果的,需要加上私有前缀

<style>
    div {
        background: -webkit-linear-gradient(right, red, yellow); /*兼容谷歌和苹果浏览器*/
        background: -ms-linear-gradient(right, red, yellow); /*兼容IE浏览器*/
    }
</style>

阴影效果

  • 文字阴影效果:text-shadow
  1. 设置一个阴影效果

text-shadow: 5px 5px 5px red;

第一个取值:阴影的水平方向位移
第二个取值:阴影的垂直方向位移
第三个取值:阴影的模糊程度
第四个取值:阴影的颜色

  1. 设置多个阴影效果

text-shadow: 5px 5px 5px red, -5px -5px 10px red;

  1. 凹凸文字效果

实现方式是将文字的颜色调成和背景色一样,文字外形通过阴影展现出来,最终效果就是凹凸文字效果了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer {
            width: 100px;
            height: 100px;
            background: #ccc;
        }
        div > div {
            width: 50px;
            height: 50px;
            color: #ccc;
        }
        .inner1 {
            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
        }
        .inner2 {
            text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="inner1">凹文字效果</div>
    <div class="inner2">凸文字效果</div>
</div>
</body>
</html>
  • 盒子阴影效果:box-shadow

box-shadow: 1px 1px 1px 0px #f00 inset;

第一个参数:水平位移,必填
第二个参数:垂直位移,必填
第三个参数:模糊程度,必填
第四个参数:阴影大小,必填
第五个参数:阴影颜色,必填
第六个参数:非必填,inset表示内阴影,outset表示外阴影(默认)

  • 遮罩效果

将外阴影设置为无限大,并带有透明效果

C3中的盒子模型

  • 盒子被分成了三部分
  1. content box
  2. padding box
  3. border box
  • box-sizing属性
  1. content-box:默认,表示设置的宽高将应用至content
  2. border-box:表示设置的宽高将应用至border box

C3中的百分比

在此之前百分比的效果都是相对于父元素,而C3中则都是相对于自身

C3的背景

  • 背景尺寸

background-size: 取值;

  • 取值一:宽px 高px
  • 取值二:宽百分比 高百分比

相对的是所属盒子的宽高,且如果只设置一个值时,表示高度自适应

  • 取值三:cover

图片将会不变形地等比例最大化地铺在盒子中,如果有超出,超出部分将被剪裁

  • 取值四:contains

图片会等比例地、不变形地、在保证整个图片都显示的情况下最大化地显示在盒子中,最终就是可能无法完全铺满整个盒子

  • 背景原点

background-origin: 取值;

默认情况下,背景的摆放是从padding box的左上角开始的,背景原点就是可以设置背景的摆放进行自主选择

  1. content-box:将从content-box的左上角开始摆放
  2. padding-box:默认,从padding-box的左上角开始摆放
  3. border-box:从border-box的左上角开始摆放
  • 背景剪裁

background-clip: 取值;

指的是背景图片将从哪个盒子开始做剪裁

  1. content-box

表示content-box以外的padding-box和border-box部分将不会显示,被剪裁

  1. padding-box

表示padding-box以外的border-box部分将不会显示,被剪裁

  1. border-box

默认

  1. text

常用于显示的文字以一张图片作为文字背景的场景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: url("./static/img/test.png");  <!--对盒子设置一个背景图片-->
            -webkit-background-clip: text;  <!--存在兼容性问题-->
            color: transparent;  <!--将文字颜色设置为透明-->
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>
  • 多背景
background: url('1.jpg') no-repeat, url('2.jpg') no-repeat right top, url('3.jpg') no-repeat center center;

指的是一个盒子可以设置多个背景,以逗号相隔,默认是写在前面的层级更高,要注意的是背景颜色只能放到最后一个背景中去

C3的颜色渐变效果

  • 线性渐变

background-image: -webkit-lindar-gradient(取值);

  • 取值一:使用方向
background-image: -webkit-lindar-gradient(方位属性, 起始颜色, 终止颜色);
<!--top:从上到下,即起始颜色为上,终止颜色为下-->
<!--bottom:从下到上,即起始颜色为下,终止颜色为上-->
<!--left:从左到右,即起始颜色为左,终止颜色为右-->
<!--right:从右到左,即起始颜色为右,终止颜色为左-->
  • 取值二:使用角度
background-image: -webkit-lindar-gradient(45deg(45度), 起始颜色, 终止颜色);
  • 取值三:使用多种颜色
background-image: -webkit-lindar-gradient(角度/方位, 起始颜色, 中间颜色1, 中间颜色2, ..., 终止颜色);
  • 取值四:使用多种颜色并设置颜色作用范围
background-image: -webkit-lindar-gradient(角度/方位, 起始颜色 0%, 中间颜色1 20 %, 中间颜色2 50 %, ..., 终止颜色 100%);
  • 径向渐变

background-image: -webkit-radial-gradient(取值);

指从一个中心点沿径向向外产生的颜色渐变效果

  • 渐变半径
background-image: -webkit-radial-gradient(水平方向渐变半径(如20px), 水平垂直渐变半径(如30px), 起始颜色, 终止颜色);
<!--如果不设置半径,默认整个径向距离都进行渐变-->
<!--如果只设置一个半径,表示水平方向和垂直方向的渐变距离共用此值-->
  • 渐变原点
background-image: -webkit-radial-gradient(20px at left top, 起始颜色, 终止颜色);
  • 多种颜色 & 控制渐变范围
background-image: -webkit-radial-gradient(20px at left top, 起始颜色 0%, 中间颜色1 10 %, 中间颜色2 60 %, ..., 终止颜色 100%);

C3的过渡

过渡属性时CSS3中具有颠覆性的特征之一,通过它可以实现元素不同状态间的平滑过渡,即补间动画,所以常用于制作动画效果


transition: 过度属性, 过渡时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            transition: width 1s, height 1s, border-radius 2s, background-color 1s;
            /*当所有过度属性的过度时间一致时,可以使用all,不过耗性能、不推荐*/
            /*transition: all 1s; */
        }
        div:hover {
            width: 200px;
            height: 200px;
            background-color: deepskyblue;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>
  • 补间动画和帧动画
  • 帧动画

指通过将一帧一帧的画面按照固定顺序和速度进行播放,类似电影胶片

  • 补间动画

指只设置起始状态和终止状态,由浏览器来自动完成中间的过度

  • 单属性解释
  1. transition-property:过度属性
  2. transition-duration:过度时长
  3. transition-timing-function:过度函数(运动方式)
  1. linear:匀速(默认)
  2. ease-in:加速
  3. ease-out:减速
  4. ease-in-out:先加速后减速
  5. ease-out-in:先减速后加速
  1. transition-delay:过度延迟

  • 和写示例

transition: property duration delay timing-function;

transition: width 1s 2s ease-in-out;
  • 一个常见的需求

要求当鼠标放入时有动画,移出时没有动画(上面例子就是一个),此时需要将过渡属性添加到盒子里而非盒子的hover


如果将transition放在hover上,鼠标移出时将没有动画效果,这是因为,当鼠标移出时,transition属性浏览器感知不到,相当于浏览器不知道这个属性,所以没有动画效果,而如果是直接放在元素上,浏览器可以一直感知到transition属性。

C3的变换

需要注意的是,对于C3的变换效果,它不会影响盒子的布局,无论该盒子是否脱标,因为它单独设置了一层专门用于效果展示的特殊层,而在效果结束时则又会自动销毁掉该层。

  • 2D变换
  1. 缩放效果

transform: scale(水平缩放比例, 垂直缩放比例)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            float: left;
            width: 200px;
            height: 200px;
            background-color: limegreen;
            margin: 20px 10px;
        }
        div:nth-child(2) {
            background-color: pink;
            /*对于动画效果的实现,尽可能使用变换属性transform,而非直接使用transition*/
            transition: transform 1s;
        }
        div:nth-child(2):hover {
            transform: scale(1.5, 0.5);
        }
    </style>
</head>
<body>
<div>1:2变化了,但是并不影响布局</div>
<div>2:1,3始终还是原样</div>
<div>3:2变化了,但是并不影响布局</div>
</body>
</html>
  1. 平移效果

transform: translate(水平平移距离, 垂直平移距离)

  1. 数值表示

transform: translate(100px, 100px)

  1. 百分比表示(相对自身)

transform: translate(10%, 200%)

  1. 只有一个值则表示水平方向效果
  1. 旋转效果

transform: rotate(deg):正角顺时针,负角逆时针

  1. 斜切效果

transform: skewX(deg):水平方向(和 -y 轴夹角)
transform: skewY(deg):垂直方向(和 +x 轴夹角)

  1. 变换中心点

transform-origin: 取值

  • 取值一:方位属性

top、right、bottom、left、center

  • 取值二:位置坐标值
  1. 关于变换顺序

后面的变换是在前面的变换基础上的,另外旋转会改变坐标系的方向,所以一般放在最后

  • 3D变换
  1. 旋转效果

transform: rotateX(deg);:X轴
transform: rotateY(deg);:Y轴
transform: rotateZ(deg);:Z轴

  1. 移动效果

transform: translateX(deg);:X轴
transform: translateY(deg);:Y轴
transform: translateZ(deg);:Z轴

  1. 透视效果

指呈现立体效果,一种靠得越近,看着越大的效果,需要在变换元素的父元素中设置perspective属性,值是个数字,越小,效果将越明显,该距离实质设置的是用户眼睛和屏幕的距离,故眼睛距离屏幕越近效果越明显,而对于Z轴的旋转效果、以及X轴和Y轴的平移效果,透视效果是不起作用的,总之这依旧是个平面效果,不是真正的3D效果


perspective: 数值px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer {
            /*这里设置眼睛距屏幕的距离刚好是比旋转半径少出10px,体验打脸的感觉*/
            perspective: 190px;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: transform 5s;
        }
        .inner:hover {
            transform-origin: top;
            transform: rotateY(360deg);
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="inner"></div>
</div>
</body>
</html>
  1. 3D效果

真正的3D效果,即子盒子和父盒子不再是同一个平面,需要给父元素添加transform-style属性


transform-style: preserve-3d;

  • 关于立方体

将6个div放一起,通过分别进行不同方向的平移旋转实现,要注意的是对于Z周不能使用%百分比,因为它没有厚度

  • 盒子背面可见性

backface-visibility: none; //表示不可见

C3的动画

  • 动画和过渡的区别

二者效果差不多,只是过渡需要触发,且限定于两个状态的改变,而动画无需触发,并可以一直执行下去

  • 动画的定义
/*方式一:使用 from 和 to 表示动画起止*/
@keyframes 动画名称 (
    from{}
    to{}
)

/*方式二:使用百分比表示动画各阶段*/
/*其中百分比和该阶段的动画时长等比例*/
@keyframes 动画名称 (
    0%{}
    50%{}
    100%{}
)
@keyframes experience {
    from{
        transform: translate(0, 0) rotate(0deg);
    }
    to {
        transform: translate(500px, 0) rotate(720deg);
    }
}
  • 动画的调用
  • 复合写法
animation: 动画名称 执行时长 其他参数(顺序随意且非必填)
  • 单个参数
  1. animation-name:动画名称
  2. animation-druation:动画时长
  3. animation-iteration-count: infinite

默认是动画结束后闪现到开始位置,即只执行一次,infinite表示无限次执行

  1. animation-direction: alternate

alternate表示一次执行结束时不闪现到开始位置,而是反向执行动画

  1. animation-delay

设置打开页面后的动画延迟执行时间

  1. animation-fill-mode:动画结束时的处理方式
  1. backwards

是默认取值,表示闪现回开始位置

  1. forwards

表示结束后保持当前状态,即保持不动

  1. animation-timing-function:动画运动方式
  1. linear:匀速
  2. ease-in:加速
  3. ease-out:减速
  4. ease-in-out:先加速后减速
  5. ease-out-in:先减速后加速
  6. steps(5):让动画分五步完成

实现了帧动画的效果,步数越多表示帧值越大

  • 动画完整示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            animation: test 5s infinite alternate 2s linear;
            background-color: greenyellow;
        }
        @keyframes test {
            0% {
                transform: translateX(0) rotateX(0deg);
                background-color: #ff9999;
            }
            100% {
                transform: translateX(100px) rotateX(360deg);
                background-color: skyblue;
                border-radius: 50%;
            }
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>
  • 动画的状态

animation-play-state

  1. running:在运行
  2. paused:已暂停

伸缩布局

  • 几种状态的元素的布局特点
  • 标准流

布局涉及行内、行内块、块级等元素类型,总是从上到下、从左往右进行的

  • 浮动

布局涉及左浮动和右浮动

  • 定位

布局涉及优先级、各种定位对应的基准点,以及边偏移等

  • 伸缩

布局涉及主轴和侧轴

  • display: flex;
  • 作用

定义了该属性之后就会生成主轴和侧轴,二者始终为垂直关系,其中主轴方向决定了其内部的子元素的排列方向

  • 主轴方向

flex-direction: row:默认,即水平向右
flex-direction: row-reverse:水平向左
flex-direction: column:垂直向下
flex-direction: column-reverse:垂直向上

  • 对齐方式
  1. 主轴对齐方向:justify-content
  1. flex-start:默认,起点对齐
  2. flex-end:终点对齐
  3. center:居中
  4. space-around:平分

先将空间平分,然后每个盒子在等分空间里居中

  1. space-between:两端对齐

两端先各放一个盒子,其他子盒子再在中间部分进行平分

  1. 侧轴对齐方向:align-items
  1. flex-start
  2. flex-end:终点对齐
  3. center:居中
  4. stretch:默认,拉伸
  • 换行

flex-wrap: nowrap;

默认效果,不换行

flex-wrap: wrap;

换行,当子盒子总宽度超出父盒子时,不再进行默认的等比例缩小,而是自动进行换行

  • 伸缩比例
  • 示例一
ul > li:nth-child(1) {
   flex: 1; /*该li占1/6*/
}
ul > li:nth-child(2) {
   flex: 3; /*该li占1/2*/
}
ul > li:nth-child(3) {
   flex: 2; /*该li占1/3*/
}
  • 示例二
ul > li:nth-child(1) {
   flex: 1; /*该li占扣除第二个li之后的空间的1/3*/
}
ul > li:nth-child(2) {
   width: 50px; /*该li设置了固定的宽高*/
   height: 50px;
}
ul > li:nth-child(3) {
   flex: 2; /*该li占扣除第二个li之后的空间的2/3*/
}
  • 注意事项
  1. 当父盒子宽度为0,子盒子宽度也将为0
  2. 当父盒子高度为0,高度可以被子盒子高度撑开
  3. 当子盒子没有宽度,即宽度为0时,不会被拉伸
  4. 所所有子盒子的总宽度超出了父盒子宽度,会将各子盒子等比例缩小
  5. 当子盒子没有高度时,高度默认会被拉伸至和父盒子一样高
  6. 当子盒子和父盒子都有高度时,二者互不干扰
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值