flickity实现可拖拽变形的幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:flickity实现可拖拽变形的幻灯片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/flickity.min.css"> <style> .Slider { width: 100vw; height: 100vh; } .Slide { display: flex; align-items: center; justify-content: center; width: 400px; height: 400px; font-size: 4rem; color: #fff; font-weight: 600; } .Slide:nth-child(0n+1) { background: #D32F2F; } .Slide:nth-child(0n+2) { background: #FFA000; } .Slide:nth-child(0n+3) { background: #FFD54F; } .Slide:nth-child(0n+4) { background: #4CAF50; } .Slide:nth-child(0n+5) { background: #2196F3; } .Slide:nth-child(0n+6) { background: #4A148C; } </style> </head> <body> <div class="Slider"> <div class="Slide">1</div> <div class="Slide">2</div> <div class="Slide">3</div> <div class="Slide">4.........完整代码请登录后点击上方下载按钮下载查看
网友评论0