红影 发表于 2022-1-27 10:11
.hy {
margin: 0 auto;
width: 600px;
图片做透明处理了，很不错。美图秀秀做的吗
<style>
.hy {
margin: 0 auto;
width: 600px;
height: 300px;
position: relative;
background: #000
position: relative;
opacity: 0.8;
}
.hy img {
position: absolute;
left: 140px;
top: 100px;
width: 164px;
height: 200px;
opacity: 0.6;
transform-origin: 20% 100%;
animation: bai 5s linear infinite alternate;
}
@keyframes bai {
100% { transform: rotate(-45deg); }
}
</style>
<div class="hy">
<img src="https://pic.imgdb.cn/item/61f1fc4c2ab3f51d914e5ef0.png" alt="" />
</div>
红影 发表于 2022-1-27 10:14
37楼ease-in，38楼是ease，两者貌似差不多。全是5s的。再来个linear，翻页后再试另两个。
这个图片的变化，它们的差异不明显的，不过可以试试
马黑黑 发表于 2022-1-27 10:14
图片做透明处理了，很不错。美图秀秀做的吗
是啊，特别简单。我把图片缩小了，只是做个试验，大了不容易看。
这些都是相等条件下的，只是比较一下效果。
红影 发表于 2022-1-27 10:16
是啊，特别简单。我把图片缩小了，只是做个试验，大了不容易看。
这些都是相等条件下的，只是比较一下效 ...
挺好
<style>
.hy {
margin: 0 auto;
width: 600px;
height: 300px;
position: relative;
background: #000
position: relative;
opacity: 0.8;
}
.hy img {
position: absolute;
left: 140px;
top: 100px;
width: 164px;
height: 200px;
opacity: 0.6;
transform-origin: 20% 100%;
animation: ba 5s ease-out infinite alternate;
}
@keyframes ba {
100% { transform: rotate(-45deg); }
}
</style>
<div class="hy">
<img src="https://pic.imgdb.cn/item/61f1fc4c2ab3f51d914e5ef0.png" alt="" />
</div>
<style>
.hy1 {
margin: 0 auto;
width: 600px;
height: 300px;
position: relative;
background: #444 url('https://pic.imgdb.cn/item/61f205ca2ab3f51d9156ac7e.jpg') no-repeat;
position: relative;
opacity: 0.8;
}
.hy1 img {
position: absolute;
left: 200px;
top: 80px;
width: 164px;
height: 200px;
opacity: 0.85;
transform-origin: 20% 100%;
animation: baibai 5s ease-in-out infinite alternate;
}
@keyframes baibai {
100% { transform: rotate(-45deg); }
}
</style>
<div class="hy1">
<img src="https://pic.imgdb.cn/item/61f1fc4c2ab3f51d914e5ef0.png" alt="" />
</div>
马黑黑 发表于 2022-1-27 10:13
有人说这是错觉
父容器设置过透明，子容器再设，应该不是1加1那么简单，会出现独特效果呢。
马黑黑 发表于 2022-1-27 10:14
图片做透明处理了，很不错。美图秀秀做的吗
美图扣这种对比明显的图特别方便，一键解决。
马黑黑 发表于 2022-1-27 10:15
这个图片的变化，它们的差异不明显的，不过可以试试
细看还是有差别的。这个只是摆动，若是直线或其他运动，差别就天壤之别了{:4_173:}
看47楼，为什么你的看起来是在文字后面的，我咋试验不出来？
红影 发表于 2022-1-27 10:45
看47楼，为什么你的看起来是在文字后面的，我咋试验不出来？
颜色很重要。颜色包括底色、前景色
红影 发表于 2022-1-27 10:25
父容器设置过透明，子容器再设，应该不是1加1那么简单，会出现独特效果呢。
试过才知道。不过，继承有时候是不确定的，所以，如果是可以继承的属性，安全起见，是需要声明的
继续来学习
马黑黑 发表于 2022-1-27 11:26
颜色很重要。颜色包括底色、前景色
嗯嗯，组合得好，才会出现特别的效果。你的帖子就是。很神奇的。{:4_187:}
马黑黑 发表于 2022-1-27 11:28
试过才知道。不过，继承有时候是不确定的，所以，如果是可以继承的属性，安全起见，是需要声明的
哦哦，需要提前知道哪些是传子不传女的{:4_173:}
红影 发表于 2022-1-27 12:15
哦哦，需要提前知道哪些是传子不传女的
头脑要清醒
红影 发表于 2022-1-27 12:15
嗯嗯，组合得好，才会出现特别的效果。你的帖子就是。很神奇的。
主要是不要有错误
马黑黑 发表于 2022-1-27 14:56
头脑要清醒
还要对各种性能比较熟悉才行。
马黑黑 发表于 2022-1-27 14:57
主要是不要有错误
不过，有时发现乱七八糟的组合也能弄出来{:4_173:}