【影.印记】风光摄影《雪后颐和园》
雪后颐和园<br>摄影素材/网络 动图制作/傲雷影儿
<style type="text/css">.pcb{margin-right:0}</style><div class="pcb">
<div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_994583">
<style>
#mydiv {
margin: 60px 0 30px calc(50% - 840px);
display: grid;
place-items: center;
width: 1600px;
height: 900px;
background: lightblue url('https://www.junzhuan.com/data/attachment/album/202512/23/142916nnm88pvpe6eq9ptt.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 1;
}
#vid {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
mask: linear-gradient(to top right, red 88%, transparent 0);
-webkit-mask: linear-gradient(to top right, red 88%, transparent 0);
z-index: 6;
opacity: .53;
}
.ani-img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
animation-duration: 50s;
animation-iteration-count: infinite;
}
.ani1 {
animation-name: slideLeft;
}
@keyframes slideLeft {
0%,10% { left: -100%; opacity: 0; }
15%,35% { left: 0; opacity: 1; }
40%,100% { left: 100%; opacity: 0; }
}
.ani2 {
animation-name: shakeGrow;
}
@keyframes shakeGrow {
0%,10% { transform: scale(0.5); opacity: 0; }
15%,35% { transform: scale(1); opacity: 1; }
40%,100% { transform: scale(1.5); opacity: 0; }
}
.ani3 {
animation-name: rotateFade;
}
@keyframes rotateFade {
0%,10% { transform: rotate(0deg) scale(0.5); opacity: 0; }
15%,35% { transform: rotate(360deg) scale(1); opacity: 1; }
40%,100% { transform: rotate(720deg) scale(1.5); opacity: 0; }
}
.ani4 {
animation-name: swingIn;
}
@keyframes swingIn {
0%,10% { transform: rotate(-90deg) translateX(-100%); opacity: 0; }
15%,35% { transform: rotate(0deg) translateX(0); opacity: 1; }
40%,100% { transform: rotate(90deg) translateX(100%); opacity: 0; }
}
.ani5 {
animation-name: blinds;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
@keyframes blinds {
0%,10% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); opacity: 0; }
15%,35% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
40%,100% { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); opacity: 0; }
}
.ani6 {
animation-name: dropIn;
}
@keyframes dropIn {
0%,10% { top: -100%; opacity: 0; }
15%,35% { top: 0; opacity: 1; }
40%,100% { top: 100%; opacity: 0; }
}
.ani7 {
animation-name: slideRight;
}
@keyframes slideRight {
0%,10% { right: -100%; opacity: 0; }
15%,35% { right: 0; opacity: 1; }
40%,100% { right: -100%; opacity: 0; }
}
.ani8 {
animation-name: elasticSwing;
}
@keyframes elasticSwing {
0%,10% { transform: translateX(-50%) scale(0.5); opacity: 0; }
15%,35% { transform: translateX(0) scale(1); opacity: 1; }
40%,100% { transform: translateX(50%) scale(0.5); opacity: 0; }
}
.ani9 {
animation-name: spreadIn;
}
@keyframes spreadIn {
0%,10% { transform: scale(0.2); filter: blur(20px); opacity: 0; }
15%,35% { transform: scale(1); filter: blur(0); opacity: 1; }
40%,100% { transform: scale(1.5); filter: blur(20px); opacity: 0; }
}
.ani10 {
animation-name: blindsHorizontal;
clip-path: inset(0 0 100% 0);
}
@keyframes blindsHorizontal {
0%,10% { clip-path: inset(0 0 100% 0); opacity: 0; }
15%,35% { clip-path: inset(0 0 0 0); opacity: 1; }
40%,100% { clip-path: inset(100% 0 0 0); opacity: 0; }
}
</style>
<div id="mydiv">
<audio controls autoplay loop style="width: 0%;">
<source src="http://music.163.com/song/media/outer/url?id=2657878952.mp3" type="audio/mpeg"></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/10/5e17e131edf1e.mp4" autoplay loop muted></video>
<!-- 十种动画效果合集（慢速版） -->
<img class="ani-img ani1" src="https://www.junzhuan.com/data/attachment/album/202512/23/142916nnm88pvpe6eq9ptt.jpg" style="animation-delay: 0s;">
<img class="ani-img ani2" src="https://www.junzhuan.com/data/attachment/album/202512/23/142916aannm4ltzoo4atnw.jpg" style="animation-delay: 5s;">
<img class="ani-img ani3" src="https://www.junzhuan.com/data/attachment/album/202512/23/142916fz94ee4eq5d9v5kv.jpg" style="animation-delay: 10s;">
<img class="ani-img ani4" src="https://www.junzhuan.com/data/attachment/album/202512/23/142917x7agvgziayav0iwm.jpg" style="animation-delay: 15s;">
<img class="ani-img ani5" src="https://www.junzhuan.com/data/attachment/album/202512/23/142917eu6fshvg0dxtt4cc.jpg" style="animation-delay: 20s;">
<img class="ani-img ani6" src="https://www.junzhuan.com/data/attachment/album/202512/23/142917j60xg2yecyzcpxz8.jpg" style="animation-delay: 25s;">
<img class="ani-img ani7" src="https://www.junzhuan.com/data/attachment/album/202512/23/142917h7te4ij03azi9yq9.jpg" style="animation-delay: 30s;">
<img class="ani-img ani8" src="https://www.junzhuan.com/data/attachment/album/202512/23/142917y30r33li61z3r30v.jpg" style="animation-delay: 35s;">
<img class="ani-img ani9" src="https://www.junzhuan.com/data/attachment/album/202512/23/142917g9enq9ft83r6pkga.jpg" style="animation-delay: 40s;">
<img class="ani-img ani10" src="https://www.junzhuan.com/data/attachment/album/202512/23/142918t3bwvgvbwkkztzfk.jpg" style="animation-delay: 45s;">
</div></td></tr></table><br><br><br><br>
https://www.junzhuan.com//data/attachment/album/202512/23/142918t3bwvgvbwkkztzfk.jpg
https://www.junzhuan.com//data/attachment/album/202512/23/142917g9enq9ft83r6pkga.jpg
https://www.junzhuan.com//data/attachment/album/202512/23/142917y30r33li61z3r30v.jpg
https://www.junzhuan.com//data/attachment/album/202512/23/142917h7te4ij03azi9yq9.jpg
https://www.junzhuan.com//data/attachment/album/202512/23/142917j60xg2yecyzcpxz8.jpg
https://www.junzhuan.com//data/attachment/album/202512/23/142917eu6fshvg0dxtt4cc.jpg
https://www.junzhuan.com//data/attachment/album/202512/23/142917x7agvgziayav0iwm.jpg
https://www.junzhuan.com//data/attachment/album/202512/23/142916fz94ee4eq5d9v5kv.jpg
欣赏美拍，欣赏好制作！{:4_187:} https://www.junzhuan.com//data/attachment/album/202512/23/142916aannm4ltzoo4atnw.jpg
https://www.junzhuan.com//data/attachment/album/202512/23/142916nnm88pvpe6eq9ptt.jpg
北京还是留下很多前朝的好东西的，这些建筑那么美丽。
欣赏影儿好帖{:4_187:} 红影 发表于 2025-12-25 15:47
北京还是留下很多前朝的好东西的，这些建筑那么美丽。
欣赏影儿好帖
感谢才友临帖赏析，问好，相互学习了
{:4_204:}
页:
[1]