摇呀摇之CSS实现方式

马黑黑

看这张静态图片：

我们假设有风，辣么，它会随风摇晃。这个用 CSS 就可以完成。首先，需要定义摇晃的支点，一般都是底部，图片呢则需要一个 class 选择器，在这里定义 transform-origin，即运动的原点，就是所谓的支点：

.mypic {
    transform-origin:center bottom;
    /* 或者 : transform-origin: 50% 100%; 即，x方向 50%，y 方向 100% */
}

然后用 transform 的 skew 或 rotate 来摇曳花枝，当然要通过关键帧动画：：

@keyframes yao {
    from { transform: skew(-3deg); }
    to { transform: skew(3deg); }
    /* 或者
    from { transform: rotate(-3deg); }
    to { transform: rotate(3deg); }
    */
}

并在 .mypic 选择器代码中加入 animation 属性：

.mypic {
    transform-origin:center bottom;
    animation: yao 2s linear infinite alternate;
}

这就成了。至于用 skew 还是 rotate，二者是可以斟酌的：skew有些微形变，rotate 纯摇曳。

红影

我是觉得skew更好看呢

红影

记得你还用让两张并排的美人图放在背景里，通过skew弄得美人像活过来一样

马黑黑

红影 发表于 2024-1-29 20:07
我是觉得skew更好看呢

这个这个这个，一两句说不清

红影

那个帖子叫什么名我忘记了，如果去翻应该能翻出来。

马黑黑

红影 发表于 2024-1-29 20:09
记得你还用让两张并排的美人图放在背景里，通过skew弄得美人像活过来一样

额，有的

马黑黑

红影 发表于 2024-1-29 20:10
那个帖子叫什么名我忘记了，如果去翻应该能翻出来。

神秘关系

红影

马黑黑 发表于 2024-1-29 20:11
额，有的

当时就觉得这个功能特别美呢。

红影

马黑黑 发表于 2024-1-29 20:14
神秘关系

还是黑黑记性好

马黑黑

红影 发表于 2024-1-29 22:26
还是黑黑记性好

自己做的，有点印象

马黑黑

红影 发表于 2024-1-29 22:26
当时就觉得这个功能特别美呢。

你也用过的

红影

马黑黑 发表于 2024-1-29 22:34
自己做的，有点印象

我按名字搜到了，那个是移动加倾斜，很美

红影

马黑黑 发表于 2024-1-29 22:34
你也用过的

是的，我跟着学过的

马黑黑

红影 发表于 2024-1-30 16:49
是的，我跟着学过的

一学就会

马黑黑

红影 发表于 2024-1-30 16:47
我按名字搜到了，那个是移动加倾斜，很美

过得去，不算太差

红影

马黑黑 发表于 2024-1-30 17:50
一学就会

一做出来就好看呢

红影

马黑黑 发表于 2024-1-30 17:50
过得去，不算太差

而且很特别，底色也用的图片里的颜色

马黑黑

红影 发表于 2024-1-30 21:49
而且很特别，底色也用的图片里的颜色

挺好挺好

红影

马黑黑 发表于 2024-2-5 18:52
挺好挺好

发现这个用于人物的也好看。

马黑黑

红影 发表于 2024-2-5 22:06
发现这个用于人物的也好看。

角度合适就好