马黑黑 发表于 2023-6-25 20:18

紫罗兰花语

本帖最后由 马黑黑 于 2023-6-25 20:19 编辑 <br /><br /><style>
#mydiv {
      margin: 20px auto;
      width: 700px;
      min-height: 400px;
      border-radius: 16px;
      border: 3px dotted purple;
      background: #eee url('https://638183.freep.cn/638183/t23/2/zll.jpg') no-repeat 95% 50%;
      background-blend-mode: multiply;
      padding: 20px;
      position: relative;
      --state: paused;
}
#mydiv::before, #mydiv::after {
      position: absolute;
      content: '';
}
#mydiv::before {
      width: 50px;
      height: 50px;
      right: 100px;
      top: 60px;
      border-radius: 50%;
      background: conic-gradient(teal,rebeccapurple,purple,tan);
      -webkit-mask: radial-gradient(transparent 3px, red 0);
      box-shadow: 0 0 4px gray;
      cursor: pointer;
      animation: rot 6s infinite linear var(--state);
}
#mydiv::after {
      content: '紫罗兰花语';
      left: 50%;
      top: -22px;
      transform: translate(-50%);
      background: linear-gradient(purple,rebeccapurple);
      clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
      font: bold 24px/40px sans-serif;
      text-shadow: 1px 1px 2px #000;
      color: #ccc;
      padding: 0 40px;
}
#mydiv > p { margin: 10px 0; font-size: 16px; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
        <p>总花语：</p>
        <blockquote>永恒的美与爱、质朴、美德</blockquote>
        <p>寓意：</p>
        <blockquote>永恒的魅力</blockquote>
        <p>紫色：</p>
        <blockquote>在梦境中爱上你，对我而言你永远那么美</blockquote>
        <p>白色：</p>
        <blockquote>让我们抓住幸福的机会吧</blockquote>
        <p>蓝色：</p>
        <blockquote>警戒、忠诚，我将永远忠诚。</blockquote>
        <p>紫罗兰的花色虽然多变，但是花型基本不变，一直保持着同一种姿态，比较永恒。花给送给朋友、家人等，是送去自己最真诚的祝福。它通常在每年的4到5月开花，有的地方会在5到6月份，放到房间内的阳台上，经过微风的吹动，那花瓣与绿叶相间在一起，给人一股清凉的感觉，有很好的装饰作用。</p>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2037951747" autoplay="autoplay" loop="loop"></audio>

<script>
(function () {
      let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

醉美水芙蓉 发表于 2023-6-25 20:36

马黑黑 发表于 2023-6-25 20:58

醉美水芙蓉 发表于 2023-6-25 20:36
欣赏学习老师佳作！

{:4_190:}

红影 发表于 2023-6-25 21:11

黑黑自己把这个边框封装起来了呢，漂亮{:4_199:}

红影 发表于 2023-6-25 21:12

色彩配置非常适合这个主题呢{:4_204:}

梦油 发表于 2023-6-25 21:17

此贴的知识性、娱乐性、观赏性极佳。谢谢分享。

马黑黑 发表于 2023-6-25 21:53

梦油 发表于 2023-6-25 21:17
此贴的知识性、娱乐性、观赏性极佳。谢谢分享。

{:4_190:}

马黑黑 发表于 2023-6-25 21:55

红影 发表于 2023-6-25 21:12
色彩配置非常适合这个主题呢

不是很差

马黑黑 发表于 2023-6-25 21:55

红影 发表于 2023-6-25 21:11
黑黑自己把这个边框封装起来了呢，漂亮

简单地放点东东而已

南无月 发表于 2023-6-25 22:22

欣赏美学大师佳作，完美诠释简洁就是美{:4_187:}又学到了

马黑黑 发表于 2023-6-25 22:38

南无月 发表于 2023-6-25 22:22
欣赏美学大师佳作，完美诠释简洁就是美又学到了

嗯，不复杂

红影 发表于 2023-6-25 23:45

马黑黑 发表于 2023-6-25 21:55
不是很差

是啊，这个色彩特别合适。

马黑黑 发表于 2023-6-25 23:46

红影 发表于 2023-6-25 23:45
是啊，这个色彩特别合适。

色彩有很多配法的

红影 发表于 2023-6-25 23:46

马黑黑 发表于 2023-6-25 21:55
简单地放点东东而已

主要是这个图片找的好。{:4_187:}

马黑黑 发表于 2023-6-25 23:47

红影 发表于 2023-6-25 23:46
主要是这个图片找的好。

图片很多的

樵歌 发表于 2023-6-26 07:25

这个非常有适用性，哪天写几个字来抄一下看。{:4_189:}

小文 发表于 2023-6-26 07:39

真唯美！

马黑黑 发表于 2023-6-26 08:18

小文 发表于 2023-6-26 07:39
真唯美！

早上好

南无月 发表于 2023-6-26 20:22

马黑黑 发表于 2023-6-25 22:38
嗯，不复杂
复杂的代码在后台。{:4_173:}

梦缘 发表于 2023-6-26 20:50

问好老师，欣赏精彩佳作，谢谢分享！{:4_185:}
页: [1] 2 3 4
查看完整版本: 紫罗兰花语