CSS学习记录8.2/2D转换模块/照片墙/翻转菜单练习/动画三要素/动画的其他属性/创建动画的两种形式/云层动画/无限循环滚动练习

本文链接：https://blog.csdn.net/qq_49080239/article/details/125544439

2D转换模块：
transform: rotate(45deg);旋转，deg是单位度，代表旋转多少度。
transform: translate(-100px,50px);平移，第一个参数水平方向，第二个参数垂直方向。
transform: scale(1.5,1.5);缩放，取值为1不变，大于1代表放大，小于1代表缩小，第一个参数水平方向，第二个参数垂直方向。如果水平参数与垂直参数一样可以写为一个参数。
注意点：
1、如果需要进行多个转换用空格隔开。
2、2d的转换会修改元素的坐标系，所以旋转之后再平移就不是水平平移了。
例：

ul{
            width: 800px;
            height: 600px;
            border: 1px solid #000;
            margin: 0 auto;
        }
        li{
            list-style: none;
            width: 100px;
            height: 50px;
            background-color: #ffcaf3;
            margin: 0 auto;
            margin-top: 50px;
            text-align: center;
            line-height: 50px;
        }
        ul li:nth-child(2){
            transform: rotate(45deg);
        }
        ul li:nth-child(3){
            transform: translate(-100px);
        }
        ul li:nth-child(4){
            transform: scale(1.5,1.5);
        }
        ul li:nth-child(5){
            transform: translate(-100px) rotate(45deg) scale(1.5,1.5);
        }

结果：
2d转换
默认情况下，所有元素都是以自己的中心点作为参考来旋转的。我们可以通过形变中心点属性来修改它的参考点。
transform-origin: 0px 0px; 分别是水平方向和垂直方向。
取值方式：
1、具体像素
2、百分比
3、特殊关键字：left center right。

默认情况下所有元素都是围绕Z轴进行旋转，想围绕哪个轴旋转，只需要在rotate后面加上哪个轴（X Y Z）即可。

什么是透视：近大远小。
perspective: 500px;像素代表距离多远在看这个物体。
注意点：透视属性必须添加到需要呈现近大远小的元素的祖先元素上面。

案例：

div{
            width: 320px;
            height: 320px;
            border: 1px solid #000;
            background-color: #ffcaf3;
            margin: 100px auto;
            transition: trans;
            perspective: 500px;
        }
        div img{
            transform-origin: center bottom;
            transition: transform 5s;
        }
        div:hover img{
            transform: rotateX(80deg);
        }

结果;
在这里插入图片描述
照片墙案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
        form,fieldset,input,textarea,p,blockquote,th,td {
            padding: 0;
            margin: 0;
        }
        ul{
            height: 500px;
            border: 1px solid #000;
            background-color: cornflowerblue;
            margin-top: 100px;
            text-align: center;
        }
        ul li{
            list-style: none;
            width: 200px;
            height: 200px;
            background-color: #ffada3;
            display: inline-block;
            margin-top: 100px;
            transition: all 1s;
            position: relative;/*相对定位*/
            box-shadow: 0 0 10px;/*添加阴影*/
        }
        ul li img{
            width: 200px;
            border: 5px solid white;
            box-sizing: border-box;
        }
        ul li:nth-child(1){
            transform: rotate(-20deg);
        }
        ul li:nth-child(2){
            transform: rotate(-10deg);
        }
        ul li:nth-child(3){
            transform: rotate(10deg);
        }
        ul li:nth-child(4){
            transform: rotate(20deg);
        }
        ul li:hover{
            transform: none;
            transform: scale(1.5,1.5);
            z-index: 998;/*让改变后的图片盖住其他的图片*/
        }
    </style>
</head>
<body>
<ul>
    <li><img src="images/fj"></li>
    <li><img src="images/fj2"></li>
    <li><img src="images/fj3"></li>
    <li><img src="images/fj4"></li>
</ul>
</body>
</html>

结果：
照片墙
如何给盒子添加阴影？
格式：box-shadow: 水平偏移垂直偏移模糊度阴影扩展阴影颜色内外阴影;
注意点：
1、盒子阴影分为内外阴影，默认情况下是外阴影，内阴影写inset。
2、快速编写阴影只需添加三个参数即可，即box-shadow: 水平偏移垂直偏移模糊度;
3、阴影颜色默认情况下按照内容颜色决定。

如何给文字添加阴影？
格式：text-shadow: 水平偏移垂直偏移模糊度阴影颜色 ;
注意点：
1、快速编写阴影只需添加三个参数即可，即text-shadow: 水平偏移垂直偏移模糊度;
2、阴影颜色默认情况下按照内容颜色决定。

翻转菜单练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻转菜单</title>
    <style>
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
        form,fieldset,input,textarea,p,blockquote,th,td {
            padding: 0;
            margin: 0;
        }
        .nav{
            width: 400px;
            height: 40px;
            margin: 0 auto;
            margin-top: 100px;
            background-color: #ccc;

        }
        .nav>li{
            list-style: none;
            width: 120px;
            height: 40px;
            float: left;
            background-color: #efefef;
            margin-left: 10px;
            text-align: center;
            line-height: 40px;
            position: relative;
        }
        .sub{
            /*不显示元素*/
            /*display: none;*/
            position: absolute;/*绝对定位要写left和top属性*/
            width: 120px;
            left: 0;
            top: 40px;
        }
        .sub li{
            list-style: none;
            background-color: #efefef;
            transform: rotateY(180deg);
            transition: all 1s;
            opacity: 0;/*用透明度的过渡来隐藏二级菜单*/
        }
        .nav>li:hover .sub li{
            transform: none;
            opacity: 1;
        }
        /*.nav>li:hover .sub{*/
        /*    display: block;*/
        /*}*/
        .nav>li:hover .sub li:nth-child(1){
            transition-delay: 0ms;
        }
        .nav>li:hover .sub li:nth-child(2){
            transition-delay: 200ms;
        }
        .nav>li:hover .sub li:nth-child(3){
            transition-delay: 400ms;
        }
        .nav>li:hover .sub li:nth-child(4){
            transition-delay: 600ms;
        }
        .nav>li:hover .sub li:nth-child(5){
            transition-delay: 800ms;
        }
        .nav>li .sub li:nth-child(5){
            transition-delay: 0ms;
        }
        .nav>li .sub li:nth-child(4){
            transition-delay: 200ms;
        }
        .nav>li .sub li:nth-child(3){
            transition-delay: 400ms;
        }
        .nav>li .sub li:nth-child(2){
            transition-delay: 600ms;
        }
        .nav>li .sub li:nth-child(1){
            transition-delay: 800ms;
        }
        div{
            width: 400px;
            height: 300px;
            background-color: #cdcdcd;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<ul class="nav">
    <li>一级菜单
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul></li>
    <li>一级菜单
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul></li>
</ul>
<div>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
</body>
</html>

结果：
翻转菜单练习
过渡和动画之间的异同：
不同点：过滤必须人为的触发才会执行动画，动画不需要人为的触发就可以执行动画。
相同点：
1、过渡和动画都是用来给元素添加动画的。
2、过渡和动画都是系统新增的的属性。
3、过渡和动画都需要满足三要素才会有动画效果。
动画三要素：
1、告诉系统需要执行哪个动画。animation: aaa;
2、告诉系统我们需要创建一个名称为aaa的动画。
例：

@keyframes aaa {
            from{
                margin-left: 0;
            }
            to{
                margin-left: 500px;
            }
        }

3、告诉系统动画持续时长。animation-duration: 3s;

动画的其他属性：
animation-delay: 时间;告诉系统多少秒后开始执行计划。
animation-timing-function: 取值;告诉系统动画执行的速度。
animation-iteration-count: 值;告诉系统动画需要执行几次。关键字：infinite无限次；
animation-direction: 取值;告诉系统是否需要执行动画往返。
取值：normal：默认情况，执行完一次回到启动继续执行下一次；alternate：需要往返，返回也算一次动画。
animation-play-state: 取值;告诉系统当前动画是否需要暂停。
取值：running ：执行动画；paused：暂停动画。
利用百分数创建动画：
例：

@keyframes aaa {
            0%{
                left: 0;
                top: 0;
            }
            25%{
                left: 500px;
                top: 0;
            }
            50%{
                top: 500px;
                left: 500px;
            }
            75%{
                left: 0;
                top: 500px;
            }
            100%{
                left: 0;
                top: 0;
            }
        }

动画有一定的状态的：
1、等待状态
2、执行状态
3、结束状态

animation-fill-mode: 取值;指定等待状态和结束状态的样式。
取值：
none 不作任何改变
backwards 让元素等待状态显示动画第一帧
forwards 让元素结束状态保持动画最后一帧的样式
both 让元素等待状态显示动画第一帧，让元素结束状态保持动画最后一帧的样式

连写格式：

animation: 动画名称 动画时长 动画运动速度 延迟时间 执行次数 是否需要往返动画 ;

例：

animation: bbb 3s linear 1s 3 normal;

动画模块连写格式简写：animation: 动画名称动画时长

云层动画练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>云层动画</title>
    <style>
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
        form,fieldset,input,textarea,p,blockquote,th,td {
            padding: 0;
            margin: 0;
        }
        ul{
            height: 400px;
            background-color: skyblue;
            margin-top: 100px;
            animation: tianhei 5s linear 0s infinite alternate;
            position: relative;
            overflow: hidden;
        }
        @keyframes tianhei {
            from{
                background-color: skyblue;
            }
            to{
                background-color: black;
            }
        }
        li{
            width: 400%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            list-style: none;
        }
        ul li:nth-child(1){
            background: url("images/图层 1.png");
            animation: one 30s linear 0s infinite alternate;
        }
        @keyframes one {
            from{
                margin-left: 0;
            }
            to{
                margin-left: -100%;/*默认情况下扩展元素往右边扩展，所以应该让元素往左边移动，才能保证一直有云朵*/
            }
        }
        ul li:nth-child(2){
            background: url("images/图层 2.png");
            animation: two 30s linear 0s infinite alternate;
        }
        @keyframes two {
            from{
                margin-left: 0;
            }
            to{
                margin-left: -200%;
            }
        }
        ul li:nth-child(3){
            background: url("images/图层 2.png");
            animation: three 30s linear 0s infinite alternate;

        }
        @keyframes three {
            from{
                margin-left: 0;
            }
            to{
                margin-left: -300%;
            }
        }
    </style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

结果在视频里，素材有限，自己画的。

无限循环滚动练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片滚动</title>
    <style>
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
        form,fieldset,input,textarea,p,blockquote,th,td {
            padding: 0;
            margin: 0;
        }
        div{
            width: 600px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }
        ul{
            width: 2000px;
            height: 200px;
            background-color: black;
            animation: move 10s linear 0s infinite none;
        }
        @keyframes move {
            from{
                margin-left: 0;
            }
            to{
                margin-left: -1200px;
            }
        }
        ul li{
            list-style: none;
            width: 300px;
            height: 200px;
            background-color: black;
            border: 1px solid #000;
            box-sizing: border-box;
            float: left;
        }
        ul:hover{
            animation-play-state: paused;
            /*鼠标悬停在ul上时暂停*/
        }
        ul:hover li{
            opacity: 0.5;
            /*设置透明度，当鼠标悬停在ul上时，所有li透出背景颜色*/
        }
        ul li:hover{
            opacity: 1;
            /*鼠标悬停在某一li上时，透明度变成1，无法透出背景颜色*/
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li><img src="images/tp1"></li>
        <li><img src="images/tp2"></li>
        <li><img src="images/tp3"></li>
        <li><img src="images/tp4"></li>
        <li><img src="images/tp1"></li>
        <li><img src="images/tp2"></li>
        <!--为了不会有明显的跳转，所以放两张一样的接在后面，实现无限循环滚动-->
    </ul>
</div>

</body>
</html>

结果：
无限循环滚动动画练习