亚伦影音工作室 发表于 2023-2-15 23:33

我

本帖最后由 亚伦影音工作室 于 2025-4-6 21:18 编辑 <br /><br /><style>
#papa { margin: 10px -230px ; width: 1100px; height: 640px; background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/20%20%,linear-gradient(80deg, #000080, #000090, #000000, #111111); box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 10px #880000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;transform:rotateX(0deg) scale(1)}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:5%; left:80%;color:#FF0000; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2em华文隶书; opacity: 0.5; cursor: pointer; z-index: 11}
.photo {width: 100%;
height: 100%;
position: absolute;z-index: -2;
border:3px solid #ffffff;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation: round 90s linear infinite;
}

@keyframes round{0% {
opacity: 0;
transform:translate(-100%,-100%)scale(0);}
4% {
opacity: 1;
transform:translate(0%,0%)scale(0.6)rotate(-360deg);}
5% {
opacity: 1;
transform:translate(0%,0%)scale(0.6)rotate(-360deg);}
7% {opacity: 1;transform: perspective(900px) rotateY(70deg)scale(0.6)}
9% {opacity: 1;transform: perspective(900px) rotateY(-70deg)scale(0.6)}
11% {
opacity: 0;
transform:translate(100%,100%) perspective(900px)rotatex(-90deg) rotateY(-40deg)scale(3);}

}

img:nth-child(1) {
animation-delay: 84s;
}
img:nth-child(2) {
animation-delay: 78s;
}
img:nth-child(3) {
animation-delay: 72s;
}
img:nth-child(4) {
animation-delay: 66s;
}
img:nth-child(5) {
animation-delay: 60s;
}
img:nth-child(6) {
animation-delay: 54s;
}
img:nth-child(7) {
animation-delay: 48s;
}
img:nth-child(8) {
animation-delay: 42s;
}
img:nth-child(9) {
animation-delay: 36s;
}
img:nth-child(10) {
animation-delay: 30s;
}
img:nth-child(11) {
animation-delay: 24s;
}
img:nth-child(12) {
animation-delay: 18s;
}
img:nth-child(13) {
animation-delay: 12s;
}
img:nth-child(14) {
animation-delay: 6s;
}
img:nth-child(15) {
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;
}

.stop img:nth-child(9) {
animation-play-state: paused;
}
.stop img:nth-child(10) {
animation-play-state: paused;
}

.stop img:nth-child(11) {
animation-play-state: paused;
}
.stop img:nth-child(12) {
animation-play-state: paused;
}
.stop img:nth-child(13) {
animation-play-state: paused;
}
.stop img:nth-child(14) {
animation-play-state: paused;
}

.stop img:nth-child(15) {
animation-play-state: paused;
}
</style>
<style>
.pg{ width: 100%; height:100%; left: 0%;
position: absolute;z-index:1;
top: 0%; z-index: 1;overflow: hidden;perspective: 3.125vmin;}
#polygon {animation: 6s linear infinite polygon;
left: 50%;
position: absolute;z-index:1;
top: 50%;
transform-style: preserve-3d;
transform: rotatex(90deg) rotatey(0deg) translatey(-10vmin);
}
@keyframes polygon {
100% {
    transform: rotatex(90deg) rotatey(0deg) translatey(0);
}
}
.side {opacity: 1;
background-image: url(https://365.tf/disk/tf/1676467610.png);
background-size:10vmin 25%;
filter:hue-rotate(10deg)contrast(120%)brightness(500%);/**----改变数据可显示不同光效----**/
height: 100vmin;
position: absolute;
transform-origin: 0;
width: calc(8vmin + 1px);
}
.side:nth-child(1) {
background-position: -9.94562vmin 0;
transform: rotatey(22.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(2) {
background-position: -19.89124vmin 0;
transform: rotatey(45deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(3) {
background-position: -29.83686vmin 0;
transform: rotatey(67.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(4) {
background-position: -39.78247vmin 0;
transform: rotatey(90deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(5) {
background-position: -49.72809vmin 0;
transform: rotatey(112.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(6) {
background-position: -59.67371vmin 0;
transform: rotatey(135deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(7) {
background-position: -69.61933vmin 0;
transform: rotatey(157.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(8) {
background-position: -79.56495vmin 0;
transform: rotatey(180deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(9) {
background-position: -89.51057vmin 0;
transform: rotatey(202.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(10) {
background-position: -99.45618vmin 0;
transform: rotatey(225deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(11) {
background-position: -109.4018vmin 0;
transform: rotatey(247.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(12) {
background-position: -119.34742vmin 0;
transform: rotatey(270deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(13) {
background-position: -129.29304vmin 0;
transform: rotatey(292.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(14) {
background-position: -139.23866vmin 0;
transform: rotatey(315deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(15) {
background-position: -149.18428vmin 0;
transform: rotatey(337.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(16) {
background-position: -159.12989vmin 0;
transform: rotatey(360deg) translate3d(-50%, -50%, 25vmin);
}

</style>
<div id="papa">
<audio id="MusicPlayer" src="https://s2.ananas.chaoxing.com/sv-w7/audio/ef/06/3c/2e53a7051e1da330537b864669cdf30f/audio.mp3" autoplay loop></audio>
<span id="fullscreen">全屏观赏</span>
<div id="testImg" >
<img alt="" class="photo" src="https://365.tf/disk/tf/1676447573.jpg" />
<img alt="" class="photo"src="https://365.tf/disk/tf/1676460238.jpg" />
<img alt=""class="photo"src="https://365.tf/disk/tf/1676473345.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676383211.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676420707.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676438603.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676393369.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676451864.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676392055.jpg" />
<img alt="" class="photo"src="https://365.tf/disk/tf/1676436325.jpg" />
<img alt=""class="photo"src="https://365.tf/disk/tf/1676409961.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676413260.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676421148.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676449988.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676439398.jpg" />
</div>

<div class="pg">
<div id="polygon" >
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div></div>
</div>
<divid="h" >亚伦影音工作室</div>
<div class="bfbj">
<divid="btn">
<div id="img_border"></div></div>
<div class="lrc" >
      <liid="ullrc" >
          </li>
      </div>
</div>
</div>
<style>
.bfbj{
    width: 100%;   height: 100%;margin: 0px 0px;position: absolute;
}
#MusicPlayer{
    width: 600px;
    display: block;
    margin: 0 auto;
}
#btn{
    display: block;
    margin: 0 ;
}
.lrc{
    width: 980px;
    height: 140px;position: absolute;top:90%; left:10%;
        z-index: 3;
    overflow: hidden;
    display: block;
    margin: 0px 0px;
}
.lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 80px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 0px;
    color: #ff0078;transform: translate(0%,0%);
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
text-align:center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
    display: block;
    width: 100%;
    margin: 0 auto;
}

/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 45px;color: #ff0000;
text-align:center;
transform: translate(0%,0%);
    font-weight: normal;-webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
    background-image:linear-gradient(45deg, #00ff00, #fff000, #ff0000, #00ff00);
   background-position: 0px 0;
   -webkit-animation:loop 3s linear 2;
}
@-webkit-keyframes loop{
   0%{background-position: -800px 0;filter:hue-rotate(0deg)contrast(180%)brightness(500%);}
   
}
#img_border{display:inline-block;width:100px;height:100px;position: absolute;top:15%; left:5%;z-index: 30; transition: .3s all ease;animation:rotating 10s linear infinite;background:url(https://pic.imgdb.cn/item/639c602fb1fccdcd36980aad.png)0px 0px/100% 100%;border-radius:0%;}
@keyframes rotating{
0%{transform: rotate(-360deg);filter:hue-rotate(360deg)contrast(120%)brightness(300%)}
100%{transform: rotate(0deg);}
}
</style>

<script >
var lrc = `
你(DJR7 版)-葛漂亮
词Lyrics：陈涛
曲Music：张宏光
编曲Arranger：DJR7
监制Executive producer：欧浚诚
项目统筹Artist co ordination：零壹/筱毅
制作团队Manufacturing company：浅芥音乐
策划团队Promotion planning：于喆/自渡/云惜
营销策划Marketing Planning：诚科文化×浅芥音乐
推广团队Promotion planning：招财猫计划music????宇格文化
出品 亚伦影音工作室
（此版本为正版授权，未经许可不得翻唱使用）
寻觅着方向方向就在前方
一声叹息将我一生变凉
做人如果没梦想
那跟咸鱼有什么区别啊
你在那万人中央
感受那万丈荣光
看不见你的眼睛
是否会藏着泪光
我没有那种力量
想忘也总不能忘
只等到漆黑夜晚
梦一回那曾经心爱的姑娘
你从天而降的你
落在我的马背上
如玉的模样清水般的目光
一丝浅笑让我心发烫
你头也不回的你
展开你一双翅膀
寻觅着方向方向就在前方
一声叹息将我一生变凉
你在那万人中央
感受那万丈荣光
看不见你的眼睛
是否会藏着泪光
我没有那种力量
想忘也总不能忘
只等到漆黑夜晚
梦一回那曾经心爱的姑娘
你头也不回的你
展开你一双翅膀
寻觅着方向方向就在前方
一声叹息将我一生变凉
你在那万人中央
感受那万丈荣光
看不见你的眼睛
是否会藏着泪光
我没有那种力量
想忘也总不能忘
只等到漆黑夜晚
梦一回那曾经心爱的姑娘`;

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 = 60;
    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;

var image = document.getElementById("testImg"),
    button = document.getElementById("btn");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('stop');
          this.value = '*';
      } else {
            image.classList.add('stop');
            this.value = '.';
      }
    };
}
img_border.onclick = () => MusicPlayer.paused ? MusicPlayer.play() : MusicPlayer.pause();
MusicPlayer.addEventListener('playing', () => img_border.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () => img_border.style.animationPlayState = 'paused');

polygon.style.animationPlayState = MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () =>polygon.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>polygon.style.animationPlayState = 'paused');

h.style.animationPlayState = MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () =>h.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>h.style.animationPlayState = 'paused');

</script >


<script>
let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</script>

<style type="text/css">#h{width:980px;height:120px ;text-align: left;position: absolute;z-index: 2;
top:20px; left:20px;
        font-family:华文隶书;
    font-size: 50px;
filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
        animation:mycolor 1s ease infinite;}

@keyframes mycolor
{0% { color: #0f0;}
50% { color: yellow;}   
100%{ color: red;}
}
</style>

红影 发表于 2023-2-15 23:44

好多美女啊，深夜美女秀。欣赏亚伦老师好帖{:4_187:}

庶民 发表于 2023-2-16 05:06

很欣赏您的作品，拜访并问候！

海笑 发表于 2023-2-16 10:26

欣赏老师佳作！
页: [1]
查看完整版本: 我