梦江南《剪纸红楼十二金钗平移学习帖》,组图音画,纳兰音画网,音画设计分享诗词朗诵音乐欣赏播放器设计论坛 - Bbs.CnzV.cC - Powered by Discuz! Archiver

论坛首页 › 组图音画 › 梦江南《剪纸红楼十二金钗平移学习帖》

醉美水芙蓉 发表于 2026-8-8 23:08:25

梦江南《剪纸红楼十二金钗平移学习帖》

<meta charset="UTF-8">
<style>
.pa {

   width: 1524px;
   height: 687px;
   border: 8px dotted gray;
   overflow: hidden; /* 重要：屏蔽溢出 */
   position: relative; /* 重要：相对定位 */
   margin: auto;
   left: -380px;
   --state: running; /* 动画开关 */
}
.pa:hover {
   --state: paused; /* 鼠标指针移动到 .pa 时暂停动画 */
}
.son {
   position: absolute; /* 重要：绝对定位 */
   height: 100%; /* 百分百高度 */
   white-space: nowrap; /* 重要：不折行，水平伸展 */
   /* 动画周期时长应根据图片水平衔接的长度调整 */
   animation: scroll 120s linear infinite var(--state);
}
.son img {
   height: 100%; /* 图片高度与容器一致（宽度自适应）*/
   margin: 0 0px; /* 图片之间的左右距离 */
}
@keyframes scroll {
   to { transform: translateX(-50%); }
}
</style>

<div class="pa">
<div class="son">
   
   <img src="https://pan.suyanw.cn/view.php/45820802fcb26f907e4eff38d2681632.jpg" load="lazy" alt="" />
   <img src=" https://pan.suyanw.cn/view.php/e2f4877c898007fa6df256bb7c24bcf4.jpg" load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/0bdc2d6901f2d49c7fe47371f4b62c86.jpg" load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/e3d71f8773848d1c5d356d07f0e2a478.jpg " load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/52ee6c532740ad108fb7b226ce43bc64.jpg " load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/ea62bfdc84f3ade186ea8f0cdb6ec49a.jpg " load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/ae5a42bb12fc2e617f755c74ff212c6f.jpg "load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/586dd1d8e35d9ae39a1261223742f301.jpg "load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/10cef51824163ddb92624ebae05d82ea.jpg " load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/6fba60dd8b4fc06fd74d628a66fd5375.jpg " load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/2ffbe679db5e9491fdd6167f8bc6bbd2.jpg " load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/ef2c597851b1917e2327a76fa0e1eff1.jpg " load="lazy" alt="" />


   <img src="https://pan.suyanw.cn/view.php/45820802fcb26f907e4eff38d2681632.jpg" load="lazy" alt="" />
   <img src=" https://pan.suyanw.cn/view.php/e2f4877c898007fa6df256bb7c24bcf4.jpg" load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/0bdc2d6901f2d49c7fe47371f4b62c86.jpg" load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/e3d71f8773848d1c5d356d07f0e2a478.jpg " load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/52ee6c532740ad108fb7b226ce43bc64.jpg " load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/ea62bfdc84f3ade186ea8f0cdb6ec49a.jpg " load="lazy" alt="" />
<img src="https://pan.suyanw.cn/view.php/ae5a42bb12fc2e617f755c74ff212c6f.jpg " load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/586dd1d8e35d9ae39a1261223742f301.jpg "load="lazy" alt="" />
<img src="https://pan.suyanw.cn/view.php/10cef51824163ddb92624ebae05d82ea.jpg "load="lazy" alt="" />
<img src="https://pan.suyanw.cn/view.php/6fba60dd8b4fc06fd74d628a66fd5375.jpg " load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/2ffbe679db5e9491fdd6167f8bc6bbd2.jpg " load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/ef2c597851b1917e2327a76fa0e1eff1.jpg " load="lazy" alt="" />

</div>
</div>
<p style="text-align: center;">鼠标指针移动到上面方框可暂停动画</p>

<audio src="https://music.163.com/song/media/outer/url?id=29999540.mp3" loop autoplay/>

</td>

醉美水芙蓉 发表于 2026-8-8 23:11:14

<style type="text/css">
:root {--w:300px; --h:412.8px;}

/*以下是旋转体的有关定义    */
/*id选择器 id不能重复命名，本例中 id 为 items*/
#items {
margin: 20px auto;
/*让父元素居中*/
width: var(--w);
/* 旋转体宽度，和单张图片相等 */
height: var(--h);
/*旋转体高度，和单张图片相等 */
/*声明一个3D空间*/
transform-style: preserve-3d;
/* 这句很重要，显示立体效果*/
transform: rotateY(-2.5deg);
/* 略微偏转一点以免前后重叠*/
/*最重要的动画定义来了*/
/*名称animate00这个必须有，随自己心意起个名称*/
/* 一次动画持续时间（秒），本例中是 120秒 */
/* 动画变化曲线，本例中 linear 表示匀速变化，
                  不设定则是两头快中间慢    */
/* 动画次数，本例中的 infinite表示无限次*/
animation: animate00 120s linear infinite;
position: absolute;

&:hover {animation-play-state: paused;}
/* 为内部的图片指定个定位依据*/
/* 这帖旋转体的id 为 items */
/* 以下是定义所有图片的 */

img {
width: var(--w);
/* 图片宽度 */
height: var(--h);
/* 图片高度 */
position: absolute;
/*---------下面几条不是必要的，只是修饰图片所用 -------*/
overflow: hidden;
/* 这条及下面一条是为使图片圆角 */
border-radius: 16px;
border: thin blue inset;
/* 图片边框设置 */
opacity: 0.9;
/* 图片透明度 */
backface-visibility: hidden;
background-color:red;

/*以下为逐一定义图片偏转角度及距中心的距离 */
/*本例中用到16张图片，每张图片逐一偏转 360 / 12 = 30 度 (rotateY)*/
/*距中心距离 = 图片宽度 ÷ 2 ÷ tan(每一图片偏转角度 / 2) */
/*本例中： 320 ÷ 2 ÷ tan(30 ÷ 2) ≈ 600 */
/* 小于计算值图片会挤在一起，略大于是为了使图片间有个小间隔*/
&:nth-child(1) {
transform: rotateY(0deg) translateZ(575px);
}

&:nth-child(2) {
transform: rotateY(30deg) translateZ(575px);
}

&:nth-child(3) {
transform: rotateY(60deg) translateZ(575px);
}

&:nth-child(4) {
transform: rotateY(90deg) translateZ(575px);
}

&:nth-child(5) {
transform: rotateY(120deg) translateZ(575px);
}

&:nth-child(6) {
transform: rotateY(150deg) translateZ(575px);
}

&:nth-child(7) {
transform: rotateY(180deg) translateZ(575px);
}

&:nth-child(8) {
transform: rotateY(210deg) translateZ(575px);
}

&:nth-child(9) {
transform: rotateY(240deg) translateZ(575px);
}

&:nth-child(10) {
transform: rotateY(270deg) translateZ(575px);
}

&:nth-child(11) {
transform: rotateY(300deg) translateZ(575px);
}

&:nth-child(12) {
transform: rotateY(330deg) translateZ(575px);
}
}
}

/*定义一个动画效果，注意动画名animate00 用到了这里*/
/* 这动画定义的含义是，旋转体Y轴方向偏5°，绕X轴方向一周，360° --> 0 ° */
@keyframes animate00 {
from {
   transform: rotateX(-2deg) rotateY(360deg);
}

to {
   transform: rotateX(-2deg) rotateY(0deg);
}
}
</style>
<div style="width:300px;height:412.8px;margin:60px auto 32px calc(50% - 231px);">
<div id="items">
   <img src="https://pan.suyanw.cn/view.php/45820802fcb26f907e4eff38d2681632.jpg" load="lazy" alt="" />
   <img src=" https://pan.suyanw.cn/view.php/e2f4877c898007fa6df256bb7c24bcf4.jpg" load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/0bdc2d6901f2d49c7fe47371f4b62c86.jpg" load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/e3d71f8773848d1c5d356d07f0e2a478.jpg " load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/52ee6c532740ad108fb7b226ce43bc64.jpg " load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/ea62bfdc84f3ade186ea8f0cdb6ec49a.jpg " load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/ae5a42bb12fc2e617f755c74ff212c6f.jpg "load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/586dd1d8e35d9ae39a1261223742f301.jpg "load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/10cef51824163ddb92624ebae05d82ea.jpg " load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/6fba60dd8b4fc06fd74d628a66fd5375.jpg " load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/2ffbe679db5e9491fdd6167f8bc6bbd2.jpg " load="lazy" alt="" />
   <img src="https://pan.suyanw.cn/view.php/ef2c597851b1917e2327a76fa0e1eff1.jpg " load="lazy" alt="" />
</div>
</div>
</td>

klxf 发表于 2026-8-9 22:17:01

好看，谢谢醉美管理员精彩分享

醉美水芙蓉 发表于 2026-8-9 22:37:09

klxf 发表于 2026-8-9 22:17
好看，谢谢醉美管理员精彩分享

谢谢友友光临！

页: [1]

查看完整版本: 梦江南《剪纸红楼十二金钗平移学习帖》