论坛 › 欢乐水吧 › 《望春风》（to 马黑黑）学习制作一个

红影 发表于 2022-1-26 15:06

《望春风》（to 马黑黑）学习制作一个

<style type="text/css">

.paBox {
        margin: 10px auto;
        width: 1280px;
        height: 645px;
        position: relative;
        background: #000 url('https://pic.imgdb.cn/item/61f0d2b12ab3f51d914f576b.jpg') no-repeat;
        left: -342px;
}

.txtBox {
        position: absolute;
      left:720px; top: 86px;
      padding: 20px;
      width: 360px;
        color: #990000;
        column-count: 2;
        background: transparent;
}

.txtPan {
        position: absolute;
        left:310px; top: 480px;
      width: 240px;
      height: 80px;
      line-height: 80px;
      color: olive;
      background: transparent;
      border: 10;
      border-radius: 50%;
      box-shadow: 2px 2px 3px 1px rgba(0,0,0,.4);
      font-size: 14px;
      text-align: center;      
        cursor: pointer;
}

.paBox::before, .paBox::after, .soBox::before, .soBox::after {
        content: "";
        position: absolute;
        width: 500px; height: 2px;
        background: silver;
        left: 290px; top: 280px;
        opacity: 0.2;
        transform-origin: center center;
}
.paBox::before { animation: fly 2s linear infinite alternate;}
.paBox::after { height: 3px; animation: fly 5s linear infinite;}
.soBox::before { animation: fly 3s linear infinite;}
.soBox::after { height: 4px; animation: fly 1s linear infinite alternate;}

@keyframes fly { 100% { transform: rotate(360deg); } }

</style>

<div id="paBox" class="paBox">
      <div class="soBox"></div>
      <div class="txtPan"><span id="gc">显示歌词</span>&nbsp; <span id="play">音乐暂停</span></div>
      <div id="txtBox" class="txtBox">
<p>谁说女人心难猜<br><br>
欠个人来爱<br><br>
花开当折直需摘<br><br>
青春最可爱<br><br>
自己买花自己戴<br><br>
爱恨多自在<br><br>
只为人生不重来<br><br>
何不放开怀<br><br></p>
      </div>
</div>
<audio id="aud" src="https://s1.ananas.chaoxing.com/audio/a8/19/a0/44413517271b663b846fb9eb73b1c8bb/audio.mp3" autoplay="autoplay" loop="loop"></audio>

<script language="javascript">

var gc = document.getElementById('gc');
var txtgc = document.getElementById('txtBox');
var play = document.getElementById('play');
var au = document.getElementById('aud');

play.onclick = function() {
        au.paused ? (au.play(), play.innerHTML='音乐暂停') : (au.pause(), play.innerHTML='音乐播放');
}

gc.onclick = function() {
        txtgc.style.display == 'block' ? (txtgc.style.display = 'none', gc.innerHTML='显示歌词') : (txtgc.style.display = 'block', gc.innerHTML='歌词隐藏');
}

</script>

红影 发表于 2022-1-26 15:10

手头正好有这个音乐地址，就用来做个帖子。记得是歌曲的，没想到是音乐。
学习一下黑黑的散射光线制作{:4_187:}

红影 发表于 2022-1-26 15:12

还是有点问题，用display: none就没法调位置，用background: transparent结果一上来就有歌词。

在本地试验时两行歌词的高度怎么都不一致，折腾半天。本来想不管了，就这样发了吧。结果到论坛里却是对齐了，真是意外之喜{:4_173:}

红影 发表于 2022-1-26 15:14

@马黑黑做的不好，不成敬意{:4_187:}

马黑黑 发表于 2022-1-26 16:13

红影 发表于 2022-1-26 15:12
还是有点问题，用display: none就没法调位置，用background: transparent结果一上来就有歌词。

在本地试 ...

先调整好位置，合适了再设置为none

马黑黑 发表于 2022-1-26 16:14

红影 发表于 2022-1-26 15:14
@马黑黑做的不好，不成敬意

不错的，简洁大方，颜色搭配很好

加林森 发表于 2022-1-26 17:28

很好看的一张图片，制作上加了透明，还有射线十分光芒，播放器也放在图片左边，歌词也帖上了。真美的制作。为红影点赞！{:4_199:}

马黑黑 发表于 2022-1-26 19:16

同点{:5_106:}

红影 发表于 2022-1-26 20:37

马黑黑 发表于 2022-1-26 16:13
先调整好位置，合适了再设置为none

还可以这样啊。这倒是个奇怪的方法{:4_173:}

红影 发表于 2022-1-26 20:38

马黑黑 发表于 2022-1-26 16:14
不错的，简洁大方，颜色搭配很好

我家了个透明按钮，觉得那个单纯文字不好看{:4_173:}

红影 发表于 2022-1-26 20:39

加林森 发表于 2022-1-26 17:28
很好看的一张图片，制作上加了透明，还有射线十分光芒，播放器也放在图片左边，歌词也帖上了。真美的制作。 ...

谢谢队长，队长点评得这么仔细啊，开心{:4_187:}

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

马黑黑 发表于 2022-1-26 19:16
同点

今天看你的帖子，这些旋转光线还能做出很多效果。等空了继续练习{:4_173:}

马黑黑 发表于 2022-1-26 20:59

红影 发表于 2022-1-26 20:40
今天看你的帖子，这些旋转光线还能做出很多效果。等空了继续练习

想象力很重要，技术手段不可少

马黑黑 发表于 2022-1-26 21:00

红影 发表于 2022-1-26 20:38
我家了个透明按钮，觉得那个单纯文字不好看

我更喜欢文字，文字对识字的人来说更直观{:4_170:}

马黑黑 发表于 2022-1-26 21:00

红影 发表于 2022-1-26 20:37
还可以这样啊。这倒是个奇怪的方法

这是设计师经常做的

红影 发表于 2022-1-26 21:20

马黑黑 发表于 2022-1-26 20:59
想象力很重要，技术手段不可少

技术是保障啊，没技术光有想象也没法去实现呢。

红影 发表于 2022-1-26 21:21

马黑黑 发表于 2022-1-26 21:00
我更喜欢文字，文字对识字的人来说更直观

好吧，萝卜青菜各有所爱{:4_173:}

红影 发表于 2022-1-26 21:23

马黑黑 发表于 2022-1-26 21:00
这是设计师经常做的

我觉得这有点欺骗电脑的感觉。不过先用用display: none的确没法调位置，为这折腾半天又半天的，怎么调它都不动{:4_173:}

马黑黑 发表于 2022-1-26 21:52

红影 发表于 2022-1-26 21:23
我觉得这有点欺骗电脑的感觉。不过先用用display: none的确没法调位置，为这折腾半天又半天的，怎么调它 ...

在做的时候，总是一个一个去尝试，最后才定性

马黑黑 发表于 2022-1-26 21:52

红影 发表于 2022-1-26 21:21
好吧，萝卜青菜各有所爱

就是

查看完整版本: 《望春风》（to 马黑黑）学习制作一个