Weightless(失重催眠曲)—学习钟摆效果
<style>.mnDiv {
width: 780px;
height: 520px;
position: relative;
left: -10px;
background: #444 url('https://pic.imgdb.cn/item/61f40d762ab3f51d91583cbf.jpg') no-repeat;
position: relative;
opacity: 0.8;
}
.mnDiv iframe {
position: absolute;
left: 260px;
top: 420px;
width: 330px;
height: 86px;
clip-path: circle(33px at 43px 43px);
shadow: 1px 1px 2px 1px #eee;
opacity: 0.85;
}
.mnDiv-a-img {
position: absolute;
left: 540px;
top: 92px;
width: 161px;
height: 428px;
transform: rotate(6deg);
opacity: 0.95;
transform-origin: 50% 100%;
animation: bai 4s ease infinite alternate;
}
.mnDiv-b-img {
left: 100px;
top: 50px;
width: 50px;
height: 329px;
position: absolute;
opacity: 0.8;
transform: rotate(-15deg);
transform-origin: 50% 0;
animation: gua 1s linear infinite alternate;
}
@keyframes bai {
100% { transform: rotate(-6deg); }
}
@keyframes gua { 100% { transform: rotate(15deg); } }
</style>
<div class="mnDiv">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86
src="https://music.163.com/outchain/player?type=2&id=1489301651&auto=1&height=66"></iframe>
<div class="mnDiv-a-img">
<img src="https://pic.imgdb.cn/item/61f40da12ab3f51d91587a48.png" alt="" /></div>
<div class="mnDiv-b-img">
<img src="https://pic.imgdb.cn/item/61f40d3b2ab3f51d9157e75a.png" alt="" /></div>
</div>
终于做出来上下都能摆动的了{:5_112:}对我这样不熟练的人真够折腾的{:4_205:}
让我们通过音乐，
进入冥想，感受宇宙的浩瀚。
充分享受音乐的脑波，
消除你的压力和焦虑，开始失重体验。
现在 让我们飞向宇宙深处…… 哇，都半夜了，不用催眠也该呼呼去了{:4_193:} 如果父容器是.hy 子容器.hy img 那么调用的时候只要调用父容器，不用写子容器就可以了？如果直接命名为.img是不是就必须写子容器？@马黑黑 红影 发表于 2022-1-29 09:09
如果父容器是.hy 子容器.hy img 那么调用的时候只要调用父容器，不用写子容器就可以了？如果直接命名为.img ...
img是可以摆动的对象 马黑黑 发表于 2022-1-29 10:41
img是可以摆动的对象
有2个摆动对象，前面一下子有点蒙，现在好像差不多，两个都能自己动自己的。
那个手扣得不太好，手臂下端应该扣成弧形，这样摆动起来就不会那么怪了。 马黑黑 发表于 2022-1-29 10:41
img是可以摆动的对象
那只手太怪了，为什么我设置的是左右摆，但图片里看起来，那手好像是前后摆的啊，好像都要按到那女的脸上去了，太奇怪了。 红影 发表于 2022-1-29 10:49
那只手太怪了，为什么我设置的是左右摆，但图片里看起来，那手好像是前后摆的啊，好像都要按到那女的脸上 ...
这是视觉错觉的效果：菇凉脸部有所倾斜，手掌往左移时就离她的脸部更近，甚至有接触 马黑黑 发表于 2022-1-29 10:57
这是视觉错觉的效果：菇凉脸部有所倾斜，手掌往左移时就离她的脸部更近，甚至有接触
css动画经常有有一些奇妙的效果，比如上次的春风十里，我一直觉得那玫瑰是在文字后面图像前面，一直以为是三张图图呢，结果是视觉的错觉。真神奇。 制作得真好。红影加油。{:5_154:} 红影 发表于 2022-1-29 11:30
css动画经常有有一些奇妙的效果，比如上次的春风十里，我一直觉得那玫瑰是在文字后面图像前面，一直以为 ...
人的视觉可以识别三维的对象，但在二维对象，三维错觉常常出现，我们的视觉神经和视觉细胞是有缺陷的 亲爱的，制作的太棒了，难以想象的直接css代码效果{:4_178:} 加林森 发表于 2022-1-29 11:34
制作得真好。红影加油。
谢谢队长，还是有点小问题的。 马黑黑 发表于 2022-1-29 11:47
人的视觉可以识别三维的对象，但在二维对象，三维错觉常常出现，我们的视觉神经和视觉细胞是有缺陷的
嗯嗯，老电影就是利用人的视觉缺陷的结果，利用视觉残留，让不懂的图片看起来是连续动作。 红影 发表于 2022-1-29 13:11
谢谢队长，还是有点小问题的。
我感觉手与美女的脸太近了。 小辣椒 发表于 2022-1-29 12:28
亲爱的，制作的太棒了，难以想象的直接css代码效果
亲爱的，黑黑教的这些css动画非常有趣呢{:4_173:} 红影 发表于 2022-1-29 13:12
嗯嗯，老电影就是利用人的视觉缺陷的结果，利用视觉残留，让不懂的图片看起来是连续动作。
现在也是的，只是帧数密集了 加林森 发表于 2022-1-29 13:13
我感觉手与美女的脸太近了。
这样更容易让美女睡着{:4_196:} 加林森 发表于 2022-1-29 13:13
我感觉手与美女的脸太近了。
我把位置移开了一点，队长再看看，现在差不多了吧。