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

执著

老师上午好，这个还能正常使用吗？我怎么放在代码编辑器中预览见不到任何东西？如果能用，第三行代码具体怎么修改？谢谢
.wrap {
        margin: auto; margin-top: 100px;
        width: 300px;
        height: 300px;
        perspective: 1800px;
        position: relative;
        animation: rot 10s linear infinite;

马黑黑

执著 发表于 2024-3-18 11:24
老师上午好，这个还能正常使用吗？我怎么放在代码编辑器中预览见不到任何东西？如果能用，第三行代码具体怎 ...

我的帖子编辑器使用严格模式，每一个函数末尾都需要用分号结束语句才合法。下面的代码是在帖子一楼代码基础上加了分号，可以在帖子编辑器那里正常预览：

1. <style>
   
2. .wrap {
   
3.         margin: auto; margin-top: 100px;
   
4.         width: 300px;
   
5.         height: 300px;
   
6.         perspective: 1800px;
   
7.         position: relative;
   
8.         animation: rot 10s linear infinite;
   
9. }
   
10. .flower {
    
11.         width: 50%;
    
12.         height: 50%;
    
13.         border-radius: 0 100%;
    
14.         background-color: #ccc;
    
15.         opacity: .85;
    
16.         transform-origin: 100% 100%;
    
17.         transform-style: preserve-3d;
    
18.         position: absolute;
    
19. }
    
20. @keyframes rot { to { transform: rotate(1turn); } }
    
21. </style>
    
22. 
    
23. <div class="wrap"></div>
    
24. 
    
25. <script>
    
26. let wrap = document.querySelector('.wrap');
    
27. let flag = true;
    
28. let str = '';
    
29. for(j=0; j< 5; j++) {
    
30.         str += `<div class='flower' style='background: linear-gradient(${getColor()}, ${getColor()}); transform: rotate(${72*j}deg)'></div>`;
    
31. }
    
32. wrap.innerHTML = str;
    
33. let au = document.createElement('audio');
    
34. au.src = "http://www.kumeiwp.com/sub/filestores/2022/04/16/4dc3020a14f7266fc4ffde61e56e0d79.mp3";
    
35. au.autoplay = flag;
    
36. au.loop = true;
    
37. au.style.display = 'none';
    
38. wrap.appendChild(au);
    
39. 
    
40. let tt = setInterval(setColor, 1000);
    
41. 
    
42. wrap.onclick = function(){
    
43.         flag ? (au.pause(), this.style.animationPlayState = 'paused', flag = false) : (au.play(), this.style.animationPlayState = 'running', flag = true);
    
44. };
    
45. 
    
46. function setColor(){
    
47.         let petal = document.querySelectorAll('.flower');
    
48.         for(j=0; j< petal.length; j++){
    
49.                 petal[j].style.background = `linear-gradient(${getColor()},${getColor()})`;
    
50.         }
    
51. };
    
52. 
    
53. function getColor(){
    
54.         return `#${Math.random().toString(16).substr(-6)}`;
    
55. };
    
56. </script>

复制代码

另外，将一楼的代码存为本地 .html 文件在双击打开，会很正常

执著

马黑黑 发表于 2024-3-18 13:27
我的帖子编辑器使用严格模式，每一个函数末尾都需要用分号结束语句才合法。下面的代码是在帖子一楼代码基 ...

老师，你说实际应用时，删掉第三行改用 left 和 top 定位其在帖子中的位置。是不是将第三行改成如下两个数据代码：
left: 50%;
top: 50%;

但是，我改成上面的好像没什么变化，尤其是top没有居中。



我又尝试改成：
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
结果花朵还往下移动了！

最后胡乱改成下面的好像差不多了：
top:50%;
left:50%;
margin-top: -50px;
margin-left: -50px;


应该要如何修改才对？

马黑黑

执著 发表于 2024-3-18 21:17
老师，你说实际应用时，删掉第三行改用 left 和 top 定位其在帖子中的位置。是不是将第三行改成如下两个 ...

50%表示 left 或 top 处在父元素的一半，你要考虑的问题是，你要定位的东西它是有宽度和高度的

绿叶清舟

一评分花会躲起来吗

马黑黑

绿叶清舟 发表于 2024-3-18 21:36
一评分花会躲起来吗

评分就一次，躲不躲有啥关系

绿叶清舟

马黑黑 发表于 2024-3-18 21:37
评分就一次，躲不躲有啥关系

以为俺这出问题了

马黑黑

绿叶清舟 发表于 2024-3-18 21:41
以为俺这出问题了

评分后是局部刷新页面，总有问题的

绿叶清舟

马黑黑 发表于 2024-3-18 21:43
评分后是局部刷新页面，总有问题的

那是与论坛设置有关了吧

马黑黑

绿叶清舟 发表于 2024-3-18 21:44
那是与论坛设置有关了吧

这个设置不了，就酱

执著

马黑黑 发表于 2024-3-18 21:31
50%表示 left 或 top 处在父元素的一半，你要考虑的问题是，你要定位的东西它是有宽度和高度的

也就是要在具体的帖子中看放在什么位置妥当，如果仅仅只发个音乐，不要任何其他背景，那就用top:50%;
left:50%; 对吧？

马黑黑

执著 发表于 2024-3-18 23:18
也就是要在具体的帖子中看放在什么位置妥当，如果仅仅只发个音乐，不要任何其他背景，那就用top:50%;
le ...

放在哪随意的，协调、方便操作就好

执著

老师，我将这个发帖，怎么不成功啊？我在代码编辑框预览过，可以呀！敬请赐教！我刷新就有了，老师看看我的代码是不是对的，我糊弄了两天，第一部分想着加个背景图，代码如下：

<style>
#papa {
                margin: -70px 0 0 calc(50% - 759px);
                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[j].style.background = `linear-gradient(${getColor()},${getColor()})`;
        }
};

function getColor(){
        return `#${Math.random().toString(16).substr(-6)}`;
};
</script>

马黑黑

小辣椒

这个我都没有看见过

前年这个时候上来还很少的

马黑黑

执著 发表于 2024-3-20 21:54
老师，我将这个发帖，怎么不成功啊？我在代码编辑框预览过，可以呀！敬请赐教！代码如下：

这是没有问题的，除了帖子居中没算好：

1. <style>
   
2. #papa {
   
3.         margin: -70px 0 0 calc(50% - 924px);
   
4.         width: 1680px;
   
5.         height: 1050px;
   
6.         background: url('https://pic.imgdb.cn/item/65fae6949f345e8d03c5d3d3.jpg') no-repeat center/cover;
   
7.         box-shadow: 3px 3px 20px #000;
   
8.         position: relative; overflow: hidden; }   
   
9. .wrap {
   
10.         margin: auto;
    
11.         left:0;
    
12.         top: 0;
    
13.         right: 0;
    
14.         bottom: 0;
    
15.         width: 300px;
    
16.         height: 300px;
    
17.         perspective: 1800px;
    
18.         position: absolute;
    
19.         animation: rot 10s linear infinite;
    
20. }
    
21. .flower {
    
22.         width: 50%;
    
23.         height: 50%;
    
24.         border-radius: 0 100%;
    
25.         background-color: #ccc;
    
26.         opacity: .85;
    
27.         transform-origin: 100% 100%;
    
28.         transform-style: preserve-3d;
    
29.         position: absolute;
    
30. }
    
31. 
    
32. @keyframes rot { to { transform: rotate(1turn); } }
    
33. </style>
    
34. 
    
35. <div id="papa">
    
36. <div class="wrap"></div>
    
37. 
    
38. <script>
    
39. let wrap = document.querySelector('.wrap');
    
40. let flag = true;
    
41. let str = '';
    
42. for(j=0; j< 5; j++) {
    
43.         str += `<div class='flower' style='background: linear-gradient(${getColor()}, ${getColor()}); transform: rotate(${72*j}deg)'></div>`;
    
44. }
    
45. wrap.innerHTML = str;
    
46. let au = document.createElement('audio');
    
47. au.src = "https://od.lk/s/NzBfMTY1MDgwODBf/001-Himesh%20Reshammiya-Teri%20meri%20kahani.mp3";
    
48. au.autoplay = flag;
    
49. au.loop = true;
    
50. au.style.display = 'none';
    
51. wrap.appendChild(au);
    
52. 
    
53. let tt = setInterval(setColor, 1000);
    
54. 
    
55. wrap.onclick = function(){
    
56.         flag ? (au.pause(), this.style.animationPlayState = 'paused', flag = false) : (au.play(), this.style.animationPlayState = 'running', flag = true);
    
57. };
    
58. 
    
59. function setColor(){
    
60.         let petal = document.querySelectorAll('.flower');
    
61.         for(j=0; j< petal.length; j++){
    
62.                 petal[j].style.background = `linear-gradient(${getColor()},${getColor()})`;
    
63.         }
    
64. };
    
65. 
    
66. function getColor(){
    
67.         return `#${Math.random().toString(16).substr(-6)}`;
    
68. };
    
69. </script>

复制代码

马黑黑

小辣椒 发表于 2024-3-20 22:00
这个我都没有看见过

前年这个时候上来还很少的

是的吧

执著

马黑黑 发表于 2024-3-20 22:00
这是没有问题的，除了帖子居中没算好：

居中应该如何调最好？

执著

我就按老师教的宽度除以2再减81，总是好像偏了点

小辣椒

执著 发表于 2024-3-20 22:03
我就按老师教的宽度除以2再减81，总是好像偏了点

是加81  我已经给你改好了，你去看看