旋转木马
前言有些小伙伴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通讯
,
