3d 画廊相册动画效果
代码语言:html
所属分类:幻灯片
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 3D carousel</title> <style> * { margin: 0; padding: 0; } html, body { height: 100%; } body { overflow: hidden; display: flex; background: #111; perspective: 1000px; transform-style: preserve-3d; } #drag-container, #spin-container { position: relative; display: flex; margin: auto; transform-style: preserve-3d; transform: rotateX(-10deg); } #drag-container img, #drag-container video { transform-style: preserve-3d; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 200px; font-size: 50px; text-align: center; box-shadow: 0 0 8px #fff; -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005); } #drag-container img:hover, #drag-container video:hover { box-shadow: 0 0 15px #fffd; -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007); } #drag-container p { font-family: Serif; position: absolute; top: 100%; left: 50%; transform: translate(-50%,-50%) rotateX(90deg); color: #fff; } #ground { width: 900px; height: 900px; position: absolute; top: 100%; left: 50%; transform: translate(-50%,-50%) rotateX(90deg); background: -webkit-radial-gradient(center center, farthest-side , #9993, transparent); } #music-container { position: absolute; top: 0; left: 0; } #carousel-container { width: 100%; height: 100%; } @keyframes spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } @keyframes spinRevert { from { transform: rotateY(360deg); } to { transform: rotateY(0deg); } } </style> </head> <body translate="no"> <div id="drag-container"> <div id="spin-container"> <img src="https://images.pexels.com/photos/206395/pexels-photo-206395.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> <img src="https://images.pexels.com/photos/1391498/pexels-photo-1391498.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> <img src="https://images.pexels.com/photos/1382731/pexels-photo-1382731.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> <img src="https://images.pexels.com/photos/1758144/pexels-photo-1758144.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> <img src="https://images.pexels.com/photos/1382734/pexels-photo-1382734.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> <img src="https://images.pexels.com/photos/1462636/pexels-photo-1462636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> <a target="_blank" href="https://images.pexels.com/photos/139829/pexels-photo-139829.jpeg"> <img src="https://images.pexels.com/photos/139829/pexels-photo-139829.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> </a> <p> 3D Tiktok Carousel </p> </div> <div id="ground"></div> </div> <script> // Các bạn có thể thay đổi giá trị các biến môi trường ở đây: var radius = 240; // Độ rộng vòng xoay var autoRotate = true; // Tự động xoay hay không var rotateSpeed = -60; // đơn vị: giây/vòng. thời gian để xoay hết 1 vòng, dấu trừ để xoay ngược lại var imgWidth = 120; // độ rộng ảnh (tính theo px) var imgHeight = 170; // độ cao ảnh (tính theo px) // Link nhạc nền - cho bằng null nếu không muốn nhạc nền var bgMusicURL = 'https://api.soundcloud.com/tracks/143041228/stream?client_id=587aa2d384f7333a886010d5f52f302a'; var bgMusicControls = true; // Hiện khung điều khiển nhạc nền hay không /* CHÚ Ý: + imgWidth, imgHeight sẽ dùng được cho cả video -> <video> cũng sẽ được thu nhỏ cho bằng <img> + nếu imgWidth, imgHeight đủ nhỏ, có thể <video> sẽ không hiện nút play/pause + Link nhạc lấy từ: https://hoangtran0410.github.io/Visualyze-design-your-own-/?theme=HoangTran&playlist=2&song=8&background=3 + https://api.soundcloud.com/tracks/191576787/stream?client_id=587aa2d384f7333a886010d5f52f302a + Phiên bản 1 file .html duy nhất: https://github.com/HoangTran0410/3DCarousel/blob/master/index.html Author: Hoang Tran, custom from code in tiktok video https://www.facebook.com/J2TEAM.ManhTuan/videos/1353367338135935/ */ // ===================== start ======================= setTimeout(init, 100); var obox = doc.........完整代码请登录后点击上方下载按钮下载查看
网友评论0