好玩的CSS3（超全笔记奉上）

最新推荐文章于 2022-02-22 17:01:38 发布

♚ Painting

最新推荐文章于 2022-02-22 17:01:38 发布

阅读量1.2k

点赞数 5

分类专栏： HTML+CSS 文章标签： css3

本文链接：https://blog.csdn.net/qq_46071321/article/details/107342156

版权

这篇博客深入探讨了CSS3的多种特性，包括属性选择器、结构伪类选择器、伪元素选择器，重点介绍了2D和3D转换的细节，如translate、rotate、scale，以及3D旋转和transform-style。同时，还详细讲解了CSS3动画的使用，涵盖关键帧、动画属性和速度曲线，带你玩转CSS3视觉特效。

摘要由CSDN通过智能技术生成

CSS3属性选择器

在这里插入图片描述
对以上选择符做代码验证：

    <style>
        /* 小手样式 */
        /* 权重是 1 */
        button {
   
            cursor: pointer;
        }

        /* 属性选择器使用方法 */
        /* 箭头样式 */
        /* 选择的是：既是button 又是 disabled 这个属性的元素 */
        /* 属性选择器的权重是10  1+10=11*/

        /* 1.直接写属性 */
        /* 显示箭头样式 */
        button[disabled] {
   
            cursor: default;   
        }

        /* 2.属性等于值 */
        input[type="search"] {
   
            color: pink;
        }

        /* 3.以某个值开头的属性 */
        /* 选中以icon开头的 */
        div[class^="icon"] {
   
            color: red;
        }

        /* 4.以某个值结尾的 */
        /* 选中以icon结尾的 */
        div[class$="icon"] {
   
            color: green;
        }

        /* 5.可以在任意位置的 */
        /* 只要包含的都选中 这些字母也是要连续的*/
        div[class*="icon"] {
   
            color: purple;
        }
    </style>
    <body>
    <!-- disabled 是禁用我们的按钮 -->
    <button>按钮</button>
    <button>按钮</button>
    <button disabled="disabled">按钮</button>
    <button disabled="disabled">按钮</button>
    <input type="text" name="" id="" value="文本框">
    <input type="text" name="" id="" value="文本框">
    <input type="text" name="" id="" value="文本框">
    <input type="search" name="" id="" value="搜索框">
    <input type="search" name="" id="" value="搜索框">
    <input type="search" name="" id="" value="搜索框">
    <div class="icon1">图标1</div>
    <div class="icon2">图标2</div>
    <div class="icon3">图标3</div>
    <div class="iicon3">图标4</div>
    <div class="abcicon">图标5</div>
</body>

显示样式：
在这里插入图片描述

CSS3结构伪类选择器

在这里插入图片描述
示例一：

<style>
        /* 选择的是第一个 li */
        ul li:first-child {
   
            background-color: pink;
        }

        /* 选择的是最后一个li */
        ul li:last-child {
   
            background-color: deeppink;
        }

        /* nth-child(n) 我们要第几个 n就是几 */
        ul li:nth-child(8) {
   
            background-color: green;
        }
    </style>
    <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>
        <li>10</li>
    </ul>
</body>

显示样式：
在这里插入图片描述

nth-child(n)

n可以是数字、关键字和公式
n如果是数字，就是选择第几个
常见的关键词有 even 偶数 odd 奇数
常见公式如下（如果n是公式，则从0开始计算）
但是第0个元素或者超出了元素的个数会被忽略

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15…
n+5	从第5个开始（包含第五个）到最后
-n+5	前5个（包含第5个）

示例二：

<style>
        /* n 可以是关键词 even 是偶数 odd 是奇数  */
        ul li:nth-child(even) {
   
            background-color: pink;
        }

        ul li:nth-child(odd) {
   
            background-color: red;
        }

        /* n 可以是公式  */
        /* 2n 偶数 相当于 even */
        ul li:nth-child(2n) {
   
            background-color: green;
        }

        /* 选择 5 的倍数 */
        ul li:nth-child(5n) {
   
            background-color: purple;
        }

        /* 选择 后五个 */
        ul li:nth-child(n+5) {
   
            background-color: hotpink;
        }

        /* 选择 前五个 */
        ul li:nth-child(-n+5) {
   
            background-color: skyblue;
        }
    </style>
    <body>
    <!-- ul 里面我们只允许放li 所以对于这个例子来说 nth-child 和 nth-of-type 就一样了 -->
    <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>
        <li>10</li