自动变色的花朵（已关联音乐）

马黑黑 · 发表于 2022-5-2 23:37

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2022-5-2 23:38

本帖最后由马黑黑于 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[j].style.background = `linear-gradient(${getColor()},${getColor()})`;
}
}
function getColor(){
return `#${Math.random().toString(16).substr(-6)}`;
}
</script>

复制代码

马黑黑 · 发表于 2022-5-2 23:44

本帖最后由马黑黑于 2022-5-2 23:45 编辑

说明：

① 花瓣数量在第 29 行修改，j < 5 这里，想要多少个花瓣就用它替代 5 这个数字；

② 花瓣大小请修改第 4、5 行，即 .wrap 选择器的 width 和 height 值；

③ 第三行，即 margin 所在行，是演示需要，具体使用时删掉它，改用 left 和 top 定位其在帖子中的位置。