自动变色的花朵（已关联音乐） - 第3页 - 欢乐水吧 - 花潮论坛

执著发表于 2024-3-18 11:24

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

马黑黑 发表于 2024-3-18 13:27

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

我的帖子编辑器使用严格模式，每一个函数末尾都需要用分号结束语句才合法。下面的代码是在帖子一楼代码基础上加了分号，可以在帖子编辑器那里正常预览：
<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>另外，将一楼的代码存为本地 .html 文件在双击打开，会很正常

执著发表于 2024-3-18 21:17

马黑黑发表于 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:31

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

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

绿叶清舟 发表于 2024-3-18 21:36

一评分花会躲起来吗

马黑黑 发表于 2024-3-18 21:37

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

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

绿叶清舟 发表于 2024-3-18 21:41

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

以为俺这出问题了

马黑黑 发表于 2024-3-18 21:43

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

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

绿叶清舟 发表于 2024-3-18 21:44

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

那是与论坛设置有关了吧

马黑黑 发表于 2024-3-18 21:45

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

这个设置不了，就酱

执著发表于 2024-3-18 23:18

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

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

马黑黑 发表于 2024-3-19 12:38

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

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

执著发表于 2024-3-20 21:54

本帖最后由执著于 2024-3-20 22:00 编辑

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

<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.style.background = `linear-gradient(${getColor()},${getColor()})`;
   }
};

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

马黑黑 发表于 2024-3-20 21:58

本帖最后由马黑黑于 2024-3-20 21:59 编辑 <br /><br /><style>
#papa {
margin: 0 0 0 calc(50% - 924px);
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 22:00

这个我都没有看见过{:4_198:}

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

马黑黑 发表于 2024-3-20 22:00

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

这是没有问题的，除了帖子居中没算好：<style>
#papa {
margin: -70px 0 0 calc(50% - 924px);
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 22:00

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

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

是的吧

执著发表于 2024-3-20 22:01

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

居中应该如何调最好？

执著发表于 2024-3-20 22:03

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

小辣椒 发表于 2024-3-20 22:05

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

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

页: 1 2 [3] 4

花潮论坛's Archiver