【花潮邀月庆华诞】动感风光美图《翡翠湖公园》
翡翠湖公园<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: 900px;
background: lightblue url('https://www.junzhuan.com/data/attachment/album/202603/30/103805qceoah0qqpinzpvq.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: .40;
z-index: 6;
mask: none !important;
-webkit-mask: none !important;
clip-path: none !important;
}
.slide-container {
position: absolute;
width: 1600px;
height: 900px;
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/202609/05/195355jg2h663pe8wwgzzp.jpg');
animation-name: fadeInOut;
animation-delay: 0s;
}
.slide2 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202609/05/195355tiykby1byznt4ts1.jpg');
animation-name: slideInRight;
animation-delay: 5s;
}
.slide3 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202609/05/195354x6o4picx7qp4phb3.jpg');
animation-name: rotateIn;
animation-delay: 10s;
}
.slide4 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202609/05/195354fhupmlcuult5z4th.jpg');
animation-name: scaleIn;
animation-delay: 15s;
}
.slide5 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202609/05/195354wwbaotobgapqqppl.jpg');
animation-name: blurIn;
animation-delay: 20s;
}
.slide6 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202609/05/195357wxni22unzcn15thn.jpg');
animation-name: slideInUp;
animation-delay: 25s;
}
.slide7 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202609/05/195357a5qmvq9qkau6tmi4.jpg');
animation-name: flipInX;
animation-delay: 30s;
}
.slide8 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202609/05/195357j37pcpmp1q2psp4o.jpg');
animation-name: skewIn;
animation-delay: 35s;
}
.slide9 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202609/05/195357ovvwwvaarxevberv.jpg');
animation-name: colorFadeIn;
animation-delay: 40s;
}
.slide10 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202609/05/195357jtz44afneqlca4el.jpg');
animation-name: clipPathIn;
animation-delay: 45s;
}
.slide11 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202609/05/195356g1vt8etjstjetlpg.jpg');
animation-name: rotate3dIn;
animation-delay: 50s;
}
.slide12 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202609/05/195356zqqvv2gihz4hqswl.jpg');
animation-name: gridIn;
animation-delay: 55s;
}
.slide13 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202609/05/195356ix33jxsqqa3xrlrw.jpg');
animation-name: waveIn;
animation-delay: 60s;
}
.slide14 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202609/05/195356lkqy0yxzssj1q1ms.jpg');
animation-name: shadowIn;
animation-delay: 65s;
}
.slide15 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202609/05/195355jg2h663pe8wwgzzp.jpg');
animation-name: doubleFadeIn;
animation-delay: 70s;
}
.slide16 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202609/05/195355il8ni8pvljm9pcma.jpg');
animation-name: bottomLeftZoomIn;
animation-delay: 75s;
}
.slide17 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202609/05/195355tiykby1byznt4ts1.jpg');
animation-name: bottomLeftFadeIn;
animation-delay: 80s;
}
.slide18 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202609/05/195354x6o4picx7qp4phb3.jpg');
animation-name: bottomLeftSlideIn;
animation-delay: 85s;
}
.slide19 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202609/05/195354fhupmlcuult5z4th.jpg');
animation-name: bottomLeftBlurIn;
animation-delay: 90s;
}
.slide20 {
background-image: url('https://www.junzhuan.com/data/attachment/album/202609/05/195354wwbaotobgapqqppl.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/202609/05/200119o3vey29w237y1qm1.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=1371757759.mp3" type="audio/mpeg"></audio>
<video id="vid" src="https://img2.tukuppt.com/video_show/15653652/00/29/96/5fa09f4e88257.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>
https://www.junzhuan.com//data/attachment/album/202609/05/195357wxni22unzcn15thn.jpg
https://www.junzhuan.com//data/attachment/album/202609/05/195357a5qmvq9qkau6tmi4.jpg
https://www.junzhuan.com//data/attachment/album/202609/05/195357ovvwwvaarxevberv.jpg
https://www.junzhuan.com//data/attachment/album/202609/05/195357jtz44afneqlca4el.jpg
https://www.junzhuan.com//data/attachment/album/202609/05/195356g1vt8etjstjetlpg.jpg
https://www.junzhuan.com//data/attachment/album/202609/05/195356zqqvv2gihz4hqswl.jpg
https://www.junzhuan.com//data/attachment/album/202609/05/195356ix33jxsqqa3xrlrw.jpg
https://www.junzhuan.com//data/attachment/album/202609/05/195356lkqy0yxzssj1q1ms.jpg
https://www.junzhuan.com//data/attachment/album/202609/05/195355jg2h663pe8wwgzzp.jpg
https://www.junzhuan.com//data/attachment/album/202609/05/195355il8ni8pvljm9pcma.jpg
https://www.junzhuan.com//data/attachment/album/202609/05/195355tiykby1byznt4ts1.jpg
https://www.junzhuan.com//data/attachment/album/202609/05/195354x6o4picx7qp4phb3.jpg
https://www.junzhuan.com//data/attachment/album/202609/05/195354fhupmlcuult5z4th.jpg
https://www.junzhuan.com//data/attachment/album/202609/05/195354wwbaotobgapqqppl.jpg
美丽的风光，漂亮的制作。欣赏傲雷影儿好帖{:4_199:}
页:
[1]