tsparticles实现落叶粒子的图片季节幻灯片切换代码
代码语言:html
所属分类:幻灯片
代码描述:tsparticles实现落叶粒子的图片季节幻灯片切换代码
代码标签: tsparticles 落叶 粒子 图片 季节 幻灯片 切换 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; background-color: black; } /* particles */ #tsparticles { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } /* Algemene stijl voor de container */ .slideshow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; /* Pas de breedte aan naar wens */ height: 333px; /* Pas de hoogte aan naar wens */ overflow: hidden; border-radius: 10px; /* Optioneel: afgeronde hoeken */ border: 8px solid black; outline: 12px solid #222; } /* Stijl voor elke afbeelding */ .slideshow img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.5s ease, transform 1.5s ease; /* Gecombineerde overgang voor fading en scaling */ transform-origin: center center; } /* Vertrekkende afbeelding: fading en uitzoomen */ .slideshow img.fade-out { opacity: 0; transform: scale(1.2); /* Uitzoomen */ } /* Nieuwe afbeelding: fading en inzoomen van klein naar groot */ .slideshow img.fade-in { opacity: 1; transform: scale(1); /* Terug naar normale grootte */ z-index: 1; } /*responsiveness*/ @media (max-width: 768px) { .slideshow { width: 80%; top: 50%; } } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tsparticles.bundle.2.11.0.js"></script> </head> <body translate="no"> <div id="tsparticles"></div> <div class="slideshow"> <!-- Credits photos: https://larsvandegoor.com --> <img src="//repo.bfw.wiki/random/400x300/秋?rand=1" alt="Slide 1" class="fade-in"> <img src="//repo.bfw.wiki/random/400x300/秋?rand=2" alt="Slide 2"> <img src="//repo.bfw.wiki/random/400x300/秋?rand=3" alt="Slide 3"> <img src="//repo.bfw.wiki/random/400x300/秋?rand=4" alt="Slide 4"> <img src="//repo.bfw.wiki/random/400x300/秋?rand=5" alt="Slide 5"> <img src="//repo.bfw.wiki/random/400x300/秋?rand=6" alt="Slide 6"> <img src="//repo.bfw.wiki/random/400x300/秋?rand=7" alt="Slide 7"> <img src="//repo.bfw.wiki/random/400x300/秋?rand=8" alt="Slide 8"> <img src="//repo.bfw.wiki/random/400x300/秋?rand=9" alt="Slide 9"> <img src="//repo.bfw.wiki/random/400x300/秋?rand=10" alt="Slide 10"> </div> <script> //particles js .........完整代码请登录后点击上方下载按钮下载查看
网友评论0