亚伦影音工作室 发表于 2024-10-26 13:43

大美妞 (DJ何鹏版) - 郭玲[复古胶片]

本帖最后由 亚伦影音工作室 于 2024-11-20 18:54 编辑 <br /><br /><style>
#picBlk {z-index: 3;
    width: calc(4* var(--picWidth));
    height: var(--picHeight);
    position: absolute;
    left: 0px;
    animation: mleft 10s linear infinite;
}

#picBlk img {
    width: var(--picWidth);
    height: var(--picHeight);
    float: left;
}

#oBlk {
    width: 1286px;
    height: var(--picHeight);
    overflow: hidden;
    position: relative;
    margin: 180px -350px ;
    box-shadow: 4px 4px 10px black;
    --picWidth: 700px;
    --picHeight:680px;
}

@keyframes mleft {
    to {
      left: calc(-2* var(--picWidth));
    }
}

#picBlk img:nth-child(even) {
    transform: scaleX(-1);
}
#mdiv {top:12%; left:5%;cursor: pointer;width:200px;text-align:center;animation:rot 10s linear infinite;position: absolute;filter:drop-shadow(#000 0px 0 1px);z-index: 40;}@keyframes rot { to { transform: rotate(2turn);} }

#pa{z-index: 1;
width: 104%;
height: 104%;
position: absolute;
top: -2px;
left: -2px;background:url(https://pic.imgdb.cn/item/67162491d29ded1a8c210f14.jpg)no-repeat center/cover;
filter: url(#water)
}
#dt{z-index: 2;
width: 100%;
height: 100%;
position: absolute;
top: 0px;mix-blend-mode: lighten;
left: 0px;
}
#dt img{height: 100%;width: 100%;}
</style>
<div id="oBlk">
<div id="picBlk">
    <img src="https://pic.imgdb.cn/item/671c82d4d29ded1a8cdf4d72.png">
    <img src="https://pic.imgdb.cn/item/671c82d4d29ded1a8cdf4d72.png">
    <img src="https://pic.imgdb.cn/item/671c82d4d29ded1a8cdf4d72.png">
    <img src="https://pic.imgdb.cn/item/671c82d4d29ded1a8cdf4d72.png">
</div>
<div id="pa" >
<svg width="0" height="0"id="p" >
<filter id="water">
    <feTurbulence type="fractalNoise" baseFrequency=".05 .05" numOctaves="1" result="noise1"></feTurbulence>
    <feColorMatrix in="noise1" type="hueRotate" values="0" result="noise2">
      <animate attributeName="values" from="0" to="360" dur="2s" repeatCount="indefinite"/>
    </feColorMatrix>
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="7" in="SourceGraphic" in2="noise2" />
</filter>
</svg>
</div>
<div id="dt" ><imgid="Img" src="https://pic.imgdb.cn/item/659d4bdf871b83018aafa20f.gif"></div>

<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1926370812.mp3" autoplay loop></audio>
<div id="mdiv">
        <svg width="100" height="100" viewBox="-160 -160 320 320">
        <defs>
                <filter id="shadow">
                        <feDropShadow dx="0" dy="0" stdDeviation="1" flood-color="black"></feDropShadow>
                </filter>
                <g id="part" filter="url(#shadow)">
                        <line x1="0" y1="-100" x2="0" y2="100" stroke="#880" stroke-width="4"></line>
                        <ellipse cx="0" cy="-125" rx="20" ry="20" fill="#fff"></ellipse>
                        <ellipse cx="0" cy="125" rx="20" ry="20" fill="#fff"></ellipse>
                </g>
        </defs>
        <use href="#part"></use>
        <use href="#part" transform="rotate(35)"></use>
        <use href="#part" transform="rotate(70)"></use>
        <use href="#part" transform="rotate(105)"></use>
        <use href="#part" transform="rotate(140)"></use>
</svg>
</div>
</div>
<script>
mdiv.onclick = () => aud.paused ? (aud.play(),p.unpauseAnimations(),image.play()): (aud.pause(), p.pauseAnimations(),image.stop());
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
picBlk.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>picBlk.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>picBlk.style.animationPlayState = 'paused');
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      // 尺寸
      var width = this.width, height = this.height;
      if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}

var image= document.getElementById("Img");
</script>

梦油 发表于 2024-10-26 16:39

大美妞真美。

老谟深虑 发表于 2024-10-26 17:49

          欣赏老师佳作，点赞！

红影 发表于 2024-10-26 18:26

还以为着仿古胶片是视频呢，原来是透明图片，还加了雪花噪点效果，真细腻的设计{:4_199:}

红影 发表于 2024-10-26 18:27

一键全控。欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2024-10-26 21:09

欣赏亚伦精彩制作{:4_187:}

醉美水芙蓉 发表于 2024-10-26 22:05

页: [1]
查看完整版本: 大美妞 (DJ何鹏版) - 郭玲[复古胶片]