swiper实现立方cube方块图片幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:swiper实现立方cube方块图片幻灯片效果代码
代码标签: swiper 立方 cube 方块 图片 幻灯片
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper-bundle.11.0.4.css"> <style> html, body { position: relative; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; } .cubeSwiper { width: 400px; height: 400px; position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -150px; } .cubeSwiper { background-position: center; background-size: cover; } .cubeSwiper .swiper-slide img { display: block; width: 100%; } .swiper-pagination-bullet-active { background:hotpink; } </style> </head> <body translate="no"> <!-- Swiper --> <figure class="cube-parent-container"> <div class="swiper cubeSwiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="//repo.bfw.wiki/bfwrepo/image/6306b35ab8de2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" /> &l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0