云端漫步 发表于 2025-11-10 23:30:25

【漫步特效】竹林深处/素材一鹿向北

<style>
#mydiv {
    margin: 130px 0 30px calc(50% - 900px);
    display: grid;
    place-items: center;
    width: 1700px;
    height: 850px;
    background: lightblue url('https://webftp-bbs.hnol.net/ggkj2017//yunduanmanbu/16/6/3/1AA.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 id="aud" src="https://mp3.joy127.com/music/12531.mp3" autoplay loop></audio>
    <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec4946e64cc5.mp4" autoplay loop muted></video>
   
    <!-- 十种动画效果合集（慢速版） -->
    <img class="ani-img ani1" src="https://webftp-bbs.hnol.net/ggkj2017//yunduanmanbu/16/6/3/1AA.jpg" style="animation-delay: 0s;">
    <img class="ani-img ani2" src="https://webftp-bbs.hnol.net/ggkj2017//yunduanmanbu/16/6/3/2AA.jpg" style="animation-delay: 5s;">
    <img class="ani-img ani3" src="https://webftp-bbs.hnol.net/ggkj2017//yunduanmanbu/16/6/3/3AA.jpg" style="animation-delay: 10s;">
    <img class="ani-img ani4" src="https://webftp-bbs.hnol.net/ggkj2017//yunduanmanbu/16/6/3/4AA.jpg" style="animation-delay: 15s;">
    <img class="ani-img ani5" src="https://webftp-bbs.hnol.net/ggkj2017//yunduanmanbu/16/6/3/1AA.jpg" style="animation-delay: 20s;">
    <img class="ani-img ani6" src="https://webftp-bbs.hnol.net/ggkj2017//yunduanmanbu/16/6/3/2AA.jpg" style="animation-delay: 25s;">
    <img class="ani-img ani7" src="https://webftp-bbs.hnol.net/ggkj2017//yunduanmanbu/16/6/3/3AA.jpg" style="animation-delay: 30s;">
    <img class="ani-img ani8" src="https://webftp-bbs.hnol.net/ggkj2017//yunduanmanbu/16/6/3/4AA.jpg" style="animation-delay: 35s;">
    <img class="ani-img ani9" src="https://webftp-bbs.hnol.net/ggkj2017//yunduanmanbu/16/6/3/1AA.jpg" style="animation-delay: 40s;">
    <img class="ani-img ani10" src="https://webftp-bbs.hnol.net/ggkj2017//yunduanmanbu/16/6/3/2AA.jpg" style="animation-delay: 45s;">
</div>

紫雨琦琦 发表于 2025-11-11 07:49:21

◠‿◠杀花

紫雨琦琦 发表于 2025-11-11 07:50:09

◠‿◠竹林深处有惊喜，动画精美

云朵朵 发表于 2025-11-11 09:00:18

问候漫步老师，{:1_153:}

云朵朵 发表于 2025-11-11 09:01:38

竹林深处有位佳人，在等候.............

春华秋实 发表于 2025-11-11 10:22:01

诗情画意的竹林深处，欣赏佳图。

玫の玫 发表于 2025-11-11 12:55:55

欣赏漫步老师美作，
画面以翠绿的竹林为背景，
一位身着浅蓝汉服的女子，
营造出 “竹林深处” 的清雅且富有诗意的氛围。

玫の玫 发表于 2025-11-11 12:56:28

翠绿竹林背景与浅蓝汉服的搭配，
为画面添了几分中式古典的雅致感与视觉的清新。
“竹林深处” 的文字搭配 “风月筛金映碧琅，
风摇玉节响琳琅” 的描述，
传递出竹林间的清幽雅致。

玫の玫 发表于 2025-11-11 12:57:07

竹林的葱郁与女子的古典姿态融合，
宛如一首关于竹林雅韵的抒情诗。
从竹叶的青翠，
到汉服的飘逸，
每一处细节都在诠释着 “竹林深处” 的意境，
让中式古典的清幽愈发迷人。

{:1_154:}

欧阳风刀 发表于 2025-11-11 15:55:13

竹林、女子、动画，很好的融合，给人赏心悦目的观感。
页: [1] 2 3
查看完整版本: 【漫步特效】竹林深处/素材一鹿向北