无穷
<style>.outer {
left: -214px;
width: 1024px;
height: 576px;
background: #ccc url('/data/attachment/forum/202205/01/194826ny5syks93ws39s6k.jpg') no-repeat;
perspective: 1800px;
position: relative;
}
.wrap {
width: 300px;
height: 300px;
left: calc(50% - 150px);
top: 20%;
position: absolute;
animation: ss linear 20s infinite alternate;
}
.flower {
width: 50%;
height: 50%;
border-radius: 0 100%;
background-color: #ccc;
opacity: .85;
transform-origin: 100% 100%;
transform-style: preserve-3d;
position: absolute;
}
@keyframes ss {
from { transform: rotate(0deg) scale(1.5); }
to { transform: rotate(1440deg) scale(0.01); }
}
</style>
<div class="outer">
<div class="wrap"></div>
</div>
<script>
let wrap = document.querySelector('.wrap');
let str = '';
for(j=0; j< 5; j++) {
let c1 = `#${Math.random().toString(16).substr(-6)}`;
let c2 = `#${Math.random().toString(16).substr(-6)}`;
str += `<div class='flower' style='background-image: linear-gradient(${c1}, ${c2}); transform: rotate(${72*j}deg)'></div>`;
}
wrap.innerHTML = str;
let au = document.createElement('iframe');
au.src = "https://music.163.com/outchain/player?type=2&id=340866&auto=1&height=66";
au.style.display = 'none';
wrap.appendChild(au);
</script>
天外来客？{:5_115:} 东篱闲人 发表于 2022-5-1 20:46
天外来客？
哪里的话？这是望天空 从遥远的星空飞来的变色花朵，好漂亮{:4_187:} 红影 发表于 2022-5-1 21:46
从遥远的星空飞来的变色花朵，好漂亮
可是这不符合情理{:4_170:} 这个设置有意思，可以正转然后反转。 红影 发表于 2022-5-1 21:52
这个设置有意思，可以正转然后反转。
这是animation里 alternate 的功效 马黑黑 发表于 2022-5-1 21:53
这是animation里 alternate 的功效
恩嗯，包括大小的变化也是可以逆转的。 马黑黑 发表于 2022-5-1 21:52
可是这不符合情理
天女散花中的一朵{:4_189:} 红影 发表于 2022-5-2 10:24
天女散花中的一朵
酱紫也成 红影 发表于 2022-5-2 10:23
恩嗯，包括大小的变化也是可以逆转的。
大小是另外设计的。关键帧动画有两个动作。 马黑黑 发表于 2022-5-2 10:42
酱紫也成
当然成啊。 马黑黑 发表于 2022-5-2 10:43
大小是另外设计的。关键帧动画有两个动作。
是的，看到了。 红影 发表于 2022-5-2 11:25
是的，看到了。
嗯嗯 红影 发表于 2022-5-2 11:25
当然成啊。
那就成吧 好好来欣赏欣赏。 加林森 发表于 2022-5-2 12:15
好好来欣赏欣赏。
队长中午好 马黑黑 发表于 2022-5-2 12:30
队长中午好
老黑中午好。 马黑黑 发表于 2022-5-2 11:26
那就成吧
多刷新几次，看不同颜色的花瓣真好。 红影 发表于 2022-5-2 14:02
多刷新几次，看不同颜色的花瓣真好。
可是为什么多数人会觉得变色龙不好看呢
页:
[1]
2