论坛 › 欢乐水吧 › 鲜花献给最美劳动者

马黑黑 发表于 2022-5-1 17:01

鲜花献给最美劳动者

<style>
.outer {
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300px;
        height: 300px;
        filter: drop-shadow(0px 0px 100px gray);
        perspective: 1800px;
        position: relative;
}
.flower {
        width: 50%;
        height: 50%;
        border-radius: 0 100%;
        background-color: #ccc;
        opacity: .85;
        transform-origin: 100% 100%;
        transform-style: preserve-3d;
        position: absolute;
}

</style>

<div class="outer">
        <div class="flower"></div>
</div>

<script>
let outer = document.querySelector('.outer');
let str = '';
for(j=0; j< 8; j++) {
        let c1 = `#${Math.random().toString(16).substr(-6)}`;
        let c2 = `#${Math.random().toString(16).substr(-6)}`;
        str += `<div class='flower' style='background-image: linear-gradient(${c1}, ${c2}); transform: rotate(${45*j}deg);'></div>`;
}
outer.innerHTML = str;
let au = document.createElement('iframe');
au.src = "https://music.163.com/outchain/player?type=2&id=29401808&auto=1&height=66";
au.style.display = 'none';
outer.appendChild(au);
</script>

马黑黑 发表于 2022-5-1 17:03

本帖最后由 马黑黑 于 2022-5-1 17:06 编辑

代码分享：

<style>
.outer {
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 300px;
      height: 300px;
      filter: drop-shadow(0px 0px 100px gray);
      perspective: 1800px;
      position: relative;
}
.flower {
      width: 50%;
      height: 50%;
      border-radius: 0 100%;
      background-color: #ccc;
      opacity: .85;
      transform-origin: 100% 100%;
      transform-style: preserve-3d;
      position: absolute;
}
</style>

<div class="outer"></div>

<script>
let outer = document.querySelector('.outer');
let str = '';
for(j=0; j< 8; j++) {
      let c1 = `#${Math.random().toString(16).substr(-6)}`;
      let c2 = `#${Math.random().toString(16).substr(-6)}`;
      str += `<div class='flower' style='background-image: linear-gradient(${c1}, ${c2}); transform: rotate(${45*j}deg);'></div>`;
}
outer.innerHTML = str;
</script>

马黑黑 发表于 2022-5-1 17:04

修改基点，就是如下这句（可以的话还有其他东东也可修改），

transform-origin: 100% 100%;

会得到意想不到的形态

加林森 发表于 2022-5-1 17:47

老黑制作得真漂亮，赞！{:4_199:}

梦油 发表于 2022-5-1 17:48

黑黑朋友节日好！最美的鲜花，献给最美的劳动者。劳动者最光荣！

马黑黑 发表于 2022-5-1 17:51

梦油 发表于 2022-5-1 17:48
黑黑朋友节日好！最美的鲜花，献给最美的劳动者。劳动者最光荣！

是的

马黑黑 发表于 2022-5-1 17:51

加林森 发表于 2022-5-1 17:47
老黑制作得真漂亮，赞！

这个还看的过去吧

加林森 发表于 2022-5-1 17:59

马黑黑 发表于 2022-5-1 17:51
这个还看的过去吧

相当漂亮的。{:4_190:}

马黑黑 发表于 2022-5-1 19:46

加林森 发表于 2022-5-1 17:59
相当漂亮的。

一般般的吧

加林森 发表于 2022-5-1 19:54

马黑黑 发表于 2022-5-1 19:46
一般般的吧

不一般的。我喜欢你制作的。

马黑黑 发表于 2022-5-1 20:05

加林森 发表于 2022-5-1 19:54
不一般的。我喜欢你制作的。

谢谢认同

红影 发表于 2022-5-1 20:32

随机变色的花儿，真美啊{:4_187:}

红影 发表于 2022-5-1 20:40

马黑黑 发表于 2022-5-1 17:04
修改基点，就是如下这句（可以的话还有其他东东也可修改），

transform-origin: 100% 100%;


去试了，数值越大散得越开，越小越挤在一起{:4_173:}

马黑黑 发表于 2022-5-1 21:03

红影 发表于 2022-5-1 20:40
去试了，数值越大散得越开，越小越挤在一起

基点不仅仅是改大改小，而是改它处在元素的什么位置

马黑黑 发表于 2022-5-1 21:03

红影 发表于 2022-5-1 20:32
随机变色的花儿，真美啊

一般美

加林森 发表于 2022-5-1 21:27

马黑黑 发表于 2022-5-1 20:05
谢谢认同

不客气啊。

马黑黑 发表于 2022-5-1 21:53

加林森 发表于 2022-5-1 21:27
不客气啊。

应该的

加林森 发表于 2022-5-1 22:37

马黑黑 发表于 2022-5-1 21:53
应该的

明天来学习了，今天有点累了。

红影 发表于 2022-5-2 10:20

马黑黑 发表于 2022-5-1 21:03
基点不仅仅是改大改小，而是改它处在元素的什么位置

嗯嗯，因为位置变化，导致形态发生变化。

红影 发表于 2022-5-2 10:21

马黑黑 发表于 2022-5-1 17:04
修改基点，就是如下这句（可以的话还有其他东东也可修改），

transform-origin: 100% 100%;


看到你取 0 100% 变成了相框一样了{:4_173:}

查看完整版本: 鲜花献给最美劳动者