亚伦影音工作室 发表于 2026-8-7 21:56

仿抖音视频特效[待完善]

本帖最后由 亚伦影音工作室 于 2026-8-8 21:29 编辑 <br /><br /><style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
:root {--ocean-dark: #0a3d62;--ocean-medium: #3c6382;--ocean-light: #60a3bc;--sand-color: #f5e1b5;--shell-light: #f0e6d2;--shell-dark: #d9c9a3;--color-1: #fff887;--color-2: #fc89e5;--color-3: #fd27d2;--color-4: #9cf9fc;--color-5: #0dd7de;--color-6: #fbcb6d;--color-7: #fb8739;--color-8: #fa5f57;--starfish-body: #fb2f39;--starfish-accent: #fb2f39;--starfish-light: #fbb5b8;}
#papa {position: relative;display: grid;place-items: center;margin: 30px 0;width: 1260px;height: 720px;left: calc(50% - 81px);transform: translateX(-50%);box-shadow: 3px 3px 6px gray;overflow: hidden;z-index: 10000;background:url(https://pic1.imgdb.cn/item/6a043d8b6f6a2d474b49f2a1.png) no-repeat center/cover;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";}
      #intro {margin: 0px0px;z-index:1;
      width: 100%;
      height:100%;
      position: absolute;
background:#ff0000;
background-size: cover;
opacity:0.8;
animation: hue-rotate 6s linear infinite;
}
@keyframes hue-rotate {
from {
   filter: hue-rotate(0);
}
to {
   filter: hue-rotate(360deg);
}
}
#tu{position:absolute;z-index: 4;
      width: 100%;
      height: 100%;-webkit-mask-image: radial-gradient(black 15% ,transparent 85%);
      background:url(https://pic1.imgdb.cn/item/6a043d8b6f6a2d474b49f2a1.png)no-repeat center/cover;
animation:cover3s linear infinite;
         bottom: 0px;
left:0%;
}
@keyframes cover{0% {
          opacity: 1; transform: scale(1);
          
        }
        80% {
          opacity: 1;
          transform: scale(1);
        }
       
       
        100% {
          opacity: 0; transform: scale(6);
          
        }
       
}
#dt{position:absolute;z-index: 5;
      width: 100%;
      height: 100%;mix-blend-mode: lighten;
      background:url(https://image.hnol.net/c/2026-08/07/19/202608071933034661-5769293.gif)no-repeat center/cover;
         bottom: 0px;
left:0%;
}

#fullscreen { opacity:1;position: absolute; width: 20px; height: 20px;   bottom:26px; cursor: pointer;right:1%;z-index: 40;filter:invert(0%);}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 20px; height: 20px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 20px; height: 20px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
</style>
<div id="papa">
<div id="tu"></div>
<div id="intro"></div>
<div id="dt"></div>
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>

<audio id="aud"src="https://www.djdvd.com/plug/down.php?ac=music&lk=mp3&id=5a4768325a474e6f64323175" loop autoplay ></audio>
</div>
<script>

let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}

</script>





红影 发表于 2026-8-7 23:01

这制作真漂亮，歌曲也好听，欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2026-8-7 23:23

新颖别致，好听好看，谢谢亚伦老师精彩分享{:4_190:}

小辣椒 发表于 2026-8-9 21:35

亚纶最喜欢美女了{:4_172:}

小辣椒 发表于 2026-8-9 21:35

欣赏亚纶精彩的分享{:4_187:}
页: [1]
查看完整版本: 仿抖音视频特效[待完善]