slider实现带底部延迟指示进度的幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:slider实现带底部延迟指示进度的幻灯片效果代码
下面为部分代码预览,完整代码请点击下载或在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.4.5.1.css"> <style> body { max-width: 400px; width: 100%; margin: 0 auto; } .wrapper .swiper-container .swiper-pagination { bottom: 25px; } .wrapper .swiper-container .swiper-pagination-bullet { opacity: 1; position: relative; width: 50px; height: 3px; border-radius: 0; margin: 0 4px; background-color: rgba(0,0,0,0.5); transition: background-color .3s ease; } .wrapper .swiper-container .swiper-pagination-bullet::before { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; transform: scaleX(0); transform-origin: 0 0; } .wrapper .swiper-container .swiper-pagination-bullet.swiper-pagination-bullet-active::before { animation: sliderPagination 3s linear forwards } .wrapper .swiper-container .swiper-pagination-bullet:hover { background-color: #fff; } @keyframes sliderPagination { 100% { transform: scaleX(1); opacity: 1; } } </style> </head> <body > <div class="wrapper"> <div class="swiper-container swiper-container"> <div class="swiper-wrapper"> <div.........完整代码请登录后点击上方下载按钮下载查看
网友评论0