web 扩展

最新推荐文章于 2024-09-29 23:41:25 发布

♧九九卐

最新推荐文章于 2024-09-29 23:41:25 发布

阅读量627

点赞数 15

文章标签： html css 前端

本文链接：https://blog.csdn.net/2301_77482582/article/details/139929447

版权

一、元素的显示和隐藏

/* 元素的显示和隐藏 */

/* 隐藏之后不保留位置 */

display: none;

/* 显示 */

/* 隐藏之后保留原有位置 */

visibility: hidden;

小例子

/* 本来son元素是隐藏的,当鼠标悬停在父亲身上时

显示为display:block */

.son1{

background-color: aqua;

display: none;

}

.father:hover .son1{

display: block;

}

二、结构性伪类选择器

:nth-child(n) 对指定序号的子元素设置样式（从前往后数）。参数可以使数字（1、2、3）、关键字（odd、even）、公式（2n、2n+3 :使用公式时,n从0开始），参数的索引起始值时1，而不是0。
:nth-of-type(n) 匹配指定序号的同一种类型的子元素（从前往后数）。参数同上。

        /* 精准选择,不是后代 */
        /* 1.nth-child(n) 对指定序号的子元素设置样式从前往后数 1 2 3 */
        li:nth-child(3){
            color: aqua;
        }
        /* 2.odd基数 even偶数 */
        li:nth-child(odd){
            color: pink;
        }

        /* 3.2n 2n+1 4n 4n+1 n:从0开始 */
        li:nth-child(2n+1){
            color: cadetblue;
        }
        /* 4.nth-of-type(n) 匹配指定序号的同一种类型的子元素 从前往后 1 2 3  */
        .main p:nth-child(4){
            color: red;
        }
        .main p:nth-of-type(3){
            color: blue;
        }

三、过渡(CSS3) transition

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

transition: 要过渡的属性花费时间运动曲线何时开始;
如果有多组属性变化，还是用逗号隔开。

.box{
            width: 200px;
            height:100px;
            background-color: pink;
            /* 过渡 transition:过渡属性 花费时间 运动曲线(ease 缓慢动画 默认) 何时开始 */
            /* linear 匀速 */
            transition: width 1s linear 3s;
            transition:  width 1s, height 1s ;
            transition: all 1s;
            /* 加速 */
            transition: 2s ease-in;
           

        }
        .box:hover{
            width: 1000px;
            height: 400px;
        }

四、transform 变换

可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

1.移动 translate(x, y)

使用translate方法来将文字或图像在水平方向和垂直方向上分别移动。

 .box{
            width: 200px;
            height:100px;
            background-color: pink;
            margin: 100px auto;
            /* transform:translate(x,y) */
            transition: all 1s;   
         }
         .box:hover{
            /* transform: translate(50px,50px);     */
            transform: translateY(-50px);

         }

2.缩放 scale(x, y) （0~1）

可以对元素进行水平和垂直方向的缩放。

.box{
            width: 200px;
            height:100px;
            background-color: pink;
            margin: 100px auto;
            /* transform:translate(x,y) */
            transition: all 1s;   
         }
         .box:hover{
            /* 缩小:[0-1] 1:不变大,也不变小 扩大:大于1*/
            /* transform: scale(0.5,1); */
            /* 如果书写一个值,那么x,y方向变换都是这个值 */
        
            transform: scale(1.1);

         }

3. 旋转 rotate(deg)

可以对元素进行旋转，正值为顺时针，负值为逆时针；

    .box{
            width: 200px;
            height:100px;
            background-color: pink;
            margin: 100px auto;
            /* transform:translate(x,y) */
            transition: all 1s;   
         }
         .box:hover{
            /* 对元素进行选旋转 正值顺时针 负值逆时针 */
            /* transform: rotate(60deg); */
            transform: rotate(-60deg);
         }

五、动画(CSS3) animation

@keyframes 动画名称 {
from{ 开始位置 }
to{ 结束 }
}

@keyframes 动画名称 {
0%
55%
....
100%
}
/* 关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意*/

animation:动画名称动画时间运动曲线何时开始播放次数是否反方向;

        /* 1. */
        @keyframes move{
            from{
                transform: translate(100px);
                /* left: 100px; */
            }
            to{
                transform: translateX(600px);
                /* left: 600px; */
            }
        }
        img{
            width: 100px;
            height: 100px;
        }
        .小帅{
            /* 调用动画 */
            /* 动画名称 动画时间 运动曲线 开始时间 播放次数(infinite无限次)*/
            /* animation: move 2s linear 3s infinite; */
            animation: move 2s linear;
            /* 规定动画之外的状态 */
            /* forwards:规定动画,保持最后的状态 */
            animation-fill-mode: forwards;
            /* fixed也能 */
            position: absolute;
            /* 初始位置 */  
            left:0;
            top: 0;
        }

六、弹性盒子

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。(芸芸众生皆平等)

/* 使父元素成为弹性盒子 */

/* 如果子元素宽度不够,将自动缩小

宽度剩余,子元素按自身大小进行显示 */

1. flex-direction属性（主轴的方向）

/* 使父元素成为弹性盒子 */

display: flex;

/* row:水平 */

/* 主轴方向 */

/* column 垂直 */

flex-direction: column;

2. flex-wrap属性（如何换行）

/* 使父元素成为弹性盒子 */

display: flex;

/* row:水平 */

/* 主轴方向 */

/* column 垂直 */

flex-direction: column;

/* 不换行 flex-wrap:no-wrap; */

/* 换行 */

flex-wrap: wrap;

3. justify-content属性（主轴上的对齐方式）

/* 使父元素成为弹性盒子 */

display: flex;

/* 主轴上的对齐方式默认*/

justify-content: start;

/* 右对齐 */

justify-content: end;

/* 居中 */

justify-content: center;

/* 两端对齐 */

justify-content: space-between;

/* 两侧相等 */

justify-content: space-around;