整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
图1
图2
图3
「链接」
转木马
有些小伙伴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通讯
图1
特效炫酷（图2）
图2
源码完整，需要的朋友可以下载学习（图3）
图3
就爱UI - 分享UI设计的点点滴滴
*请认真填写需求信息，我们会在24小时内与您取得联系。
