木马基础HTML(木马基础动画定义属性)「木马形式」

旋转木马前言有些小伙伴0基础小伙伴担心，我没有编程工具怎么办？这个不需要编程工具的，只需要找9张图片改改名称就行步骤(1) 新建一个文件夹(2) 文件夹中新建img文件夹以及一个txt文档(3) 把我放在下面的代码粘贴到txt文档中（4）没有txt后缀的这样设置一下（这里以win11为例，点击查看-->显示-->文件扩展名）（5）把文本文档名称改为旋转木马.html（6）把图片放在img文件夹里面，需要9张（7）图片重命名为 1.jpg 2.jpg 3.jpg 以此规律命名（200 x 300 像素的图片）（8）设置图片像素（用win自带照片软件打开-->点击... --> 重设大小-->自定义尺寸-->把宽度改成200、高度改成200-->保存）代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        {            margin: 0;            padding: 0;        }        .box{            width: 200px;            height: 300px;            / border: 1px solid black; /            margin: 50px auto;            position: relative;            / 设置3D 效果 /            transform-style: preserve-3d;            / 添加3D视距  透视效果 /            / perspective: 300px; /            transform: rotateX(-15deg);            / CSS animation动画属性                 name 定义动画名称                duration 定义动画执行时间   秒/单位                timing-function 定义动画执行速度 linear 匀速                delay 定义动画执行等待 秒/单位                iteration-count 定义动画执行次数 默认为1  无限执行 infinite                animation-play-state 动画运行状态控制 默认running运行  paused 暂停            /            / animation: name duration timing-function delay iteration-count direction fill-mode; /            animation: move 10s linear infinite;        }        / 定义关键帧动画  执行我们定义的动画 /        @keyframes move{            0%{                / 在CSS3 变幻属性中  如果要给一个元素添加多个变幻属性                    需要将所有的变幻属性都写在transform                 /                transform:rotateX(-15deg) rotateY(0deg);            }            100%{                transform:rotateX(-15deg) rotateY(360deg);            }        }        / :hover 伪类选择器  设置用户鼠标移入时的效果 /        .box:hover{            / 当用户鼠标移入时 动画由默认的运行状态变成暂停 /            animation-play-state: paused;        }        .box div{            position: absolute;            left: 0;            top: 0;            width: 200px;            height: 300px;            margin-top: 50px;        }        / :nth-child(1) /        .box div:nth-child(1){            / 改变页面第一张图片 变幻属性            transform  变幻属性            rotate  旋转            translate 位移             /            transform: rotateY(40deg) translateZ(275px);        }        .box div:nth-child(2){            transform: rotateY(80deg) translateZ(275px);        }        .box div:nth-child(3){            transform: rotateY(120deg) translateZ(275px);        }        .box div:nth-child(4){            transform: rotateY(160deg) translateZ(275px);        }        .box div:nth-child(5){            transform: rotateY(200deg) translateZ(275px);        }        .box div:nth-child(6){            transform: rotateY(240deg) translateZ(275px);        }        .box div:nth-child(7){            transform: rotateY(280deg) translateZ(275px);        }        .box div:nth-child(8){            transform: rotateY(320deg) translateZ(275px);        }        .box div:nth-child(9){            transform: rotateY(360deg) translateZ(275px);        }    </style></head><body>    <div class="box">        <div>            <img src="./img/1.jpg" alt="">        </div>        <div>            <img src="./img/2.jpg" alt="">        </div>        <div>            <img src="./img/3.jpg" alt="">        </div>        <div>            <img src="./img/4.jpg" alt="">        </div>        <div>            <img src="./img/5.jpg" alt="">        </div>        <div>            <img src="./img/6.jpg" alt="">        </div>        <div>            <img src="./img/7.jpg" alt="">        </div>        <div>            <img src="./img/8.jpg" alt="">        </div>        <div>            <img src="./img/9.jpg" alt="">        </div>    </div></body></html>

上一篇：ABB机器人Sockets通讯