【影.印记】风光摄影《楼影叠晖》
楼影叠晖<BR>摄影素材/网络 动图制作/傲雷影儿
<div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1084987">
<style>
#mydiv {
margin: 50px 0 30px calc(50% - 840px);
display: grid;
place-items: center;
width: 1600px;
height: 850px;
background: lightblue url('https://www.junzhuan.com/data/attachment/album/202601/10/144116wiwiwzphu3l3wwrv.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 1;
}
#top-png {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 10;
pointer-events: none;
}
#vid {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
opacity: .10;
z-index: 6;
mask: none !important;
-webkit-mask: none !important;
clip-path: none !important;
}
.slide-container {
position: absolute;
width: 1700px;
height: 850px;
top: 0;
left: 0;
z-index: 5;
overflow: hidden;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
background-size: cover;
background-position: center;
animation-duration: 100s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
transform: translateZ(0);
backface-visibility: hidden;
mask: none !important;
-webkit-mask: none !important;
clip-path: none !important;
}
.slide1 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202601/10/144116meallxlwurxluulx.jpg');
animation-name: fadeInOut;
animation-delay: 0s;
}
.slide2 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202601/10/144116wiwiwzphu3l3wwrv.jpg');
animation-name: slideInRight;
animation-delay: 5s;
}
.slide3 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202601/10/144116fpkjc3gxccapcwfr.jpg');
animation-name: rotateIn;
animation-delay: 10s;
}
.slide4 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202601/10/144116v6t8zuruonuo1448.jpg');
animation-name: scaleIn;
animation-delay: 15s;
}
.slide5 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202601/10/144116kvmmpub3vmu5mumz.jpg');
animation-name: blurIn;
animation-delay: 20s;
}
.slide6 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202601/10/144116mnildq666ob5dndn.jpg');
animation-name: slideInUp;
animation-delay: 25s;
}
.slide7 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202601/10/144116j0z7slofio7by0ol.jpg');
animation-name: flipInX;
animation-delay: 30s;
}
.slide8 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202601/10/144116p5jjizbjn6h9hgu1.jpg');
animation-name: skewIn;
animation-delay: 35s;
}
.slide9 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202601/10/144116m7ooxxxsxjtpsbsc.jpg');
animation-name: colorFadeIn;
animation-delay: 40s;
}
.slide10 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202601/10/144117ticcse2wzihsqs0j.jpg');
animation-name: clipPathIn;
animation-delay: 45s;
}
.slide11 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202601/10/144117cuey4unffnqn66n7.jpg');
animation-name: rotate3dIn;
animation-delay: 50s;
}
.slide12 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202601/10/144117u1svqlhegvxa3204.jpg');
animation-name: gridIn;
animation-delay: 55s;
}
.slide13 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202601/10/144117spxknkjonxngwqfz.jpg');
animation-name: waveIn;
animation-delay: 60s;
}
.slide14 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202601/10/144116wiwiwzphu3l3wwrv.jpg');
animation-name: shadowIn;
animation-delay: 65s;
}
.slide15 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202601/10/144116meallxlwurxluulx.jpg');
animation-name: doubleFadeIn;
animation-delay: 70s;
}
.slide16 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202601/10/144116fpkjc3gxccapcwfr.jpg');
animation-name: bottomLeftZoomIn;
animation-delay: 75s;
}
.slide17 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202601/10/144116mnildq666ob5dndn.jpg');
animation-name: bottomLeftFadeIn;
animation-delay: 80s;
}
.slide18 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202601/10/144116m7ooxxxsxjtpsbsc.jpg');
animation-name: bottomLeftSlideIn;
animation-delay: 85s;
}
.slide19 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202601/10/144117ticcse2wzihsqs0j.jpg');
animation-name: bottomLeftBlurIn;
animation-delay: 90s;
}
.slide20 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202601/10/144116p5jjizbjn6h9hgu1.jpg');
animation-name: bottomLeftRotateIn;
animation-delay: 95s;
}
@keyframes fadeInOut {
0%, 18% { opacity: 1; }
20%, 100% { opacity: 0; }
}
@keyframes slideInRight {
0%, 2% { opacity: 0; transform: translateX(100%); }
10%, 18% { opacity: 1; transform: translateX(0); }
20%, 100% { opacity: 0; transform: translateX(-100%); }
}
@keyframes rotateIn {
0%, 2% { opacity: 0; transform: rotate(90deg) scale(0.5); }
10%, 18% { opacity: 1; transform: rotate(0) scale(1); }
20%, 100% { opacity: 0; transform: rotate(-90deg) scale(0.5); }
}
@keyframes scaleIn {
0%, 2% { opacity: 0; transform: scale(0); }
10%, 18% { opacity: 1; transform: scale(1); }
20%, 100% { opacity: 0; transform: scale(2); }
}
@keyframes blurIn {
0%, 2% { opacity: 0; filter: blur(20px); }
10%, 18% { opacity: 1; filter: blur(0); }
20%, 100% { opacity: 0; filter: blur(20px); }
}
@keyframes slideInUp {
0%, 2% { opacity: 0; transform: translateY(80%); }
10%, 18% { opacity: 1; transform: translateY(0); }
20%, 100% { opacity: 0; transform: translateY(-80%); }
}
@keyframes flipInX {
0%, 2% { opacity: 0; transform: perspective(400px) rotateX(60deg); }
10%, 18% { opacity: 1; transform: perspective(400px) rotateX(0) translateY(0); }
20%, 100% { opacity: 0; transform: perspective(400px) rotateX(-60deg); }
}
@keyframes skewIn {
0%, 2% { opacity: 0; transform: skew(10deg, 5deg) scale(0.9); }
10%, 18% { opacity: 1; transform: skew(0) scale(1); }
20%, 100% { opacity: 0; transform: skew(-10deg, -5deg) scale(0.9); }
}
@keyframes colorFadeIn {
0%, 2% { opacity: 0; filter: grayscale(80%) brightness(0.7); }
10%, 18% { opacity: 1; filter: grayscale(0%) brightness(1); }
20%, 100% { opacity: 0; filter: grayscale(80%) brightness(0.7); }
}
@keyframes clipPathIn {
0%, 2% { opacity: 0; clip-path: circle(5% at 50% 50%); }
10%, 18% { opacity: 1; clip-path: circle(95% at 50% 50%); }
20%, 100% { opacity: 0; clip-path: circle(5% at 50% 50%); }
}
@keyframes rotate3dIn {
0%, 2% { opacity: 0; transform: rotate3d(1, 1, 0, 180deg) scale(0.8); }
10%, 18% { opacity: 1; transform: rotate3d(0, 0, 0, 0) scale(1); }
20%, 100% { opacity: 0; transform: rotate3d(-1, -1, 0, 180deg) scale(0.8); }
}
@keyframes gridIn {
0%, 2% {
opacity: 0;
clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%);
}
10%, 18% {
opacity: 1;
clip-path: polygon(
0% 0%, 33% 0%, 33% 33%, 0% 33%,
33% 0%, 66% 0%, 66% 33%, 33% 33%,
66% 0%, 100% 0%, 100% 33%, 66% 33%,
0% 33%, 33% 33%, 33% 66%, 0% 66%,
33% 33%, 66% 33%, 66% 66%, 33% 66%,
66% 33%, 100% 33%, 100% 66%, 66% 66%,
0% 66%, 33% 66%, 33% 100%, 0% 100%,
33% 66%, 66% 66%, 66% 100%, 33% 100%,
66% 66%, 100% 66%, 100% 100%, 66% 100%
);
}
20%, 100% {
opacity: 0;
clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
}
}
@keyframes waveIn {
0%, 2% { opacity: 0; transform: translateY(50%) skewY(15deg) scale(0.9); }
5% { transform: translateY(25%) skewY(7deg) scale(0.95); }
10%, 18% { opacity: 1; transform: translateY(0) skewY(0) scale(1); }
20%, 100% { opacity: 0; transform: translateY(-50%) skewY(-15deg) scale(0.9); }
}
@keyframes shadowIn {
0%, 2% {
opacity: 0;
transform: scale(0.95);
box-shadow: 0 0 0 rgba(0,0,0,0), inset 0 0 50px rgba(0,0,0,0.8);
}
10%, 18% {
opacity: 1;
transform: scale(1);
box-shadow: 0 0 30px rgba(255,255,255,0.5), inset 0 0 0 rgba(0,0,0,0);
}
20%, 100% {
opacity: 0;
transform: scale(0.95);
box-shadow: 0 0 0 rgba(0,0,0,0), inset 0 0 50px rgba(0,0,0,0.8);
}
}
@keyframes doubleFadeIn {
0%, 2% { opacity: 0; filter: brightness(0) contrast(2); }
5% { opacity: 0.3; filter: brightness(0.4) contrast(1.5); }
10%, 18% { opacity: 1; filter: brightness(1) contrast(1); }
20%, 100% { opacity: 0; filter: brightness(0) contrast(2); }
}
@keyframes bottomLeftZoomIn {
0%, 2% {
opacity: 0;
transform: scale(0);
transform-origin: 0% 100%;
}
10%, 18% {
opacity: 1;
transform: scale(1);
transform-origin: 0% 100%;
}
20%, 100% {
opacity: 0;
transform: scale(2);
transform-origin: 0% 100%;
}
}
@keyframes bottomLeftFadeIn {
0%, 2% {
opacity: 0;
clip-path: inset(80% 80% 0 0);
}
10%, 18% {
opacity: 1;
clip-path: inset(0 0 0 0);
}
20%, 100% {
opacity: 0;
clip-path: inset(0 0 80% 80%);
}
}
@keyframes bottomLeftSlideIn {
0%, 2% {
opacity: 0;
transform: translate(-50%, 50%) rotate(-15deg);
}
10%, 18% {
opacity: 1;
transform: translate(0, 0) rotate(0);
}
20%, 100% {
opacity: 0;
transform: translate(50%, -50%) rotate(15deg);
}
}
@keyframes bottomLeftBlurIn {
0%, 2% {
opacity: 0;
filter: blur(30px);
transform-origin: 0% 100%;
}
5% { filter: blur(20px); opacity: 0.2; }
10%, 18% {
opacity: 1;
filter: blur(0);
transform-origin: 0% 100%;
}
20%, 100% {
opacity: 0;
filter: blur(30px);
transform-origin: 0% 100%;
}
}
@keyframes bottomLeftRotateIn {
0%, 2% {
opacity: 0;
transform: rotate(-90deg) scale(0.8);
transform-origin: 0% 100%;
}
10%, 18% {
opacity: 1;
transform: rotate(0) scale(1);
transform-origin: 0% 100%;
}
20%, 100% {
opacity: 0;
transform: rotate(90deg) scale(0.8);
transform-origin: 0% 100%;
}
}
</style>
<div id="mydiv">
<img id="top-png" src="https://www.junzhuan.com/data/attachment/album/202601/10/165741pz6yp01el0e09rae.png" alt="fg">
<audio style="width:0px; height:0px;" controls="controls" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=1391712.mp3" type="audio/mpeg"></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/29/99/5fa0d6d018bbc.mp4" autoplay loop muted></video>
<div class="slide-container">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
<div class="slide slide5"></div>
<div class="slide slide6"></div>
<div class="slide slide7"></div>
<div class="slide slide8"></div>
<div class="slide slide9"></div>
<div class="slide slide10"></div>
<div class="slide slide11"></div>
<div class="slide slide12"></div>
<div class="slide slide13"></div>
<div class="slide slide14"></div>
<div class="slide slide15"></div>
<div class="slide slide16"></div>
<div class="slide slide17"></div>
<div class="slide slide18"></div>
<div class="slide slide19"></div>
<div class="slide slide20"></div>
</div>
</div></td></tr></table><BR><BR><BR><BR>