《古邨-花鸟画》翻页特效

红枫发表于 2021-5-23 14:52

黔中一叟 发表于 2021-5-23 18:00

古色古香的，唯美！

相约爱晚亭 发表于 2022-12-16 09:09

欣赏精美的翻页花鸟画作品！

劲松发表于 2024-2-5 23:37

菜鸟来向老师学习

劲松发表于 2024-2-5 23:39

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1912781">
<meta charset="UTF-8">

<style>

@import url("https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap");
.imgLoader {
position: fixed;
      animation: preLoad 1s steps(1);
width: 1px;
height: 1px;
}
@keyframes preLoad {
0% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073acc.jpg");
}
10% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073adc.jpg");
}
20% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073aee.jpg");
}
30% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b0b.jpg");
}
40% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b24.jpg");
}
100% {
display: none;
}
}

.book {
position: relative;
      perspective: 3500px;
      perspective-origin: center 50px;
      transform: scale(1.2);
      filter: drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.25));
}

.page {
width: 210px;
height: 500px;
background-color: #bbb;
position: absolute;
top: 0px;
right: 50%;
      transform-origin: 100% 100%;
border: solid #c6c8ea 0px;
background-size: 420px 500px;
background-position: center;
}
.page:nth-child(1) {
      transform: rotateX(60deg) rotateY(3deg);
}
.page:nth-child(2) {
      transform: rotateX(60deg) rotateY(4.5deg);
}
.page:nth-child(3) {
      transform: rotateX(60deg) rotateY(6deg);
      animation: nextPage 25s infinite -24s steps(1);
background-size: 420px 500px;
background-position: -2px -2px;
}
.page:nth-child(4) {
      transform: rotateX(60deg) rotateY(177deg);
}
.page:nth-child(5) {
      transform: rotateX(60deg) rotateY(175.5deg);
}
.page:nth-child(6) {
      transform: rotateX(60deg) rotateY(174deg);
overflow: hidden;
}
.page:nth-child(6)::after {
content: '';
width: 210px;
height: 500px;
position: absolute;
top: 0px;
right: 0%;
      transform-origin: center;
      transform: rotateY(180deg);
      animation: nextPage 25s -20s infinite steps(1);
background-size: 420px 500px;
background-position: 100% -2px;
}
@keyframes nextPage {
0% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073acc.jpg");
}
20% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073adc.jpg");
}
40% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073aee.jpg");
}
60% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b0b.jpg");
}
80% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b24.jpg");
}
}
.gap {
width: 10px;
height: 500px;
background: none;
      transform: rotateX(60deg);
      transform-origin: bottom;
position: absolute;
top: 0px;
left: calc(50% - 5px);
}
.gap::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
      transform: translate(-50%, 50%);
background-color: #555;
width: 10px;
height: 5px;
border-radius: 50%;
}

.flip {
width: 32px;
height: 500px;
position: absolute;
top: 0px;
      transform-origin: 100% 100%;
right: 100%;
border: solid #c6c8ea;
border-width: 1px 0px;
      perspective: 4200px;
      perspective-origin: center;
      transform-style: preserve-3d;
background-size: 420px 500px;
}
.flip::after {
content: '';
position: absolute;
top: 0px;
right: 0%;
width: 100%;
height: 100%;
      transform-origin: center;
background-size: 420px 500px;
}
.flip.flip1 {
right: 50%;
      animation: flip1 5s infinite ease-in-out;
border-width: 2px 2px 2px 0;
}
.flip.flip1::after {
      animation: nextFlip1 25s -20s infinite steps(1);
}
.flip:not(.flip1) {
right: calc(100% - 2px);
top: -2px;
      transform-origin: right;
      animation: flip2 5s ease-in-out infinite;
}
.flip.flip2::after {
      animation: nextFlip2 25s -20s infinite steps(1);
}
.flip.flip3::after {
      animation: nextFlip3 25s -20s infinite steps(1);
}
.flip.flip4::after {
      animation: nextFlip4 25s -20s infinite steps(1);
}
.flip.flip5::after {
      animation: nextFlip5 25s -20s infinite steps(1);
}
.flip.flip6::after {
      animation: nextFlip6 25s -20s infinite steps(1);
}
.flip.flip7::after {
      animation: nextFlip7 25s -20s infinite steps(1);
}
.flip.flip7 {
width: 30px;
border-width: 2px 0px 2px 2px;
}
.flip.flip7::after {
      animation: nextFlip7 25s -20s infinite steps(1);
}
@keyframes flip1 {
0%, 20% {
         transform: rotateX(60deg) rotateY(6deg);
}
80%, 100% {
         transform: rotateX(60deg) rotateY(174deg);
}
}
@keyframes flip2 {
0%, 20% {
         transform: rotateY(0deg) translateY(0px);
}
50% {
         transform: rotateY(-15deg) translateY(0px);
}
}
@keyframes nextFlip1 {
0% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073acc.jpg");
background-position: -178px -2px;
         transform: rotateY(0deg);
}
10% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073adc.jpg");
background-position: -210px -2px;
         transform: rotateY(180deg);
}
20% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073adc.jpg");
background-position: -178px -2px;
         transform: rotateY(0deg);
}
30% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073aee.jpg");
background-position: -210px -2px;
         transform: rotateY(180deg);
}
40% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073aee.jpg");
background-position: -178px -2px;
         transform: rotateY(0deg);
}
50% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b0b.jpg");
background-position: -210px -2px;
         transform: rotateY(180deg);
}
60% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b0b.jpg");
background-position: -178px -2px;
         transform: rotateY(0deg);
}
70% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b24.jpg");
background-position: -210px -2px;
         transform: rotateY(180deg);
}
80% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b24.jpg");
background-position: -178px -2px;
         transform: rotateY(0deg);
}
90% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073acc.jpg");
background-position: -210px -2px;
         transform: rotateY(180deg);
}
}
@keyframes nextFlip2 {
0% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073acc.jpg");
background-position: -148px -2px;
         transform: rotateY(0deg);
}
10.5% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073adc.jpg");
background-position: -238px -2px;
         transform: rotateY(180deg);
}
20% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073adc.jpg");
background-position: -148px -2px;
         transform: rotateY(0deg);
}
30.5% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073aee.jpg");
background-position: -238px -2px;
         transform: rotateY(180deg);
}
40% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073aee.jpg");
background-position: -148px -2px;
         transform: rotateY(0deg);
}
50.5% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b0b.jpg");
background-position: -238px -2px;
         transform: rotateY(180deg);
}
60% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b0b.jpg");
background-position: -148px -2px;
         transform: rotateY(0deg);
}
70.5% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b24.jpg");
background-position: -238px -2px;
         transform: rotateY(180deg);
}
80% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b24.jpg");
background-position: -148px -2px;
         transform: rotateY(0deg);
}
90.5% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073acc.jpg");
background-position: -238px -2px;
         transform: rotateY(180deg);
}
}
@keyframes nextFlip3 {
0% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073acc.jpg");
background-position: -118px -2px;
         transform: rotateY(0deg);
}
11% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073adc.jpg");
background-position: -268px -2px;
         transform: rotateY(180deg);
}
20% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073adc.jpg");
background-position: -118px -2px;
         transform: rotateY(0deg);
}
31% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073aee.jpg");
background-position: -268px -2px;
         transform: rotateY(180deg);
}
40% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073aee.jpg");
background-position: -118px -2px;
         transform: rotateY(0deg);
}
51% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b0b.jpg");
background-position: -268px -2px;
         transform: rotateY(180deg);
}
60% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b0b.jpg");
background-position: -118px -2px;
         transform: rotateY(0deg);
}
71% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b24.jpg");
background-position: -268px -2px;
         transform: rotateY(180deg);
}
80% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b24.jpg");
background-position: -118px -2px;
         transform: rotateY(0deg);
}
91% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073acc.jpg");
background-position: -268px -2px;
         transform: rotateY(180deg);
}
}
@keyframes nextFlip4 {
0% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073acc.jpg");
background-position: -88px -2px;
         transform: rotateY(0deg);
}
11.5% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073adc.jpg");
background-position: -298px -2px;
         transform: rotateY(180deg);
}
20% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073adc.jpg");
background-position: -88px -2px;
         transform: rotateY(0deg);
}
31.5% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073aee.jpg");
background-position: -298px -2px;
         transform: rotateY(180deg);
}
40% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073aee.jpg");
background-position: -88px -2px;
         transform: rotateY(0deg);
}
51.5% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b0b.jpg");
background-position: -298px -2px;
         transform: rotateY(180deg);
}
60% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b0b.jpg");
background-position: -88px -2px;
         transform: rotateY(0deg);
}
71.5% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b24.jpg");
background-position: -298px -2px;
         transform: rotateY(180deg);
}
80% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b24.jpg");
background-position: -88px -2px;
         transform: rotateY(0deg);
}
91.5% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073acc.jpg");
background-position: -298px -2px;
         transform: rotateY(180deg);
}
}
@keyframes nextFlip5 {
0% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073acc.jpg");
background-position: -58px -2px;
         transform: rotateY(0deg);
}
12% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073adc.jpg");
background-position: -328px -2px;
         transform: rotateY(180deg);
}
20% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073adc.jpg");
background-position: -58px -2px;
         transform: rotateY(0deg);
}
32% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073aee.jpg");
background-position: -328px -2px;
         transform: rotateY(180deg);
}
40% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073aee.jpg");
background-position: -58px -2px;
         transform: rotateY(0deg);
}
52% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b0b.jpg");
background-position: -328px -2px;
         transform: rotateY(180deg);
}
60% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b0b.jpg");
background-position: -58px -2px;
         transform: rotateY(0deg);
}
72% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b24.jpg");
background-position: -328px -2px;
         transform: rotateY(180deg);
}
80% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b24.jpg");
background-position: -58px -2px;
         transform: rotateY(0deg);
}
92% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073acc.jpg");
background-position: -328px -2px;
         transform: rotateY(180deg);
}
}
@keyframes nextFlip6 {
0% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073acc.jpg");
background-position: -28px -2px;
         transform: rotateY(0deg);
}
12.5% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073adc.jpg");
background-position: -358px -2px;
         transform: rotateY(180deg);
}
20% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073adc.jpg");
background-position: -28px -2px;
         transform: rotateY(0deg);
}
32.5% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073aee.jpg");
background-position: -358px -2px;
         transform: rotateY(180deg);
}
40% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073aee.jpg");
background-position: -28px -2px;
         transform: rotateY(0deg);
}
52.5% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b0b.jpg");
background-position: -358px -2px;
         transform: rotateY(180deg);
}
60% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b0b.jpg");
background-position: -28px -2px;
         transform: rotateY(0deg);
}
72.5% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b24.jpg");
background-position: -358px -2px;
         transform: rotateY(180deg);
}
80% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b24.jpg");
background-position: -28px -2px;
         transform: rotateY(0deg);
}
92.5% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073acc.jpg");
background-position: -358px -2px;
         transform: rotateY(180deg);
}
}
@keyframes nextFlip7 {
0% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073acc.jpg");
background-position: -2px -2px;
         transform: rotateY(0deg);
}
13% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073adc.jpg");
background-position: -388px -2px;
         transform: rotateY(180deg);
}
20% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073adc.jpg");
background-position: -2px -2px;
         transform: rotateY(0deg);
}
33% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073aee.jpg");
background-position: -388px -2px;
         transform: rotateY(180deg);
}
40% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073aee.jpg");
background-position: -2px -2px;
         transform: rotateY(0deg);
}
53% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b0b.jpg");
background-position: -388px -2px;
         transform: rotateY(180deg);
}
60% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b0b.jpg");
background-position: -2px -2px;
         transform: rotateY(0deg);
}
73% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b24.jpg");
background-position: -388px -2px;
         transform: rotateY(180deg);
}
80% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073b24.jpg");
background-position: -2px -2px;
         transform: rotateY(0deg);
}
93% {
background-image: url("https://pic.imgdb.cn/item/60a61d296ae4f77d35073acc.jpg");
background-position: -388px -2px;
         transform: rotateY(180deg);
}
}
.twitterLink {
position: fixed;
bottom: 0.5em;
right: 0.5em;
}
.twitterLink img {
width: 2em;
      filter: grayscale(100%);
transition: -webkit-filter 0.25s;
transition: filter 0.25s;
transition: filter 0.25s, -webkit-filter 0.25s;
}
.twitterLink img:hover {
      filter: grayscale(0%);
}

</style>

<div style="position:relative;left:100px;top:50px;width:800px;height:600px;background-color: #f8f985;overflow:hidden;border-radius:360px;">

<div class="book" style="position:relative;top:-70px;">

<div class="pages">
   <div class="page"></div>
   <div class="page"></div>
   <div class="page"></div>
   <div class="page"></div>
   <div class="page"></div>
   <div class="page"></div>
</div>

<div class="flips">
   <div class="flip flip1">
   <div class="flip flip2">
      <div class="flip flip3">
         <div class="flip flip4">
         <div class="flip flip5">
            <div class="flip flip6">
               <div class="flip flip7"></div>
            </div>
         </div>
         </div>
      </div>
   </div>
   </div>
</div>
</div>

<div style="position: relative;left:250px;top:30px;width: 300px; height: 300px;z-index:900;" id="layer5">

<p align="center"><strong><font size="5" color="#ff6600"><b>花鸟画集：古邨</b></font></p>
<p align="center"><font size="5" color="#ff6600"><b>网页编制：深秋红枫</b></font></strong></p>
</div>

<div style="position: relative; width: 300px; height: 300px; z-index: 999; left:550px; top:-260px;" id="layer3">

<img src="https://pic.imgdb.cn/item/60a61d416ae4f77d3507f0bc.gif" width=200px; height=200px /></div>

<div style="position: relative; width: 250px; height: 280px; z-index: 900; left: 50px; top: -370px" id="layer4">

<img src="https://pic.imgdb.cn/item/60a61d416ae4f77d3507f0cd.gif" width=250px; height=280px /></div>

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

</div></td></tr></table>

劲松发表于 2024-2-5 23:41

不知道代码对不对，表面上好像是发出来了，希望老师指点，谢谢

页: [1]

中画网's Archiver

《古邨-花鸟画》 翻页特效

《古邨-花鸟画》翻页特效