论坛 › 动画音画 › 借用千羽美图等比缩放

焱鑫磊 发表于 2023-7-14 22:51

借用千羽美图等比缩放

本帖最后由 焱鑫磊 于 2023-7-14 22:53 编辑 <br /><br /><style type="text/css">
#papa { margin: 110px -300px ; width: 1200px; height: 751px; background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/10%10%,linear-gradient(80deg, #000080, #003300, #ff0000, #00f000); box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 10px #880000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
.lyricDisp{font: bold 2.5em华文隶书, sans-serif; transition:.3s all ease;filter:drop-shadow(#FFFfff 1px 0 0)drop-shadow(#FFFfff 0 1px 0)drop-shadow(#FFFfff -1px 0 0) drop-shadow(#FFFfff 0 -1px0);}
.lyricDisp:nth-child(1){color:#000080;text-align:left;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}
.lyricDisp:nth-child(1)::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:#FF0000;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
.lyricDisp:nth-child(2){color:#000080;text-align:center;font-size:2.5em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
#LRCShow{position:absolute;left:20%;bottom:10px;width:100%;height:100px;margin:16px auto position:relative;z-index: 2}
#rdisk{position:absolute;left:20%;bottom:10px;width:100%;height:100px;z-index: 11}
</style>
<div id="papa"title="欢迎欣赏">
<div id="testImg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64b15dce1ddac507cc90d9e4.jpg" /><img alt="" class="photo" src="https://pic.imgdb.cn/item/64b15dee1ddac507cc9167d5.jpg" /><img alt="" class="photo"src="https://pic.imgdb.cn/item/64b15e061ddac507cc91cd79.jpg" /><img alt=""class="photo"src="https://pic.imgdb.cn/item/64b15e261ddac507cc925d83.jpg" /><img alt="" class="photo" src="https://pic.imgdb.cn/item/64b15e431ddac507cc92d6fb.jpg" /><img alt="" class="photo" src="https://pic.imgdb.cn/item/64b15e5c1ddac507cc93457e.jpg" /><img alt="" class="photo" src="https://pic.imgdb.cn/item/64b15e741ddac507cc93ae06.jpg" /><img alt="" class="photo" src="https://pic.imgdb.cn/item/64b15e8b1ddac507cc9415da.jpg" />

<div id="mpic"></div>
<div id="mpic1" ></div>

</div>

<div id="rdisk" title="暂停/播放"><ptype="button"value="*" id="testBtn" style="width: 100%; height: 100%;position:absolute;-webkit-background-clip : text;"></p></div>
<div id="LRCShow" >
            <div class="lyricDisp">欢迎欣赏</div><div class="lyricDisp"></div>
         </div>

</div>
<textarea id="lrc_content" style="visibility: hidden;">
李诗影(大恬) - 相思入画
作词：峦无眠
作曲：周琦
编曲：周琦
混音：刘城函
LRC编辑：醉美水芙蓉
庭前月 洒落了一池牵挂
谁低头 弹着断弦的琵琶
村落外 旧篱笆
圈不住当年的他
离别后 我等了几个春夏
蘸一笔相思入画
谁在泼墨中风雅
那朱砂 怎描画
我在等你来回答
蘸一笔相思入画
将故事结局写下
恰如你 回眸的 那一刹
暮云下 风卷起几叠飞沙
难忘却 与你昨日的潇洒
孤窗外 谁沏茶
将思念独自饮下
我转身 轻叹花飞花落下
蘸一笔相思入画
谁在泼墨中风雅
那朱砂 怎描画
我在等你来回答
蘸一笔相思入画
将故事结局写下
恰如你 回眸的 那一刹
蘸一笔相思入画
谁在泼墨中风雅
那朱砂 怎描画
我在等你来回答
蘸一笔相思入画
将故事结局写下
恰如你 回眸的 那一刹
恰如你 回眸的 那一刹
谢谢欣赏！
</textarea>

<script type="text/javascript">
var lrcPlayer2=function(){return this.init.apply(this,arguments)};lrcPlayer2.prototype={constructor:lrcPlayer2,init:function(opts){this.lrcVec=new Array();this.lyricTxtObj=document.getElementById(opts.lrcTxtID);lyricTxt=this.lyricTxtObj.innerHTML;this.showLrcObj=document.getElementById(opts.lrcShowID);this.gclines=this.showLrcObj.getElementsByTagName('div');this.audioCtrl=document.getElementById(opts.audioCtrl);this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){var lyriclist=lyricTxt.split(/\r|\n|\r\n/);for(n=0;n<lyriclist.length;n++){chkTime=lyriclist.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=lyriclist.lastIndexOf(']');if(tIdx>0)lrcTxt=lyriclist.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_t=(+ta)*60+(+ta);if(this.lrcVec.length==0&&_t!=0){this.lrcVec.push()}this.lrcVec.push()}}}this.lrcVec.sort(function(a,b){return(a-b)})},showLrc:function(durTime){this.gclines.innerHTML=this.gclines.dataset.lrc=this.lrcVec.length>0?this.lrcVec:"\u3000";this.gclines.style.setProperty('--aniName','bgMove'+(this.idx%2));this.gclines.style.setProperty('--durTime',durTime+'ms');this.gclines.style.setProperty('--aniPlayState','running')},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.src=mUrl;this.showLrcObj.appendChild(this.mObj);this.idx=0;var that=this;this.mObj.addEventListener('ended',function(){that.idx=0;that.mObj.play()});this.mObj.addEventListener('playing',function(){that.audioCtrl.style.animationPlayState='running';that.gclines.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){that.audioCtrl.style.animationPlayState='paused';that.gclines.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.showLrcObj.style.display='none';that.showLrcObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(this.currentTime>that.lrcVec){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec-that.lrcVec)*950)}else{that.showLrc((this.duration-that.lrcVec)*950)}if(that.idx+1==that.lrcVec.length){that.gclines.innerHTML=""}else{that.gclines.innerHTML=that.lrcVec}that.idx++}});this.audioCtrl.onclick=function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}};try{this.mObj.play()}catch(err){console.log(err.message)}}}



</script>
<script type="text/javascript">

var opts = {//        下面4个参数是必须的！
                        lrcTxtID:'lrc_content',
                        lrcShowID:"LRCShow",
                        audioURL:"https://www.qqmc.com/mp3/music212183703.mp3",
                        audioCtrl:'rdisk'
                        };
        new lrcPlayer2(opts);

</script>
<style>
#mpic {
        position: absolute;z-index: 1;
        transform: rotateY(0deg);
        top: 0px;
        left: 0px;
        width: 1200px;
        height: 751px;
        animation: rote 80s linear infinite;
        cursor: pointer;background: url('http://pan.yinhuabbs.cn/view.php/002029cebf9f2d674ef742b5037eda30.png')0 0/50% 70%;
        opacity: 1;
}
.stop #mpic {
animation-play-state: paused;
}

@keyframes rote {
        0%{
      background-position: 600% 0;
    }
    100%{
      background-position: 30% -1600%;filter:hue-rotate(360deg)
    }
}

#mpic1 {
        position: absolute;z-index: 1;
        transform: rotateY(0deg);
        top: 0px;
        left: 0px;
        width: 1200px;
        height: 751px;
        animation: rotet 100s linear infinite;
        cursor: pointer;background: url('http://pan.yinhuabbs.cn/view.php/002029cebf9f2d674ef742b5037eda30.png')0 0/40% 60%;
        opacity: 1;
}
.stop #mpic1 {
animation-play-state: paused;
}

@keyframes rotet {
       0%{
      background-position: 0% 1600%;
    }
    100%{
      background-position: 0% 0%;filter:hue-rotate(360deg)
    }
}
       

</style>
<style>
.photo {width: 100%;
height: 100%;
position: absolute;z-index: -1;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation-name: round ;animation-duration: 48s;
               animation-iteration-count: infinite;
                animation-timing-function: linear;
}

@keyframes round {0% {opacity: 0;filter:hue-rotate(360deg)}

10% {opacity: 1;}
18% {opacity: 0;}
}

img:nth-child(8) {
animation-delay: 42s;
}
img:nth-child(7) {
animation-delay: 36s;
}
img:nth-child(6) {
animation-delay: 30s;
}
img:nth-child(5) {
animation-delay: 24s;
}
img:nth-child(4) {
animation-delay: 18s;
}
img:nth-child(3) {
animation-delay: 12s;
}
img:nth-child(2) {
animation-delay: 6s;
}
img:nth-child(1) {
animation-delay: 0s;
}

.stop img:nth-child(8){
animation-delay: 42s;animation-play-state: paused;
}
.stop img:nth-child(7){
animation-delay: 36s;animation-play-state: paused;
}
.stop img:nth-child(6){
animation-delay: 30s;animation-play-state: paused;
}
.stop img:nth-child(5){
animation-delay: 24s;animation-play-state: paused;
}
.stop img:nth-child(4){
animation-delay: 18s;animation-play-state: paused;
}
.stop img:nth-child(3){
animation-delay: 12s;animation-play-state: paused;
}
.stop img:nth-child(2){
animation-delay: 6s;animation-play-state: paused;
}
.stop img:nth-child(1){
animation-delay: 0s;animation-play-state: paused;
}
</style>


<script>
var image = document.getElementById("testImg"),
    button= document.getElementById("testBtn");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('stop');
          this.value = '*';
      } else {
            image.classList.add('stop');
            this.value = '.';
      }
    };
}
</script>

千羽美图是1600*1000；缩小宽1200，高应为751；缩小宽1164，高应为728。如果不按比例缩放，图片就变形了。为“醉美水芙蓉”改编。
https://www.huachaowang.com/forum.php?mod=viewthread&tid=69952

小辣椒 发表于 2023-7-14 23:22

如果纯用千羽的原图就应该等比例缩放，自己裁剪过就按裁剪尺寸缩放

小辣椒 发表于 2023-7-14 23:24

发现焱鑫磊很仔细的，精致的帖就应该按原尺寸做出来缩放的{:4_199:}

樵歌 发表于 2023-7-15 06:25

做得真漂亮。看来都发现富矿了哇{:4_190:}{:4_173:}

樵歌 发表于 2023-7-15 06:27

选这歌与这变幻的音画真是绝配了{:4_199:}

红影 发表于 2023-7-15 07:35

焱鑫磊说得太对了，使用图片应等比例缩放。非常赞{:4_199:}

红影 发表于 2023-7-15 07:36

细节决定成败{:4_178:}

一斛珠 发表于 2023-7-15 09:47

醉赏佳作

焱鑫磊 发表于 2023-7-15 21:46

小辣椒 发表于 2023-7-14 23:22
如果纯用千羽的原图就应该等比例缩放，自己裁剪过就按裁剪尺寸缩放

是的，最好用原图。裁剪后改变原图了。

焱鑫磊 发表于 2023-7-15 21:47

小辣椒 发表于 2023-7-14 23:24
发现焱鑫磊很仔细的，精致的帖就应该按原尺寸做出来缩放的

问好小辣椒！{:4_187:}

焱鑫磊 发表于 2023-7-15 21:47

樵歌 发表于 2023-7-15 06:25
做得真漂亮。看来都发现富矿了哇

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

焱鑫磊 发表于 2023-7-15 21:48

樵歌 发表于 2023-7-15 06:27
选这歌与这变幻的音画真是绝配了

{:4_204:}{:4_204:}{:4_204:}

焱鑫磊 发表于 2023-7-15 21:48

红影 发表于 2023-7-15 07:35
焱鑫磊说得太对了，使用图片应等比例缩放。非常赞

问好红影！{:4_187:}

焱鑫磊 发表于 2023-7-15 21:49

红影 发表于 2023-7-15 07:36
细节决定成败

哦了！{:4_187:}

焱鑫磊 发表于 2023-7-15 21:49

一斛珠 发表于 2023-7-15 09:47
醉赏佳作

问好一斛珠！{:4_187:}

红影 发表于 2023-7-15 22:37

焱鑫磊 发表于 2023-7-15 21:48
问好红影！

问好焱鑫磊，周六快乐{:4_187:}

红影 发表于 2023-7-15 22:37

焱鑫磊 发表于 2023-7-15 21:49
哦了！

这个帖子非常好呢{:4_199:}

查看完整版本: 借用千羽美图等比缩放