论坛 › 欢乐水吧 › 赠 四海八荒 （水晶按钮学习）

红影 发表于 2022-4-7 11:04

赠 四海八荒 （水晶按钮学习）

<style>
/* 底图 */
.mnDiv {
        width: 1200px;
        height: 640px;
      top:100px;
        position: relative;
        left: -302px;
        background: #444 url('https://pic.imgdb.cn/item/624dc155239250f7c594f418.jpg') no-repeat;
        position: relative;
        opacity: 0.98;
      overflow: hidden;
      box-shadow: 4px 4px 5px #888;
      border-radius:16px;
}
/* 摇摆的榆钱枝 */
.mnDiv-b-img {
        left: 100px;
        top: -2px;
      width: 260px;
      height: 360px;
      position: absolute;

      transform: rotate(-2deg);
      transform-origin: 38% 0;
      animation: gua 2.5s linear infinite alternate;
}
@keyframes gua { 100% { transform: rotate(4deg); } }
/* 竖排折行诗词 */
.mnDiv::before {
      content: attr(data-tt);
      position: absolute;
      left: 880px;
      top: 50px;
      padding: 14px;
      font: bold 1.6em / 1.5em Monospace;
      color: #C1FFC1;
      text-shadow: 2px 2px 6px #98FB98;
      writing-mode: vertical-rl;
      white-space: pre;
}
/* 动图平铺 */
.mnDiv::after {
      content: '';
      position: absolute;
      width: 1000px;
      height: 360px;
      left: 160px;
      top: 60px;      
        opacity: .75;
      background: url('https://pic.imgdb.cn/item/62404cdf27f86abb2a782902.gi');
}
/* 水晶按钮主体 */
.crystal {
      
      width: 60px;
      height: 60px;
      left: 320px;
      top: 410px;
      background: linear-gradient(120deg, #4FE846, #f6a337);
      border-radius: 50%;
      position: relative;
      cursor: pointer;
}
/* 按钮外圈的呼吸灯效果 */
.crystal::before {
      content: '';
      position: absolute;
      left: 0; top: 0; right: 0; bottom: 0;
      background: transparent;
      border-radius: 50%;
      box-shadow: 1px 1px 12px #336600, 0 0 4px green inset;
      animation: glow 1s linear infinite alternate;
}
/* 按钮抛光 */
.crystal::after {
      content: '';
      width: 50%;
      height: 50%;
      position: absolute;
      left: 10%; top: 20%;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
      filter: blur(5px);
}
@keyframes glow {
      from { filter: blur(0px); }
      to { filter: blur(3px); }
}
.crystal:hover { opacity: 0.8; }
/* 黑黑原创文字走马灯 */
.flyBox {
         --w: 80px;
         width: var(--w);
      position: absolute;
      left: 310px;
      top: 496px;
         overflow: hidden;
      }
.flyBox div {
      word-break: keep-all;
      white-space: nowrap;
      font: normal 22px /24px '楷体','微软雅黑';
      color:#ccffcc; text-shadow:1px 1px 2px rgba(0, 0, 0, .8);
      animation: fly 6s linear infinite;
      }
@keyframes fly {
      from { transform: translateX(100%); }
      to { transform: translateX(calc(-10% - var(--w))); }
      }
</style>

<div class="mnDiv" data-tt="《渔家傲》 金段克己&#10;&#10;春去春来谁作主。怨他昨夜江头雨。&#10;把酒问春春不语。头懒举,乱红飞过秋千去。&#10;芳草澹烟江上路。鹧鸪声里斜阳暮。&#10;风外榆钱无意绪。空自舞。如何买得青春住。">

<div class="mnDiv-b-img">
      <img src="https://pic.imgdb.cn/item/624e3181239250f7c501a0a2.png" alt="" /></div>
<div id="crystal"class="crystal"></div>

<div class="flyBox">
      <div>归去来辞</div>
</div>
</div>
<audio id="ymusic" src="http://music.163.com/song/media/outer/url?id=1935058675.mp3" autoplay="autoplay"

loop="loop"></audio>

<script>
var mu = document.getElementById('ymusic');
var mbtn = document.getElementById('crystal');
mu.autoplay ? mbtn.style.animationPlayState="running" : mbtn.style.animationPlayState="paused";mu.addEventListener("ended", function(){ mbtn.style.animationPlayState="paused"; })
mbtn.onclick = function(){ mu.paused ? (mu.play(), mbtn.style.animationPlayState="running") : (mu.pause(),mbtn.style.animationPlayState="paused"); }
</script>
<br><br><br><br><br><br><br><br><br><br><br>

红影 发表于 2022-4-7 11:07

图片中的榆钱枝来自四海八荒，我用扣图变透明后用在了帖子里。@四海八荒
感谢四海带来的春的气息，已经居家7天了，而且后面还遥遥无期，这个春天完全无法出去赏春。有四海的这枝榆钱，觉得很开心了（四海的原图拍得很漂亮，扣图后效果有点差：）

红影 发表于 2022-4-7 11:09

感谢黑黑的水晶按钮代码，看看配色和这个底图挺吻合，就没去动，只是把最外围的蓝色换了深绿。感谢黑黑。

红影 发表于 2022-4-7 11:10

这个帖子里的平铺动图用了绿色的飞叶，队长来看看，你那帖子可能用这个动图比花瓣更好看点吧{:4_173:}

红影 发表于 2022-4-7 11:12

哦，还学了一个从右向左排列的诗词方式，发现这个折行字数稍微多些也可以的，当然这个词牌不算太长@马黑黑 {:4_173:}

加林森 发表于 2022-4-7 11:12

红影这个制作真漂亮，把老黑的按钮放上去真好看，音乐很纯的古筝。好制作！{:4_199:}

梦油 发表于 2022-4-7 11:17

图、文、声、影相互映衬、精妙绝伦。

红影 发表于 2022-4-7 11:20

https://pic.imgdb.cn/item/624e57de239250f7c53b14c1.jpg

四海发来的榆钱，看着长得真好。春光已经如此明媚了，能出去的都多转转，春色不等人{:4_204:}

马黑黑 发表于 2022-4-7 12:27

整体效果很优雅。赞。

按钮可以加入手型：cursor: pointer;

四海八荒 发表于 2022-4-7 13:27

随便一张照片，在影子手里就活了起来，谢谢影子

马黑黑 发表于 2022-4-7 13:32

红影 发表于 2022-4-7 11:07
图片中的榆钱枝来自四海八荒，我用扣图变透明后用在了帖子里。@四海八荒
感谢四海带来的春的气息，已经居 ...

口含榆钱枝，春去春来谁人痴？{:4_170:}

樵歌 发表于 2022-4-7 15:33

图意、词意与古筝音三者相得益彰！真太优雅了。{:4_178:}

樵歌 发表于 2022-4-7 15:35

师妹创造性的运用了马术，这效果简直太让人赞叹了。{:4_176:}

红影 发表于 2022-4-7 19:09

加林森 发表于 2022-4-7 11:12
红影这个制作真漂亮，把老黑的按钮放上去真好看，音乐很纯的古筝。好制作！

谢谢队长，这个里面就是绿叶的动图，队长可以收一下。

红影 发表于 2022-4-7 19:10

梦油 发表于 2022-4-7 11:17
图、文、声、影相互映衬、精妙绝伦。

谢谢梦油，我不太会音画，都是跟在他们后面学的呢。欢迎梦油一起来学习{:4_187:}

加林森 发表于 2022-4-7 19:10

红影 发表于 2022-4-7 19:09
谢谢队长，这个里面就是绿叶的动图，队长可以收一下。

嗯嗯，我看看。

红影 发表于 2022-4-7 19:11

马黑黑 发表于 2022-4-7 12:27
整体效果很优雅。赞。

按钮可以加入手型：cursor: pointer;

哦哦，光是记得鼠标划过变透明的事了，忘记这个手型。我去加上去。谢谢黑黑{:4_187:}

红影 发表于 2022-4-7 19:14

四海八荒 发表于 2022-4-7 13:27
随便一张照片，在影子手里就活了起来，谢谢影子

看到四海发来的图片很开心，满满的春的气息呢。图片很赞{:4_187:}

红影 发表于 2022-4-7 19:18

马黑黑 发表于 2022-4-7 13:32
口含榆钱枝，春去春来谁人痴？

榆钱真的能吃的呢。搜曲子的时候，看到一首《采榆钱》的歌曲，就是说可以吃的。
感觉和帖子的词意不太符合，就没用在帖子里，等翻页了，我把歌曲贴上来{:4_173:}

红影 发表于 2022-4-7 19:20

樵歌 发表于 2022-4-7 15:33
图意、词意与古筝音三者相得益彰！真太优雅了。

正好想做个水晶按钮，看到四海那张图片，就去找相应的图图和诗词，于是有了这个帖子{:4_173:}

查看完整版本: 赠 四海八荒 （水晶按钮学习）