加林森 发表于 2022-5-22 09:26

《美丽大草原》- 张冬玲


<style>
.wrap {
      left: -214px;
      width: 1024px; height: 767px;
      background: teal url('https://pic.imgdb.cn/item/62898fa10947543129b04c31.jpg') no-repeat center/cover;
      position: relative;
}
.circle {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80px; height: 80px;
      left: 10px; bottom: 10px;
      border: solid 6px transparent;
      border-radius: 50%;
      background-image: radial-gradient(ghostwhite, transparent), linear-gradient(120deg,tomato,green,red,gold);
      background-origin: border-box;
      background-clip: content-box, border-box;
      cursor: pointer;
      font: normal 14px sans-serif;
      position: absolute;
}
.circle::before { position: absolute; content: attr(data-per); bottom: 20%;}
.circle::after { position: absolute; content: ''; width: 10px; height: 10px; background: olive; border-radius: 50%; }
.hand {
      position: absolute; width: 2px; height: 50%;
      bottom: 50%; background: rgba(200,20,20,.45);
      transform-origin: bottom;
}
.wrap::before {
      content: '';
      position: absolute;
      width: 50%;
      height: 50%;
      background: url('https://pic.imgdb.cn/item/6235d74f5baa1a80ab9d74a0.gif') no-repeat

center/cover;
      opacity: .55;
      left:30px; top: 20px;
}
</style>

<div class="wrap">
      <div class="circle" data-per="0%">
                <div class="hand"></div>
      </div>
</div>
<audio id="aud" src="https://www.joy127.com/url/90452.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let circle = document.querySelector('.circle');
let hand = document.querySelector('.hand');
let aud = document.querySelector('#aud');
let current, task;

aud.addEventListener('timeupdate', function(){
      task = aud.duration;
      current = aud.currentTime;
      setProgress(task,current);
});

circle.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };

function setProgress(tt,cc) {
      if(tt <= 0 || cc <= 0) return false;
      let prog = 100 * cc / tt;
      hand.style.transform = `rotate(${360*prog/100}deg`;
      circle.setAttribute('data-per', prog.toFixed(2) + '%');
}
</script>

加林森 发表于 2022-5-22 09:26

美丽大草原-张冬玲
词：李守俊
曲：王 浩
火红的太阳 映红了脸庞
清爽的微风 吹醉了心房
热情的小伙 善良又豪放
张开那臂膀 想要去飞翔
清清的湖水 依偎着山冈
奔驰的骏马 追逐着牛羊
多情的姑娘 温柔又漂亮
渴望和阿哥 一起去远方
美丽的大草原 绿色的海洋
喝着那马奶酒 燃烧了胸膛
烧得我脸庞 火辣辣的烫
我又唱起情歌 漫天飞扬
美丽的大草原 绿色的海洋
听着那马头琴 心池在荡漾
亲爱的阿哥 威武又雄壮
你的胸膛宽广 和草原一样
清清的湖水 依偎着山冈
奔驰的骏马 追逐着牛羊
多情的姑娘 温柔又漂亮
渴望和阿哥 一起去远方
美丽的大草原 绿色的海洋
喝着那马奶酒 燃烧了胸膛
烧得我脸庞 火辣辣的烫
我又唱起情歌 漫天飞扬
美丽的大草原 绿色的海洋
听着那马头琴 心池在荡漾
亲爱的阿哥 威武又雄壮
你的胸膛宽广 和草原一样
美丽的大草原 绿色的海洋
喝着那马奶酒 燃烧了胸膛
烧得我脸庞 火辣辣的烫
我又唱起情歌 漫天飞扬
美丽的大草原 绿色的海洋
听着那马头琴 心池在荡漾
亲爱的阿哥 威武又雄壮
你的胸膛宽广 和草原一样
你的胸膛宽广 和草原一样

马黑黑 发表于 2022-5-22 09:27

漂酿。赞个。
分用完了，先欠着。

加林森 发表于 2022-5-22 09:32

马黑黑 发表于 2022-5-22 09:27
漂酿。赞个。
分用完了，先欠着。

没关系的啊。你辛苦了！

马黑黑 发表于 2022-5-22 09:41

加林森 发表于 2022-5-22 09:32
没关系的啊。你辛苦了！

大家辛苦

加林森 发表于 2022-5-22 10:01

马黑黑 发表于 2022-5-22 09:41
大家辛苦

嗯嗯。

醉美水芙蓉 发表于 2022-5-22 10:36

加林森 发表于 2022-5-22 10:39

醉美水芙蓉 发表于 2022-5-22 10:36
手机先给队长点赞！

辛苦水芙蓉啦！{:4_204:}

红影 发表于 2022-5-22 11:06

漂亮，这个圆形播放器用在这里很美的。歌曲也好听{:4_187:}

加林森 发表于 2022-5-22 11:08

红影 发表于 2022-5-22 11:06
漂亮，这个圆形播放器用在这里很美的。歌曲也好听

谢谢红影支持！
页: [1]
查看完整版本: 《美丽大草原》- 张冬玲