前端学习详细知识点讲解-CSS(第六天）

最新推荐文章于 2024-04-22 15:22:18 发布

华丽的臻丶

最新推荐文章于 2024-04-22 15:22:18 发布

阅读量163

点赞数 2

分类专栏： css讲解文章标签： css

本文链接：https://blog.csdn.net/hualidezhen/article/details/116207923

版权

css讲解专栏收录该内容

7 篇文章 0 订阅

订阅专栏

伸缩盒以及动画

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、伸缩盒

什么是伸缩盒：在移动端进行布局

1）语法
display：fled

2）父元素的样式
display:flex；将盒子设置为伸缩盒
flex-direction 弹性元素排布的方向
cow x轴方向排布{默认值}
column y轴方向排布
justify-content: center; 主轴方向上的对齐方式
center 居中排布
flex-start 居左排布
flex-end 居右排布
align-items: center; 交叉轴上对齐的方式
center 居中排布
flex-start 开始位置上排布
flex-end 结束位置上排布

3）子元素的样式
flex 弹性元素对于伸缩盒剩余空间的分配

什么情况下需要用到伸缩盒？

当我们进行css样式的渲染的时候给定了一个盒子固定的宽度，正常情况下会在游览器中正常的显示，但如果平常操作的时候将游览器的窗口变小的时候，盒子的布局往往就会乱套，

那么如果我们有一个需求，要盒子能够根据游览器的大小进行动态的布局，游览器占领整个屏幕是一种布局，占领一半的屏幕又是另一种布局，即盒子会根据游览器的大小进行自适应布局

1.案例

案例代码如下：参考（fixd.html）

<style>
    .parent {
        /* height: 400px; */
        border: 1px solid #333;
        /* 父元素设置为伸缩盒 子元素全部为弹性元素 */
        display: flex;
        /* 子元素是否换行
            wrap 换行
            nowrap 不换行 */
        flex-wrap: wrap;
        /* justify-content: center;
        align-items: center; */
        /* flex-direction: 
            row  弹性元素在横向（x轴）排布 默认情景
            column 弹性元素在纵向（y轴）排布 */

        /* 主轴为y轴，交叉轴为x轴 */
        /* flex-direction: column;
        align-items: center; */

        /* 主轴为x轴，交叉轴为y轴 */
        /* flex-direction: row;
        justify-content: center; */
    }
    .item {
        width: 100px;
        height: 100px;
        border: 1px solid #333;
        margin: 20px;
        /* 四个子元素的分配比例都为1 */
        /* flex: 1; */

        }
</style>
<body>
    <div class="parent">
        <div class="item">伸缩盒伸缩盒伸缩盒伸缩盒伸缩盒伸缩盒伸缩盒伸缩盒伸缩盒</div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

二、动画

什么是动画：随着时间的推移动态大大改变css的样式属性
1）语法 {组成}
animation 动画的配置
@keyframes 动画的关键帧
2）属性
参考3-animation.html
3）案例
1.轮播图

1.属性

代码如下（3-animation.html）：

   <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            /* left: calc(100%-100px); */

            /* 动画的名称 */
            animation-name: move;
            /* 动画持续的时间 */
            animation-direction: 1s;
            /* 动画的填充模式 当前div在动画结束时显示的位置
            forwards 元素在动画的最后一帧的位置显示
            backwords 元素在动画结束后回到开始的位置显示 {默认值} */
            animation-fill-mode: forwards;
            /* 动画执行的次数
            1 一次
            2 两次
            。。。
            infinite 无数次 */
            animation-iteration-count: infinite;
            /* 动画的速度 
            linear  匀速
            ease    先快后慢
            ease-in 先慢后快*/
            animation-timing-function: linear;
            /* 动画的延迟时间 两秒后在执行时间 */
            animation-delay: 2s;
            /* 动画的状态
            pasued 暂停
            running 执行 */
            /* animation-play-state: paused; */
            /* 动画的方向 */
            animation-direction: alternate;

            /* 速写 */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
        }
        div:hover {
            /* 动画暂停 */
            animation-play-state: paused;
        }
        /* 第一步：动画的定义
            @keyframes css的固定语法
            from 动画的开始事件
            to 动画的结束事件 */
        @keyframes move {
            from {
                left: 0px;
            }
            to {
                left: calc(100% - 100px);   
            }
        }
    </style>

2.案例

轮播图

轮播图-大致意思就是让图片轮流播放

我们经常访问网站就能发现很多网站都会有这种效果的图片，就是再一个固定的地方每隔一段时间就会播放一张图片，这就是轮播图。下面我们就可以通过轮播图的案例更加深入的学习动画这个概念

轮播图代码如下:

<style>
    /* 窗口的样式 */
    .eye {
        height: 300px;
        width: 400px;
        border: 1px solid #333;
        margin: 200px auto;
        overflow: hidden;
    }
    /* 图片的容器 */
    .warp {
        width: 1600px;
        height: 300px;
        animation: move 4s infinite;
    }
    /* 图片 */
    .item {
        width: 400px;
        height: 300px;
        float: left;
       
    }

    .warp .item:first-child {
        background-image: url(https://yanxuan-item.nosdn.127.net/6d054f202f0aec38fd01b8f95b1c34c8.png?type=webp&quality=95&thumbnail=265x265&imageView);
        background-size: 100% 100%;
    }
    .warp .item:nth-child(2){
        background-image: url(https://yanxuan-item.nosdn.127.net/6d054f202f0aec38fd01b8f95b1c34c8.png?type=webp&quality=95&thumbnail=265x265&imageView);
        background-size: 100% 100%;
    }
    .warp .item:nth-child(3){
        background-image: url(https://yanxuan-item.nosdn.127.net/6d054f202f0aec38fd01b8f95b1c34c8.png?type=webp&quality=95&thumbnail=265x265&imageView);
        background-size: 100% 100%;
    }
    .warp .item:nth-child(4){
        background-image: url(https://yanxuan-item.nosdn.127.net/6d054f202f0aec38fd01b8f95b1c34c8.png?type=webp&quality=95&thumbnail=265x265&imageView);
        background-size: 100% 100%;
    }

    @keyframes move {
        from {
            margin-left: 0px;
        }

        to {
            margin-left: -1600px;
            }
    }
</style>
<body>
    <div class="eye">
        <div class="warp">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
        </div>
    </div>
</body>

效果图如下（没找到合适的图片所有所用的四个轮播图都是一样的）：

css-动画-素材

华丽的臻丶

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
5
评论
前端学习详细知识点讲解-CSS(第六天）

伸缩盒以及动画提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录目录伸缩盒以及动画文章目录一、伸缩盒二、动画 1.属性 2.属性总结一、伸缩盒什么是伸缩盒：在移动端进行布局 1）语法 display：fled 2）父元素的样式 d...
复制链接

扫一扫