临摹马导“自动变色的花朵”-《Teri Meri Kahani》
<style>#papa {
margin: 150px 0 0 calc(50% - 921px);
width: 1680px;
height: 1050px;
background: url('https://pic.imgdb.cn/item/65fae6949f345e8d03c5d3d3.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
position: relative; overflow: hidden; }
.wrap {
margin: auto;
left:0;
top: 0;
right: 0;
bottom: 0;
width: 300px;
height: 300px;
perspective: 1800px;
position: absolute;
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 id="papa">
<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 = "https://od.lk/s/NzBfMTY1MDgwODBf/001-Himesh%20Reshammiya-Teri%20meri%20kahani.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> 本帖最后由 执著 于 2024-3-20 21:57 编辑
我还以为不成功，刷新一下就有了！ 执著 发表于 2024-3-20 21:53
为什么发布不成功？在编辑预览可以呀？请老师指导为感！
现在好了，你开始没有勾文本吧 小辣椒 发表于 2024-3-20 21:56
现在好了，你开始没有勾文本吧
勾了“纯文本”的 欣赏执著学习的执著精神，制作不错，效果棒棒的，歌曲也是好听{:4_199:} 小辣椒 发表于 2024-3-20 21:58
欣赏执著学习的执著精神，制作不错，效果棒棒的，歌曲也是好听
谢谢老师鼓励，万里长征还刚刚迈出第一步啊 真漂亮的制作。音乐也极喜欢，配合着这样的场景，听着好听的印度歌曲，真是美好享受{:4_199:} 欣赏执著好帖，点赞{:4_199:} 红影 发表于 2024-3-20 22:19
真漂亮的制作。音乐也极喜欢，配合着这样的场景，听着好听的印度歌曲，真是美好享受
真诚感谢老师的鼓励，我是坐飞机钓鱼---相差甚远啊{:4_204:} 执著 发表于 2024-3-20 23:13
真诚感谢老师的鼓励，我是坐飞机钓鱼---相差甚远啊
太谦虚了，除了教学者，其他人都是边学边玩呢{:4_173:} 制作真漂亮 歌美图靓，真棒！赞！
{:4_178:}{:4_187:}{:4_199:} 大猫咪 发表于 2024-3-21 21:49
制作真漂亮 歌美图靓，真棒！赞！
谢谢老师谬赞！我还没有入门呢。
页:
[1]