2023.11.30笔记

 <!-- 字体图标 -->

    <!-- 使用iconfont之前需要引用 -->

    <link rel="stylesheet" href="">

    <style>

        .icon-sousuo{

            display:inline-block;

            font-size:46px;

            color:orange;

        }

    </style>

    <!-- css样式的继承 -->

    <!-- 例如：当ul内嵌套li时，令ul的颜色为red，则li的颜色也会变成red -->

    <!-- 不是所有属性都会被继承 -->

    <!-- 会被继承的属性：字体属性，文本属性，字体颜色...... -->

    <!-- 不会被继承的属性：宽高，内外边距 ......-->

    <!-- 过渡 -->

    <!--  -->

    <style>

        div{

            transition-property: width height;/*  */

            transition-duration: 3s;/*  */

            transition-delay: 2s; /*  */

            transition-timing-function:steps(40) ;/*帧数  */

            transition: all 3s;/*  */

        }

    </style>

    <!-- css3动画 -->

    <style>

        div{

            width:20px;

            height:20px;

            animation-name: myMove;/*  */

            animation-duration: 3s;/*  */

            animation-delay: 2s;/*  */

            animation-iteration-count: infinite; /*  */

            animation-direction: alternate-reverse;/*  */

            animation: myMove 3s infinite alternate;/*此为简写 */

        }

        @keyframes myMove{

            from{

                width:30px

}

            to{

            }

        }

    </style>

    <!-- 2d转换 -->

    <style>

        div{

            transform:translateX(100px);/* 左右平移 */

            transform: translateY(100px); /*上下平移  */

            transform: translate(100px,100px);/*  */

            transform: rotateX(45deg);/*绕x轴旋转  */

            transform: translateX(100px) rotateX(45deg);/*移动加旋转（注意，写的时候要先移动后旋转*/

            transform:scaleX(0.5);/*x轴缩放  */

            transform: scale(1.2); /*缩放  */

        }

    </style>

    <!-- 3d转换 -->

    <style>

       

    </style>

    <!-- 阴影 -->

<style>

    p{

        text-shadow: 20px 20px 2px rgb(red, green, blue);/*从左往右分别为x轴偏移值 y轴偏移值 虚实程度 阴影颜色  */

    }

</style>

<!-- 媒体查询 -->

<!-- 通过查询用户的页面样式，从而施加指令（暂时只作了解） -->

<style>

    @media only screen and

</style>

/* 渐变 */

/* 自己下课以后去了解 */

/* 多列 */