自动变色的花朵（已关联音乐）
<style>.wrap {
margin: auto; margin-top: 100px;
display: flex;
width: 300px;
height: 300px;
perspective: 1800px;
position: relative;
animation: rot 10s linear infinite;
}
.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 rot { to { transform: rotate(1turn); } }
</style>
<div class="wrap"></div>
<script>
let wrap = document.querySelector('.wrap');
let flag = true;
let str = '';
for(j=0; j< 5; j++) {
str += `<div class='flower' style='background: linear-gradient(${getColor()}, ${getColor()}); transform: rotate(${72*j}deg)'></div>`;
}
wrap.innerHTML = str;
let au = document.createElement('audio');
au.src = "http://www.kumeiwp.com/sub/filestores/2022/04/16/4dc3020a14f7266fc4ffde61e56e0d79.mp3";
au.autoplay = flag;
au.loop = true;
au.style.display = 'none';
wrap.appendChild(au);
let tt = setInterval(setColor, 1000);
wrap.onclick = function(){
flag ? (au.pause(), this.style.animationPlayState = 'paused', flag = false) : (au.play(), this.style.animationPlayState = 'running', flag = true);
}
function setColor(){
let petal = document.querySelectorAll('.flower');
for(j=0; j< petal.length; j++){
petal.style.background = `linear-gradient(${getColor()},${getColor()})`;
}
}
function getColor(){
return `#${Math.random().toString(16).substr(-6)}`;
}
</script>
本帖最后由 马黑黑 于 2022-5-2 23:42 编辑
代码：
<style>
.wrap {
margin: auto; margin-top: 100px;
width: 300px;
height: 300px;
perspective: 1800px;
position: relative;
animation: rot 10s linear infinite;
}
.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 rot { to { transform: rotate(1turn); } }
</style>
<div class="wrap"></div>
<script>
let wrap = document.querySelector('.wrap');
let flag = true;
let str = '';
for(j=0; j< 5; j++) {
str += `<div class='flower' style='background: linear-gradient(${getColor()}, ${getColor()}); transform: rotate(${72*j}deg)'></div>`;
}
wrap.innerHTML = str;
let au = document.createElement('audio');
au.src = "http://www.kumeiwp.com/sub/filestores/2022/04/16/4dc3020a14f7266fc4ffde61e56e0d79.mp3";
au.autoplay = flag;
au.loop = true;
au.style.display = 'none';
wrap.appendChild(au);
let tt = setInterval(setColor, 1000);
wrap.onclick = function(){
flag ? (au.pause(), this.style.animationPlayState = 'paused', flag = false) : (au.play(), this.style.animationPlayState = 'running', flag = true);
}
function setColor(){
let petal = document.querySelectorAll('.flower');
for(j=0; j< petal.length; j++){
petal.style.background = `linear-gradient(${getColor()},${getColor()})`;
}
}
function getColor(){
return `#${Math.random().toString(16).substr(-6)}`;
}
</script>
本帖最后由 马黑黑 于 2022-5-2 23:45 编辑
说明：
① 花瓣数量在第 29 行修改，j < 5 这里，想要多少个花瓣就用它替代 5 这个数字；
② 花瓣大小请修改第 4、5 行，即 .wrap 选择器的 width 和 height 值；
③ 第三行，即 margin 所在行，是演示需要，具体使用时删掉它，改用 left 和 top 定位其在帖子中的位置。 变色也可以在音乐暂停是停止，但不建议，所以JS脚本程序中没有加入停止变色机制 变色的语句：
let tt = setInterval(setColor, 1000);
1000标识1秒，如果想变慢一点或快一点，改变它，例如2000是两秒，500是半秒 {:4_189:} 黄色能再多点吗 辫子哥哥 发表于 2022-5-3 01:32
黄色能再多点吗
黄金太贵了，预算有限呢{:4_170:} 终于知道怎样让花朵变色了，谢谢黑黑{:4_187:} 这个比每次刷新才变色更炫，真漂亮{:4_199:} 真漂亮的制作，老黑写得很详细的。谢谢老黑啦！{:4_190:} 加林森 发表于 2022-5-3 09:45
真漂亮的制作，老黑写得很详细的。谢谢老黑啦！
不客气 马黑黑 发表于 2022-5-3 10:03
不客气
嗯嗯。 红影 发表于 2022-5-3 09:36
终于知道怎样让花朵变色了，谢谢黑黑
奇迹还得JS来创造 红影 发表于 2022-5-3 09:37
这个比每次刷新才变色更炫，真漂亮
老子曰：五色令人目盲 马黑黑 发表于 2022-5-3 10:08
奇迹还得JS来创造
JS真厉害{:4_189:} 马黑黑 发表于 2022-5-3 10:09
老子曰：五色令人目盲
五色那么美，盲就盲了{:4_189:} 红影 发表于 2022-5-3 10:27
五色那么美，盲就盲了
豁出去了{:4_170:} 红影 发表于 2022-5-3 10:27
JS真厉害
没有JS，网页和小程序会逊色很多 先收藏 放帖子里很漂亮的{:5_117:}谢谢老黑{:4_179:} 大猫咪 发表于 2022-5-3 12:35
先收藏 放帖子里很漂亮的 谢谢老黑
猫咪下午好