马黑黑 发表于 2022-4-3 12:42

蜘蛛绕圈圈

本帖最后由 马黑黑 于 2022-4-3 12:45 编辑 <br /><br /><style>
.spiBox {
        position: relative;
        width: 760px;
        height: 760px;
}
.spiBox img {
        position: absolute;
        width: 200px;
        height: 150px;
        left: 80px;
        top: 80px;
        transform-origin: 300px 300px;
        animation: walk 20s linear infinite;
}
@keyframes walk {
        to { transform: rotate(-360deg); }
}
</style>

<div class="spiBox">
        <img src="https://www.huachaowang.com/data/attachment/forum/202204/02/204928eqvb53ezaw8vhhe5.gif" alt="" />
</div>

马黑黑 发表于 2022-4-3 12:50

代码：
<style>
.spiBox {
        position: relative;
        width: 760px;
        height: 760px;
}
.spiBox img {
        position: absolute;
        width: 200px;
        height: 150px;
        left: 80px;
        top: 80px;
        transform-origin: 300px 300px;
        animation: walk 20s linear infinite;
}
@keyframes walk {
        to { transform: rotate(-360deg); }
}
</style>

<div class="spiBox">
        <img src="https://www.huachaowang.com/data/attachment/forum/202204/02/204928eqvb53ezaw8vhhe5.gif" alt="" />
</div>

红影 发表于 2022-4-3 17:57

黑黑越玩越有趣了{:4_173:}

马黑黑 发表于 2022-4-3 17:58

红影 发表于 2022-4-3 17:57
黑黑越玩越有趣了

这个不难的

红影 发表于 2022-4-3 17:58

若是让它绕椭圆就要给它一个路径了吧。

马黑黑 发表于 2022-4-3 18:02

红影 发表于 2022-4-3 17:58
若是让它绕椭圆就要给它一个路径了吧。

椭圆设置transition-origin应该可以，元素左上角xy里基点不同应该可以实现

红影 发表于 2022-4-3 19:58

马黑黑 发表于 2022-4-3 17:58
这个不难的

虽然不难，但会想不到这样玩呀{:4_173:}

红影 发表于 2022-4-3 19:58

马黑黑 发表于 2022-4-3 18:02
椭圆设置transition-origin应该可以，元素左上角xy里基点不同应该可以实现

哦，居然这么简单就可以啊，还以为要规定个path呢{:4_173:}

马黑黑 发表于 2022-4-3 20:03

红影 发表于 2022-4-3 19:58
哦，居然这么简单就可以啊，还以为要规定个path呢

我试了，不行。rotate都是圆形轨迹。

马黑黑 发表于 2022-4-3 20:05

红影 发表于 2022-4-3 19:58
虽然不难，但会想不到这样玩呀

嗯，想法很重要

小辣椒 发表于 2022-4-3 21:07

这个好玩，黑黑最近几天分享的东东不少

马黑黑 发表于 2022-4-3 21:16

小辣椒 发表于 2022-4-3 21:07
这个好玩，黑黑最近几天分享的东东不少

均匀的分享速度

红影 发表于 2022-4-3 22:22

马黑黑 发表于 2022-4-3 20:03
我试了，不行。rotate都是圆形轨迹。

嗯，那就不椭圆了吧{:4_173:}

红影 发表于 2022-4-3 22:22

马黑黑 发表于 2022-4-3 20:05
嗯，想法很重要

是的，黑黑很会动脑筋{:4_187:}

红影 发表于 2022-4-3 22:23

小辣椒 发表于 2022-4-3 21:07
这个好玩，黑黑最近几天分享的东东不少

亲爱的，你怎么上来了，身体好点了？{:4_179:}

加林森 发表于 2022-4-3 22:56


学习学习

马黑黑 发表于 2022-4-4 08:26

加林森 发表于 2022-4-3 22:56
学习学习

{:4_180:}

马黑黑 发表于 2022-4-4 08:27

红影 发表于 2022-4-3 22:22
是的，黑黑很会动脑筋

一般般吧

马黑黑 发表于 2022-4-4 08:28

红影 发表于 2022-4-3 22:22
嗯，那就不椭圆了吧

椭圆是可以实现的，要花点心思

加林森 发表于 2022-4-4 13:24

马黑黑 发表于 2022-4-4 08:26


{:4_190:}
页: [1] 2
查看完整版本: 蜘蛛绕圈圈