采茶姑娘

老谟深虑 发表于 2023-1-22 16:28

本帖最后由老谟深虑于 2023-1-22 16:28 编辑 <br /><br /><br /><br /><style>
.container {
margin: 0px auto;
width: 1024px;
height: 665px;
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{
0% {
opacity: 0;
}
10% {
opacity: 1;
}
18% {
opacity: 0;
}
}

img:nth-child(1) {background:url(https://s1.ax1x.com/2022/10/20/xybTBQ.jpg)0 0/100% 100%;
animation-delay: 28s;
}
img:nth-child(2) {background:url(https://s1.ax1x.com/2022/10/20/xyb5jS.jpg)0 0/100% 100%;
animation-delay: 24s;
}
img:nth-child(3) {background:url(https://s1.ax1x.com/2022/10/20/xybqNn.jpg)0 0/100% 100%;
animation-delay: 20s;
}
img:nth-child(4) {background:url(https://s1.ax1x.com/2022/10/20/xybX90.jpg)0 0/100% 100%;
animation-delay: 16s;
}
img:nth-child(5) {background:url(https://s1.ax1x.com/2022/10/20/xybj3V.jpg)0 0/100% 100%;
animation-delay: 12s;
}
img:nth-child(6) {background:url(https://s1.ax1x.com/2022/10/20/xyqpB4.jpg)0 0/100% 100%;
animation-delay: 8s;
}
img:nth-child(7) {background:url(https://s1.ax1x.com/2022/10/20/xybxjU.jpg)0 0/100% 100%;
animation-delay: 4s;
}
img:nth-child(8) {background:url(https://s1.ax1x.com/2022/10/20/xyb77j.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:-180px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:linear-gradient(50deg, #ff0080, #ff0000, #000000, #00f000);text-align: center;">
<div class="HT"><div class="texiao"id="testImg">
<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></div>
<audio autoplay=""id="MusicPlayer"src="https://www.qqmc.com/up/kwlink.php?id=142996570&.mp3" loop="" ></audio>

<div class="btn">
<div id="testImg" onclick="bf()">
<inputtype="button" id="testBtn" value="."style="width: 1024px; height: 600px;border-radius: 0%;color: #ff0000;-webkit-background-clip : text;font-weight:bold;border:1px solid #000000;"></input ></div></div>
<div class="img_border"id="aplay"style="width: 100%; height: 100%;position: absolute;top:0px; left:0px;z-index: 250;filter:hue-rotate(160deg)">
<div class="lrc">
<ul id="ullrc">
      </ul>
   </div>
</div>
</div></div>

<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:0px; left:0px;
}
.lrc{
width: 980px;
height: 140px;
overflow: hidden;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
display: block;position: absolute;top:500px; left:0px;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; background: linear-gradient(180deg, #0937F3 0%,#F55454 66%,#FD2D2D 100%);
-webkit-text-fill-color : transparent; /*将颜色设置为透明*/
-webkit-background-clip : text; /*背景裁剪，必不可少*/

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

/*歌词tx*/
.img_border{ width: 980px;height: 140px;position: absolute;top:0px; left:0px;z-index: 250;display: block;}
.img_border#aplay{ }
.z360z{animation:rotating 1s linear infinite;}
@keyframes rotating{0%{transform:rotateY(0deg) rotatex(0deg) ;
            filter:hue-rotate(20deg)contrast(100%)brightness(450%);}
         50%{transform:rotateY(0deg) rotatex(0deg);
            filter:hue-rotate(360deg)contrast(100%)brightness(600%);}
100%{transform:rotateY(0deg) rotatex(0deg);
            filter:hue-rotate(0deg)contrast(100%)brightness(150%);}
}

</style>

<style>
.texiao{margin: 0px auto;position: absolute;top:0px; left:0px;z-index:10;
display: block;
width: 1024px; height: 600px;animation:rotat 0.2s linear infinite;}
.stop {
animation-play-state: paused;
}

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

</style>

<script>var lrc =`采茶姑娘
演唱：田丽春
词：谭伟平
曲：刘武华
LRC：老谟深虑
天上那个云飘飘
地上那个绿迢迢
碣滩姑娘采茶忙
喔嗬声声好妖娆

天上那个云飘飘云飘飘
地上那个绿迢迢绿迢迢
碣滩姑娘采茶忙
喔嗬声声好妖娆
挽着春光来采茶
一路歌来一路跳
片片叶儿细细捏细细捏
满眼青翠绕身腰
百里茶园绿似海
桃花美景眼前撩
杯底日月赛神仙
壶中乾坤任逍遥任逍遥
百里茶园绿似海
桃花美景眼前撩
杯底日月赛神仙
壶中乾坤任逍遥

山中那个雾淼淼雾淼淼
林中那个静悄悄静悄悄
春夏四处百花开
蝶舞茶园人欢笑
踩着岁月来采茶
一篓清香一篓俏
颗颗露珠轻轻摇轻轻摇
金针银尖味道妙
百里茶园绿似海
桃花美景眼前撩
杯底日月赛神仙
壶中乾坤任逍遥任逍遥
百里茶园绿似海
桃花美景眼前撩
杯底日月赛神仙
壶中乾坤任逍遥
壶中乾坤任逍遥

`;
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="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script>

梦油发表于 2023-1-22 16:48

祝老谋深算朋友新春快乐、幸福安康！

红影发表于 2023-1-22 16:48

变色图片轮播，真漂亮的制作{:4_187:}

老谟深虑 发表于 2023-1-22 17:39

梦油发表于 2023-1-22 16:48
祝老谋深算朋友新春快乐、幸福安康！

谢谢老师首席欣赏点评！祝你新春快乐！

老谟深虑 发表于 2023-1-22 17:41

红影发表于 2023-1-22 16:48
变色图片轮播，真漂亮的制作

谢谢红影老师的收看，新春快乐！

梦油发表于 2023-1-22 17:42

老谟深虑发表于 2023-1-22 17:39
谢谢老师首席欣赏点评！祝你新春快乐！

别客气，别客气。

老谟深虑 发表于 2023-1-22 17:46

梦油发表于 2023-1-22 17:42
别客气，别客气。

应该的，再次感谢！

红影发表于 2023-1-22 18:54

老谟深虑发表于 2023-1-22 17:41
谢谢红影老师的收看，新春快乐！

欣赏老师好帖，这个帖子里的采茶场景很漂亮，让人想到春光的美好{:4_187:}

庶民来了 发表于 2023-1-22 19:10

真好，老乡的帖子成功发布，真美好。

庶民发表于 2023-1-22 20:34

您的精彩真多，新年快乐。

马黑黑 发表于 2023-1-22 23:40

好帖

庶民来了 发表于 2023-1-23 07:15

俺给你拜年啦！祝你新春快乐、幸福安康！

樵歌发表于 2023-1-23 07:52

在新年里听到如此清甜的声音，心里是极为舒坦，貌似比五粮液下肚爽了许多{:4_173:}

樵歌发表于 2023-1-23 07:53

画卷美，采花菇凉更可人{:4_173:}佳作！

樵歌发表于 2023-1-23 07:54

红影发表于 2023-1-22 16:48
变色图片轮播，真漂亮的制作

师妹好，我的表情小图怎么加个框了{:4_189:}

老谟深虑 发表于 2023-1-23 10:00

红影发表于 2023-1-22 18:54
欣赏老师好帖，这个帖子里的采茶场景很漂亮，让人想到春光的美好

再次谢谢老师的鼓励，让我们迎接美好的春天！

老谟深虑 发表于 2023-1-23 10:01

庶民来了发表于 2023-1-22 19:10
真好，老乡的帖子成功发布，真美好。

谢谢老乡的分享，问好！

老谟深虑 发表于 2023-1-23 10:02

庶民发表于 2023-1-22 20:34
您的精彩真多，新年快乐。

谢谢，新春快乐！

老谟深虑 发表于 2023-1-23 10:07

马黑黑发表于 2023-1-22 23:40
好帖

谢谢马老师的美评，新春快乐！

老谟深虑 发表于 2023-1-23 10:09

庶民来了发表于 2023-1-23 07:15
俺给你拜年啦！祝你新春快乐、幸福安康！

谢谢老乡，祝你新春快乐！幸福安康！

页: [1] 2 3

花潮论坛's Archiver

采茶姑娘