HTML5+CSS3基础（day20）_<li style="cursor:pointer;float:left;margin:0 20px-CSDN博客

本文链接：https://blog.csdn.net/m0_52372037/article/details/128886958

一、CSS 2D转换

3. 2D转换之scale

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D转换之缩放scale</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transform-origin: left bottom;
        }

        div:hover {
            /* 1.里面写的数字不跟单位 是倍数的意思 */
            /* transform: scale(x,y); */
            /* transform: scale(2, 2) */
            /* 2.宽度为原来的2倍 高度不变  */
            /* tansform: scale(2,1); */
            /* 3.等比例缩放 同时修改宽度和高度 */
            /* transform: scale(2); */
            /* 4.可以进行缩小 小于1就是缩小 */
            /* transform: scale(0.5, 0.5); */
            /* 等价于 */
            /* transform: scale(0.5); */
            /* 5. scale的优势之处: 不会影响其他盒子,而且可以设置缩放的中心点 */
            /* 以前的做法会影响其他盒子 */
            /* width: 300px;
            height: 300px; */
            transform: scale(2);
        }
    </style>
</head>

<body>
    <div></div>
    22222
</body>

</html>

（1）图片放大案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片放大案例</title>
    <style>
        div {
            /* 超出的部分不显示 */
            overflow: hidden;
            float: left;
        }

        /* 谁做过渡给谁加 */
        div img {
            transition: all .4s;
        }

        div img:hover {
            transform: scale(1.1);
        }
    </style>
</head>

<body>
    <div><a href="#"><img src="imgs/111.jpg" alt=""></a></div>
    <div><a href="#"><img src="imgs/111.jpg" alt=""></a></div>
    <div><a href="#"><img src="imgs/111.jpg" alt=""></a></div>
</body>

</html>

（2）分页按钮案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页按钮案例</title>
    <style>
        li {
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid pink;
            margin: 10px;
            text-align: center;
            line-height: 30px;
            list-style: none;
            border-radius: 50%;
            cursor: pointer;
            transition: all .4s;
        }

        li:hover {
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>

</html>

4. 2D转换综合写法以及顺序问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D转换综合写法顺序</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all 0.4s;
        }

        div:hover {
            /* transform: translate(30px, 30px) rotate(180deg); */
            /* 同时有位移和其它属性，我们需要把位移放到最前面 */
            transform: rotate(180deg) translate(150px, 50px);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

5. 2D转换小结

二、CSS3动画

1.CSS3动画基本使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3动画基本使用</title>
    <style>
        /* 页面一打开，一个盒子就从左边走到右边  */
        /* 1.定义动画  */
        @keyframes move {

            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }

            /* 结束状态 */
            100% {
                transform: translateX(100px);
            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2.调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 3s;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

2.动画序列

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画序列</title>
    <style>
        /* @keyframes move {

            from和to等价于0%和100%
            from {
                transform: translate(0, 0);
            }

            to {
                transform: translate(1000px, 0);
            }
        } */
        /* 动画序列 */
        /* 1. 可以做多个状态的变化 keyframe关键帧 */
        /* 2. 里面的百分比要是整数 */
        /* 3. 里面的百分比就是总的时间的划分（这个案例是10s,25%就是25%*10=2.5s） */
        @keyframes move {

            /* 0%没有变化，可以省略不写，也可以写一个空的 */
            /* 这里的0%的0等数字可以替换成1-100任意的整数数字 */
            0% {
                transform: translate(0, 0);
            }

            25% {
                transform: translate(1000px, 0);
            }

            50% {
                transform: translate(1000px, 500px);
            }

            75% {
                transform: translate(0, 500px);
            }

            100% {
                transform: translate(0, 0);
            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            animation-name: move;
            animation-duration: 8s;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

3.CSS3动画常见属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3动画常见属性</title>
    <style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(1000px, 0);
            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 动画名称 */
            /* animation-name: move; */
            /* 持续时间 */
            /* animation-duration: 2s; */
            /* 运动曲线 */
            /* animation-timing-function: ease; */
            /* 何时开始 */
            /* animation-delay: 1.5s; */
            /* 重复次数 iteration重复的 infinite无限*/
            /* animation-iteration-count: infinite; */
            /* 是否反方向播放 默认的是normal 反方向是alternate*/
            /* animation-direction: alternate; */
            /* 动画结束后的状态 默认是backwards回到起始状态 停留在结束状态是forwards */
            /* animation-fill-mode: forwards; */
            /* animation: name duration timing-function delay iteraion-count direction fill-mode; */
            /* 前面2个属性 name duration一定要写  有些默认的值可以省略不写 */
            animation: move 2s linear 0s 1 alternate forwards;
        }

        div:hover {
            /* 默认是running */
            /* 鼠标经过div停止动画 鼠标离开就继续动画 */
            animation-play-state: paused;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

4.CSS3动画简写

5.大数据热点图案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大数据热点图案例</title>
    <style>
        body {
            background-color: #333;
        }

        .map {
            position: relative;
            width: 747px;
            height: 616px;
            background: url(media2/map.png) no-repeat;
            margin: 0 auto;
        }

        .city {
            position: absolute;
            top: 227px;
            right: 193px;
            color: #fff;
        }

        .tb {
            top: 500px;
            right: 80px;
        }

        .gz {
            top: 542px;
            right: 194px;
        }

        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }

        /* 权重10+1+10 */
        .city div[class^="pulse"] {
            /* 保证小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
            /* 放在父盒子里水平垂直居中是因为放大的时候盒子就不会往下走了而是由中心向四周发散 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }

        /* pulse1默认的是直接走就行了 */
        /* 权重10 */
        /* .pulse2 { */
        /* 权重21 */
        .city div.pulse2 {
            animation-delay: 0.4s;
        }

        .city div.pulse3 {
            animation-delay: 0.8s;
        }

        @keyframes pulse {
            0% {}

            70% {
                width: 40px;
                height: 40px;
                /* 如果用scale 阴影也会放大5倍 我们只想让盒子变大 */
                /* transform: scale(5); */
                /* 透明度 */
                opacity: 1;
            }

            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city gz">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

</html>

6.速度曲线之steps步长

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>速度曲线步长</title>
    <style>
        div {
            overflow: hidden;
            /* 打字机效果 */
            font-size: 20px;
            width: 0;
            height: 30px;
            background-color: pink;
            /* 让文字强制一行内显示 */
            white-space: nowrap;
            /* steps就是分几步来进行动画 有了steps就不要写ease或者linear了 */
            animation: w 4s steps(10) forwards;
        }

        @keyframes w {
            0% {
                width: 0;
            }

            100% {
                width: 200px;
            }
        }
    </style>
</head>

<body>
    <div>珍惜所有的不期而遇。</div>
</body>

</html>

7.奔跑的熊大案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奔跑的熊大案例</title>
    <style>
        body {
            background-color: #ccc;
        }

        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media2/bear.png) no-repeat;
            /* 元素可以添加多个动画，用逗号分隔 */
            animation: bear 1s steps(8) infinite, move 1s forwards;
        }

        @keyframes bear {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -1600px 0;
            }
        }

        @keyframes move {
            0% {
                left: 0;
            }

            100% {
                left: 50%;
                /* 往左走自身宽度的一半 */
                /* margin-left: -100px; */
                /* 小熊的盒子宽度变化了，后期计算起来麻烦，所以用translate */
                transform: translate(-50%);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

三、CSS3 3D转换

1.认识3D转换

2. 3D转换translate3d

3.透视perspective

4.translateZ

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>translateZ</title>
    <style>
        body {
            perspective: 500px;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transform: translateZ(0);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

5. 3D旋转rotate

在这里插入图片描述

（1） 3D旋转rotateX

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rotateX</title>
    <style>
        body {
            perspective: 300px;
        }

        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }

        img:hover {
            transform: rotateX(360deg);
        }
    </style>
</head>

<body>
    <img src="media2/pig.jpg" alt="">
</body>

</html>

（2）3D旋转rotateY

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rotateY</title>
    <style>
        body {
            perspective: 500px;
        }

        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }

        img:hover {
            transform: rotateY(45deg);
        }
    </style>
</head>

<body>
    <img src="media2/pig.jpg" alt="">
</body>

</html>

（3）3D旋转rotateZ

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rotateZ</title>
    <style>
        body {
            perspective: 500px;
        }

        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }

        img:hover {
            /* transform: rotateZ(180deg); */
            /* transform:rotate3d(x,y,z,deg); */
            /* transform: rotate3d(1, 0, 0, 45deg); */
            /* transform: rotate3d(0, 1, 0, 45deg); */
            /* 矢量原则 */
            transform: rotate3d(1, 1, 0, 45deg);
        }
    </style>
</head>

<body>
    <img src="media2/pig.jpg" alt="">
</body>

</html>

（4）3D旋转 rotate3d

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D移动translate3D</title>
    <style>
        body {
            /* 透视写到被观察元素的父盒子上面 */
            /* 透视越小，盒子越大 */
            perspective: 200px;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* transform: translateX(100px); */
            /* 发现只有y轴变化了  这是因为它们都叫transform  后面的把前面的覆盖了 */
            /* transform: translateY(100px); */
            /* translateZ必须要借助透视才能看到效果 */
            /* transform: translateX(100px) translateY(100px) translateZ(100px); */
            /* 1. translateZ 沿着Z轴移动 */
            /* 2. translateZ 后面的单位我们一般跟px 很少跟百分比 */
            /* 3. translateZ(100px) 向外移动100px 正值往眼前走来 负值往后走 */
            /* 3D移动有简写的方法 */
            /* transform: translate3d(x,y,z); */
            /* transform: translate3d(100px, 100px, 100px); */
            /* xyz是不能省略的，如果没有就写0 */
            transform: translate3d(400px, 100px, 100px);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

（5） 3D呈现transform-style

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D呈现transform-style</title>
    <style>
        /* body {
            perspective: 500px;
        } */

        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            perspective: 500px;
            transition: all 2s;
            /* 让子元素开启3D立体空间环境 */
            transform-style: preserve-3d;
        }

        .box:hover {
            transform: rotateY(60deg);
        }

        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }

        .box div:last-child {
            background-color: purple;
            transform: rotateX(60deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>

</html>

（6）两面翻转盒子案例

搭建HTML结构
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两面翻转的盒子</title>
    <style>
        body {
            perspective: 400px;
        }

        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all .4s;
            /* 让背面的紫色盒子保留立体空间 给父级添加的*/
            transform-style: preserve-3d;
            ;
        }

        .box:hover {
            transform: rotateY(180deg);
        }

        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            font-size: 30px;
            color: #fff;
            text-align: center;
            line-height: 300px;
        }

        .front {
            background-color: pink;
            /* 把粉色盒子提到前面去 */
            z-index: 1;
            backface-visibility: hidden;
        }

        .back {
            background-color: purple;
            /* 像手机一样 背靠背来进行旋转 */
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">楼外的蒹葭</div>
        <div class="back">今晚的月亮</div>
    </div>
</body>

</html>