论坛 › 欢乐水吧 › 安全感

醉美水芙蓉 发表于 2022-9-26 21:53

安全感

本帖最后由 醉美水芙蓉 于 2022-9-26 21:52 编辑 <br /><br /><style>
.container {
margin: 0px auto;
width: 1024px;
height: 600px;
overflow: hidden;
position: relative;
}
.photo {width: 100%;
height: 100%;
position: absolute;
box-shadow: 0px 0px 0px 1px #ffffff, 0px 0px 0px 5px #880000;
top:0px; left:0px;filter:contrast(140%)brightness(100%);
opacity: 0;
animation-name: round ;animation-duration: 32s;
               animation-iteration-count: infinite;
                animation-timing-function: linear;
}

@keyframes round{
25% {
    opacity: 1;
}
40% {
    opacity: 0;
}
}

img:nth-child(1) {background:url(https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/18b5c198bdd59317fe6820919bf43ac4_preview_raw.jpg)0 0/100% 100%;
animation-delay: 28s;
}
img:nth-child(2) { )0 0/100% 100%;
animation-delay: 24s;
}
img:nth-child(3) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/6cfaf2b01054de5bf32e46c67dcb22de_preview.jpg)0 0/100% 100%;
animation-delay: 20s;
}
img:nth-child(4) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9b3114a2ae4ba5a77eca00850fbb650c.jpg)0 0/100% 100%;
animation-delay: 16s;
}
img:nth-child(5) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/123d4c6b19b6edc0d07acbb8bd38a29f.jpg)0 0/100% 100%;
animation-delay: 12s;
}
img:nth-child(6) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/16f30e9b379a77fd846ddf2cb18c532f.jpg)0 0/100% 100%;
animation-delay: 8s;
}
img:nth-child(7) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e5881593cfabb6c21cd46c44730f9d04.jpg)0 0/100% 100%;
animation-delay: 4s;
}
img:nth-child(8) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/59e56d89ac14bffb9c139c1330f7bb39.jpg)0 0/100% 100%;
animation-delay: 0s;
}

.stop img:nth-child(1) {
animation-play-state: paused;
}
.stop img:nth-child(2){
animation-play-state: paused;
}
.stopimg:nth-child(3){
animation-play-state: paused;
}
.stop img:nth-child(4){
animation-play-state: paused;
}
.stop img:nth-child(5){
animation-play-state: paused;
}
.stop img:nth-child(6){
animation-play-state: paused;
}
.stop img:nth-child(7) {
animation-play-state: paused;
}
.stop img:nth-child(8) {
animation-play-state: paused;
}
</style>
<div style="z-index: 127;width: 1024px; height: 600px; margin-top:50px; margin-left:-220px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/f6ec77de5f1a9add8f4e79c9bb4dac0f.mp4.jpg)0 0/100%100%,linear-gradient(50deg, #000080, #ff0000, #000000, #00f000);text-align: center;">
<div class="HT">
<div class="container"id="testImg"><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><imgclass='photo '></div>
<audio autoplay=""id="MusicPlayer"src=" https://music.163.com/song/media/outer/url?id=519943114.mp3" loop="" ></audio>
<div class="img_border" id="aplay"style="width: 1024px; height: 1024px;background: linear-gradient(45deg, rgba(253, 4, 18, 0.51) 14%,rgba(60, 231, 224, 0) 42%,rgba(142, 68, 173, 0) 54%,rgba(10, 4, 248, 0.47) 85%),url(http://pan.yinhuabbs.cn/view.php/fd4f5cd049943452d4b0aba78e1405da.png)0 0/100% 100%;margin: -220px auto;transform:rotate(360deg)scale(1.2);position: absolute;top:0px; left:0px;"></div>
<div class="btn">
<div   id="testImg" onclick="bf()">
<inputtype="button" id="testBtn" value="暂停"style="width: 80px; height: 40px;border-radius: 0%;color: #000000;font-size:20px;font-weight:bold;border:1px solid #000000;"></input ></div></div>
<div class="lrc">
<ul id="ullrc">
         </ul>
      </div>
</div>
</div>
<script >
var image = document.getElementById("testImg"),
    button = document.getElementById("testBtn");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '暂停') {
            image.classList.add('stop');
            this.value = '播放';
      } else {
            image.classList.remove('stop');
            this.value = '暂停';
      }
    };
}
</script>

<style type="text/css">
.HT{
    width: 1000px;position: absolute;top:0px; left:0px;
}
#MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;
}
.btn{
    display: block;z-index: 300;
    margin: 0px 0px;position: absolute;top:540px; left:20px;
}
.lrc{
    width: 870px;
    height: 140px;
    overflow: hidden;filter:drop-shadow(#FFFfff 1px 0 0)drop-shadow(#FFFfff 0 1px 0)drop-shadow(#FFFfff -1px 0 0) drop-shadow(#FFFfff 0 -1px0);
    display: block;position: absolute;top:500px; left:60px;z-index: 30;
    margin: 0 auto;
}
.lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 80px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 0px;
    color: #000078;transform: translate(0%,0%);
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
    text-align: center;
    display: block;
    width: 100%;
    margin: 0 auto;-webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-color: red;
   background-image:linear-gradient(50deg, #fff000, #ff0000, #000000, #00f000);
   background-repeat:no-repeat;
   background-position: -800px 0;
   -webkit-animation:loop 3s linear infinite;

}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 45px;
    color: #ff0000;transform: translate(0%,0%);
    font-weight: bold;
}

@-webkit-keyframes loop{
   0%{background-position: -800px 0;}
   100%{background-position: -0 0;}
}

/*mv动画*/
.img_border{margin: -220px auto;position: absolute;top:0px; left:0px;z-index:10;
    display: block;
    width: 1024px; height: 1024px;animation:rotating 10s linear infinite;}
.img_border #aplay{ }

@keyframes rotating{0%{
      background-position: 0% 0%;filter:hue-rotate(360deg);transform:rotate(0deg)scale(1.2);
    }
    100%{
      background-position: 0% 0;filter:hue-rotate(0deg);transform: rotate(360deg)scale(1.2);
    }
}

</style>

<script>var lrc =`安全感-金池
作词 : 浅紫
作曲 : 徐伟铭
音乐出品公司：众匠音乐
LRC编辑：醉美水芙蓉
其实有时相爱很短，其实有时相处更难
我和你维系的坦然
反面看，却也，心酸
不管后来我们怎样，会是沉默或是遗憾
至少我没让你失望
离开的，不甘心，才为难
Oh there's nothing better than you
我们都要一个安全感
So there's nothing better than you
那就用爱来交换
你有没有像我一样，我猜你也舍不得放
落叶离开北风以后
也别太伤感，太悲观，相信爱
Oh there's nothing better than you
我们都要一个安全感
So there's nothing better than you
那就用爱来交换
谢谢这寂寞孤单，谢谢让我们成长，不算伤
我要的幸福也简简单单
笑的灿烂，哭的夸张，你是答案
Oh there's nothing better than you
我们都要一个安全感
So there's nothing better than you
那就用爱来交换
那就用爱来交换
谢谢欣赏！`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
      var twoParts = content.split("]");
      var time = twoParts.substr(1);
      var timeParts = time.split(":");
      var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}

var lrcArray = getLrcArray();

function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      $("ullrc").appendChild(li);
    }
}

inputLrc();

function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
    var lrc_li_height = 80, lrc_ul_height = 70;
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
    if (top < 0) {
      top = 0;
    }
    $("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");
    }
    $("ullrc").children.classList.add("active");
}

var turn = 0;

function getLrcIndex(){
    var time = $("MusicPlayer").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}

$("MusicPlayer").ontimeupdate = setPosition;
</script>
<script>
         function bf() {
            var audio = document.getElementById('MusicPlayer');
            var bf=document.getElementById("bf");
            if (audio !== null) {
                if (audio.paused) {
                  audio.play(); //audio.play();
                  bf.innerText="";
                } else {
                  audio.pause();
                  bf.innerText="";
                }
            }
      }
var image = document.getElementById("testImg"),
    button = document.getElementById("testBtn");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '暂停') {
            image.classList.add('stop');
            this.value = '播放';
      } else {
            image.classList.remove('stop');
            this.value = '暂停';
      }
    };
}
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()

{document.getElementById("aplay").className="img_border";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script>

马黑黑 发表于 2022-9-26 22:17

欣赏大作

醉美水芙蓉 发表于 2022-9-26 22:24

马黑黑 发表于 2022-9-26 22:17
欣赏大作

黑黑老师晚上好！本地测试没有问题，一发论坛代码不知哪里出了问题？

醉美水芙蓉 发表于 2022-9-26 22:26

马黑黑 发表于 2022-9-26 22:17
欣赏大作

这个本来是用黑黑老师的代码做歌词的，做不出来，不知是不是英文通不过？

起个网名好难 发表于 2022-9-26 22:30

<svg width="100%" height="100%" viewBox="0 0 1000 600"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
   <path id="MyPath"
         d="
      M 200 200
      m -150, -50
      a 200,100 0 1,0 400,0
      a 200,100 0 1,1 400,0
"/>
</defs>

<use xlink:href="#MyPath" fill="none" stroke="transparent"/>

<text font-family="Verdana" font-size="50" stroke="red" fill="yellow">
    <textPath xlink:href="#MyPath">
      点赞、欣赏、学习！
             <animate attributeName="startOffset" from="0" to ="1028" begin="0s" dur="10s" repeatCount="indefinite" />

    </textPath>
</text>
</svg>

马黑黑 发表于 2022-9-26 22:55

醉美水芙蓉 发表于 2022-9-26 22:26
这个本来是用黑黑老师的代码做歌词的，做不出来，不知是不是英文通不过？

英文的话，可以有 ' 这样的符号，比如 that's 。我没有测试过这个符号，因为考虑到歌词用了双引号，理论上可以接受这个符号。

醉美水芙蓉 发表于 2022-9-26 23:00

起个网名好难 发表于 2022-9-26 22:30
点赞、欣赏、学习！

年轻老师看看这个代码有啥问题？

醉美水芙蓉 发表于 2022-9-26 23:06

马黑黑 发表于 2022-9-26 22:55
英文的话，可以有 ' 这样的符号，比如 that's 。我没有测试过这个符号，因为考虑到歌词用了双引号，理论 ...

不知道是不是逗号的问题，以往歌词都没有用过逗号的？

小辣椒 发表于 2022-9-26 23:11

欣赏水芙蓉的精彩制作{:4_171:}

醉美水芙蓉 发表于 2022-9-26 23:11

小辣椒 发表于 2022-9-26 23:11
欣赏水芙蓉的精彩制作

辣椒美女晚上好！

大猫咪 发表于 2022-9-26 23:19

好棒的制作，画面真漂亮！ 这歌还是第一次听，非常好听！谢谢水芙蓉分享，真棒！

{:4_187:}{:4_199:}

马黑黑 发表于 2022-9-26 23:33

醉美水芙蓉 发表于 2022-9-26 23:06
不知道是不是逗号的问题，以往歌词都没有用过逗号的？

不是逗号，是分隔符。我刚测试，没问题。

起个网名好难 发表于 2022-9-27 06:27

醉美水芙蓉 发表于 2022-9-26 23:00
年轻老师看看这个代码有啥问题？

只觉得播放/暂停是反的

醉美水芙蓉 发表于 2022-9-27 06:42

大猫咪 发表于 2022-9-26 23:19
好棒的制作，画面真漂亮！ 这歌还是第一次听，非常好听！谢谢水芙蓉分享，真棒！

谢谢喵咪欣赏支持！

醉美水芙蓉 发表于 2022-9-27 06:43

马黑黑 发表于 2022-9-26 23:33
不是逗号，是分隔符。我刚测试，没问题。

谢谢黑黑老师指导，老师辛苦了！

醉美水芙蓉 发表于 2022-9-27 06:43

起个网名好难 发表于 2022-9-27 06:27
只觉得播放/暂停是反的

谢谢老师点评！

马黑黑 发表于 2022-9-27 07:09

醉美水芙蓉 发表于 2022-9-27 06:43
谢谢黑黑老师指导，老师辛苦了！

昨夜我发了一个英文歌词同步的，歌词用花潮LRC在线增强版测试，未发现问题。请检查代码的其他方面。你这里使用原生lrc歌词，其实也是要将歌词转换成JS能处理的数组，也是个不错的创意

红影 发表于 2022-9-27 09:47

这么多漂亮女孩，欣赏水芙蓉美女的精彩作品{:4_187:}

醉美水芙蓉 发表于 2022-9-27 11:39

红影 发表于 2022-9-27 09:47
这么多漂亮女孩，欣赏水芙蓉美女的精彩作品

谢谢红影美女支持！

醉美水芙蓉 发表于 2022-9-27 11:41

马黑黑 发表于 2022-9-27 07:09
昨夜我发了一个英文歌词同步的，歌词用花潮LRC在线增强版测试，未发现问题。请检查代码的其他方面。你这 ...

看来还是我老师的课程没有学会！

查看完整版本: 安全感