梦江南 发表于 2024-10-27 17:37

学习彩云归老师多图片推出的代码


<style>
#papa{
        position: relative;
        width: 960px;
        height: 700px;
      margin-left:-100px;
        margin-top:0px;
        border: 0px solid rgba(36, 201, 219,.95);
      border-radius: 0px;
        background:#000 url(https://pic.imgdb.cn/item/66135afc68eb9357135ffd24.jpg)no-repeat center/cover;
        overflow: hidden;

}
#papa > video {
        position: absolute;
        width: 100%;
        height:100%;
        object-fit: cover;mix-blend-mode: screen;
        -webkit-mask: linear-gradient(to right top, red 1%, transparent 100%, transparent);
        transform: rotateX(360deg);pointer-events: none;
}
.img-container {
position: relative;
height:500px;
width: 520px;left:440px;top:10%;
perspective: 500px;
transform-style: preserve-3d;
}
.box {      
width: 500px;
height: 520px;
border-radius: 0px;
overflow: hidden;
border: 3px solid #ccc;
position: absolute;
top: 50%;
transition: 800ms ease-in-out;
}

.box img {
width: 100%;
height: 100%;
}

.box:first-of-type {
z-index: 1;
opacity: 0;
left: 15%;
transform: translate(-100%, -100%) rotateY(50deg);
}

.box:nth-of-type(2) {
opacity: 1;
left: 20%;
transform: translate(-50%, -50%) rotateY(-10deg);
z-index: 1;
}

.box:nth-of-type(3) {
left: 25%;
opacity: 0.90;
color: #eee;
z-index: 10;
transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-40px);
}
.box:nth-of-type(4) {
z-index: 8;
opacity: 0.80;
left:30%;
transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-80px);
}

.box:nth-of-type(5) {
z-index: 7;
opacity: 0.70;
left: 35%;
transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-120px);
}

.box:nth-of-type(6) {
z-index: 6;
opacity: 0.6;
left: 40%;
transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-160px);
}

.box:nth-of-type(7) {
z-index: 5;
opacity: 0.5;
left: 45%;
transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-200px);
}
.box:nth-of-type(8) {
z-index: 4;
opacity: 0.4;
left: 50%;
transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-240px);
}
.box:nth-of-type(9) {
z-index: 3;
opacity: 0.3;
left: 55%;
transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-280px);
}
.box:nth-of-type(10) {
z-index: 2;
opacity: 0;
left: 60%;
transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-320px);
}
</style>

<div id="papa" >
<video src="https://img.tukuppt.com/video_show/2629112/00/02/06/5b509c34df30f.mp4" autoplay loop muted></video>
<div class="img-container" >
      <div class="box">
      <img src="https://img-volc.jianpian.info/38207658/article/20241027/b3ae57701c4c4b619413a571d12f50e6.jpg">
      </div>
      <div class="box">
         <img src="https://img-volc.jianpian.info/38207658/article/20241027/3f54e21605f7423dabdac3335fccf712.jpg">
      </div>
      <div class="box">
      <img src="https://img-volc.jianpian.info/38207658/article/20241027/cf00e737c5a948bea780b179844162c2.jpg">
      </div>
      <div class="box">
         <img src="https://img-volc.jianpian.info/38207658/article/20241027/279e362da71e498a8f51f749cf067898.jpg">
      </div>
      <div class="box">
         <img src="https://img-volc.jianpian.info/38207658/article/20241027/5683a1d19a54449bb19d740abfda5626.jpg">
      </div>
      <div class="box">
      <img src="https://img-volc.jianpian.info/38207658/article/20241027/e83adb73e86f4827b618d2ace1c62d27.jpg">
      </div>
      <div class="box">
         <img src="https://img-volc.jianpian.info/38207658/article/20241027/c5d71505c28c48ac8854527bf72220d2.jpg">
      </div>
      <div class="box">
         <img src="https://img-volc.jianpian.info/38207658/article/20241027/641c09fe728d4ac2a18bc4df86159c10.jpg">
      </div>
      <div class="box">
         <img src="https://img-volc.jianpian.info/38207658/article/20241027/787cfab03a3e47e5aee1e6cd0a2da0b8.jpg">
      </div>
      <div class="box">
         <img src="https://img-volc.jianpian.info/38207658/article/20241027/513bacc481cb4c82a0be7e0dda7a00b5.jpg">
      </div>
</div>
</div>

<script>
let imgContainer = document.querySelector(".img-container");
setInterval(() => {
      let last = imgContainer.firstElementChild;
      last.remove();
      imgContainer.appendChild(last);
      }, 2500);
</script><video autoplay="" controls="" height="0"

<audio src="http://cccimg.com/view.php/695430a8c7ffe4443098580b0b241e22.mp3"loop autoplay>
</audio>

小文 发表于 2024-10-27 18:44

厉害！制作优秀，就是人不美，呵呵！问好！

小辣椒 发表于 2024-10-27 19:54

欣赏梦江南的精彩代码制作{:4_187:}

小辣椒 发表于 2024-10-27 19:55

这个应该是亚伦老师的原创图片转换代码制作效果

红影 发表于 2024-10-27 19:59

做这个要准备很多图图呢，非常不容易。
制作非常漂亮，欣赏江南好帖{:4_187:}

起个网名好难 发表于 2024-10-27 20:01

欣赏美帖

梦油 发表于 2024-10-27 21:09

看不尽的美人。

梦江南 发表于 2024-10-28 11:22

小文 发表于 2024-10-27 18:44
厉害！制作优秀，就是人不美，呵呵！问好！

问好老师，谢谢沙发支持。这图片是微信中拍摄人像姿势的模特，所以不是漂亮美女。

梦江南 发表于 2024-10-28 11:23

小辣椒 发表于 2024-10-27 19:54
欣赏梦江南的精彩代码制作

问好小辣椒，谢谢支持。{:4_204:}

梦江南 发表于 2024-10-28 11:26

小辣椒 发表于 2024-10-27 19:55
这个应该是亚伦老师的原创图片转换代码制作效果

这个倒不知道，彩云归老师在这里也发了，我是按照彩云归老师的代码做的。

梦江南 发表于 2024-10-28 11:32

红影 发表于 2024-10-27 19:59
做这个要准备很多图图呢，非常不容易。
制作非常漂亮，欣赏江南好帖

这些图片都 是从微信中人家讲怎么拍摄人像姿势中裁图下来的，再作了尺寸调整。这个倒还好，现在主要问题是163音乐这几天打不开，只能自己录音再上传得到地址，愁这个上传地址能否长久。

梦江南 发表于 2024-10-28 11:33

起个网名好难 发表于 2024-10-27 20:01
欣赏美帖

问好老师，谢谢支持。

梦江南 发表于 2024-10-28 11:34

梦油 发表于 2024-10-27 21:09
看不尽的美人。

问好梦油老师，谢谢支持。

小文 发表于 2024-10-28 11:35

梦江南 发表于 2024-10-28 11:22
问好老师，谢谢沙发支持。这图片是微信中拍摄人像姿势的模特，所以不是漂亮美女。

祝开心快乐！只是玩笑，不必当真的。

梦江南 发表于 2024-10-28 15:14

小文 发表于 2024-10-28 11:35
祝开心快乐！只是玩笑，不必当真的。

没事的，问好。

梦油 发表于 2024-10-28 17:09

梦江南 发表于 2024-10-28 11:34
问好梦油老师，谢谢支持。

梦江南朋友别客气。

小辣椒 发表于 2024-10-28 21:23

梦江南 发表于 2024-10-28 11:23
问好小辣椒，谢谢支持。

不客气哦

再次欣赏梦江南的精彩制作{:4_171:}

小辣椒 发表于 2024-10-28 21:23

梦江南 发表于 2024-10-28 11:26
这个倒不知道，彩云归老师在这里也发了，我是按照彩云归老师的代码做的。

是的，彩云归老师也是代码编辑高手的

红影 发表于 2024-10-28 23:13

梦江南 发表于 2024-10-28 11:32
这些图片都 是从微信中人家讲怎么拍摄人像姿势中裁图下来的，再作了尺寸调整。这个倒还好，现在主要问题 ...

哦，这两天没去网易云，还不知道这事呢。

梦江南 发表于 2024-10-29 07:34

梦油 发表于 2024-10-28 17:09
梦江南朋友别客气。

秋高气爽又一天，梦油老师早上好！
页: [1] 2 3
查看完整版本: 学习彩云归老师多图片推出的代码