HTML/CSS/ js 制作圆形图像滑块动画效果banner产品展示cid1155源码下载

作者code

html and css

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  5. <title>Circular image slider with html,css and anime.js</title>
  7. <style>
  9. @import url('https://fonts.googleapis.com/css?family=Molle:400i|Open+Sans+Condensed:300,700');
  11. html,
  12. body {
  13. margin: 0;
  14. padding: 0;
  15. overflow-x: hidden;
  16. }
  18. body {
  19. font-family: 'Open Sans Condensed', sans-serif;
  20. background: #8e9eab; /* fallback for old browsers */
  21. background: -webkit-linear-gradient(to right, #dde3e6, #8e9eab); /* Chrome 10-25, Safari 5.1-6 */
  22. background: linear-gradient(to right, #dde3e6, #8e9eab); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  23. position: relative;
  24. display: block;
  25. width: 100%;
  26. height: auto;
  27. min-height: 100%;
  28. min-height: 100vh;
  29. overflow: hidden;
  30. }
  32. .slider {
  33. position: relative;
  34. display: block;
  35. width: 100%;
  36. width: 100vw;
  37. height: 100%;
  38. height: 100vh;
  39. overflow: hidden;
  40. }
  41. .slider__nav-bar {
  42. position: absolute;
  43. width: 180px;
  44. height: 180px;
  45. bottom: -90px;
  46. left: 50%;
  47. transform: translateX( -50% );
  48. border-radius: 90px;
  49. text-align: center;
  50. background: #dde3e6;
  51. z-index: 100;
  52. }
  53. .slider__arrow {
  54. position: absolute;
  55. top: 50%;
  56. transform: translateY( -50% );
  57. width: 64px;
  58. height: 64px;
  59. transition: 0.2s;
  60. cursor: pointer;
  61. z-index: 100;
  62. opacity: 0.8;
  63. }
  64. .slider__arrow:hover {
  65. opacity: 1;
  66. }
  67. .slider__arrow_prev {
  68. left: 16px;
  69. width: 64px;
  70. height: 64px;
  71. background-image:url(assets/img/arrow__left-white.png);
  72. background-repeat: no-repeat;
  73. background-position: center center;
  74. background-size: auto 64px;
  75. }
  76. .slider__arrow_next {
  77. right: 16px;
  78. width: 64px;
  79. height: 64px;
  80. background-image: url(assets/img/arrow__right-white.png);
  81. background-repeat: no-repeat;
  82. background-position: center center;
  83. background-size: auto 64px;
  84. }
  85. .nav-control {
  86. position: relative;
  87. display: inline-block;
  88. vertical-align: middle;
  89. opacity: 0.5;
  90. width: 32px;
  91. height: 32px;
  92. transition: 0.2s;
  93. cursor: pointer;
  94. background-image: url(assets/img/dot-black.png);
  95. background-repeat: no-repeat;
  96. background-position: center center;
  97. background-size: 26px 26px;
  98. margin-top: 32px;
  99. z-index: 3;
  100. }
  101. .nav-control:hover {
  102. opacity: 0.8;
  103. }
  104. .nav-control_active {
  105. opacity: 1;
  106. }
  107. .slider-list {
  108. position: relative;
  109. overflow: hidden;
  110. width: 100%;
  111. height: 100%;
  112. margin: 0;
  113. padding: 0;
  114. list-style-type: none;
  115. }
  116. .slider-list::before {
  117. content: '';
  118. display: block;
  119. padding-top: calc(9 / 16 * 100%);
  120. }
  121. .slider-list__item {
  122. position: absolute;
  123. top: 0;
  124. left: 0;
  125. -webkit-transform: translateX(100%);
  126. transform: translateX(100%);
  127. width: 100%;
  128. height: 100%;
  129. background-repeat: no-repeat;
  130. background-position: 50% 50%;
  131. background-size: cover;
  132. display: flex;
  133. justify-content: center;
  134. align-items: center;
  135. font-size: 16vw;
  136. color: #000;
  137. will-change: transform;
  138. z-index: 1;
  139. }
  140. .slider-list__item .back__element {
  141. position: absolute;
  142. display: block;
  143. width: 100%;
  144. height: 100%;
  145. top: 0; left: 0; right: 0; bottom: 0;
  146. z-index: 1;
  147. }
  148. .slider-list__item .back__element img {
  149. position: relative;
  150. display: block;
  151. width: 100%;
  152. max-width: 640px;
  153. height: auto;
  154. top: 50%; left: 50%;
  155. transform: translate( -50%, -50% );
  156. }
  157. .slider-list__item .main__element {
  158. position: absolute;
  159. display: block;
  160. width: 100%;
  161. height: 100%;
  162. top: 0; left: 0; right: 0; bottom: 0;
  163. z-index: 3;
  164. }
  165. .slider-list__item .main__element img {
  166. position: relative;
  167. display: block;
  168. width: 100%;
  169. max-width: 320px;
  170. height: auto;
  171. top: 50%; left: 50%;
  172. transform: translate( -50%, -50% );
  173. }
  174. .slider-list__item .front__element {
  175. position: absolute;
  176. display: block;
  177. width: 100%;
  178. height: 100%;
  179. top: 0; left: 0; right: 0; bottom: 0;
  180. z-index: 4;
  181. /* transform: scale(0); */
  182. }
  183. .slider-list__item .front__element img {
  184. position: relative;
  185. display: block;
  186. width: 100%;
  187. max-width: 640px;
  188. height: auto;
  189. top: 50%; left: 50%;
  190. transform: translate( -50%, -50% );
  191. }
  192. .slider-list__item .title__element {
  193. position: absolute;
  194. display: block;
  195. width: 100%;
  196. height: 100%;
  197. top: 0; left: 0; right: 0; bottom: 0;
  198. z-index: 2;
  199. }
  200. .slider-list__item .title__element .title {
  201. position: relative;
  202. display: block;
  203. width: 100%;
  204. height: auto;
  205. top: 50%; left: 50%;
  206. transform: rotate(-15deg) translate( -45%, -125% );
  207. font-family: 'Molle', cursive;
  208. color: #eef2f3;
  209. text-align: center;
  210. }
  211. .slider-list__item .more__element {
  212. position: absolute;
  213. display: block;
  214. width: 100%;
  215. height: 100%;
  216. top: 0; left: 0; right: 0; bottom: 0;
  217. z-index: 10;
  218. }
  219. .slider-list__item .more__element .content {
  220. position: relative;
  221. display: block;
  222. width: 100%;
  223. max-width: 768px;
  224. height: auto;
  225. margin: 64px auto;
  226. padding: 0 32px;
  227. color: #2e3131;
  228. text-align: left;
  229. }
  230. .slider-list__item .more__element .content .headline {
  231. position: relative;
  232. display: block;
  233. max-width: 240px;
  234. font-family: 'Molle', cursive;
  235. font-size: 38px;
  236. line-height: 46px;
  237. }
  238. .slider-list__item .more__element .content .excerpt {
  239. position: relative;
  240. display: block;
  241. max-width: 240px;
  242. font-family: 'Open Sans Condensed', sans-serif;
  243. font-size: 16px;
  244. line-height: 24px;
  245. padding: 8px 0 16px;
  246. }
  247. .slider-list__item .more__element .content .link {
  248. position: relative;
  249. display: block;
  250. font-family: 'Open Sans Condensed', sans-serif;
  251. width: 180px;
  252. height: 48px;
  253. border-radius: 24px;
  254. font-size: 16px;
  255. line-height: 24px;
  256. box-shadow: 0 14px 28px rgba(0,0,0,0.05), 0 10px 10px rgba(0,0,0,0.06);
  257. transition: all 0.4s ease;
  258. }
  259. .slider-list__item .more__element .content .link .fill {
  260. position: absolute;
  261. background-image: linear-gradient(to right, #d43325, #f36e67);
  262. background-size: 150% 150%;
  263. height: 48px;
  264. width: 180px;
  265. border-radius: 24px;
  266. margin: 0;
  267. z-index: -1;
  268. transition: all 0.4s ease;
  269. -webkit-animation: gradient 3s ease infinite;
  270. -moz-animation: gradient 3s ease infinite;
  271. animation: gradient 3s ease infinite;
  272. }
  273. .slider-list__item .more__element .content .link .fill.fill-dark {
  274. background-image: linear-gradient(to right, #252228, #848f9e);
  275. }
  276. .slider-list__item .more__element .content .link a {
  277. position: absolute;
  278. display: block;
  279. width: 100%;
  280. height: 100%;
  281. color: #dde3e6;
  282. font-weight: 700;
  283. text-align: center;
  284. line-height: 48px;
  285. text-decoration: none;
  286. outline: 0px none;
  287. outline: 0px;
  288. z-index: 2;
  289. }
  290. .slider-list__item .more__element .content .link:hover {
  291. box-shadow: 0 19px 38px rgba(0,0,0,0.05), 0 15px 12px rgba(0,0,0,0.06);
  292. }
  293. .slider-list__item_active {
  294. -webkit-transform: translateX(0);
  295. transform: translateX(0);
  296. z-index: 2;
  297. }
  300. @media screen and (max-width: 640px) {
  302. .slider-list__item .title__element .title {
  303. font-size: 26vw;
  304. }
  306. .slider-list__item .more__element .content .excerpt {
  307. display: none;
  308. }
  310. .slider-list__item .more__element .content .link {
  311. margin-top: 16px;
  312. }
  314. }
  316. @media screen and (max-width: 560px) {
  318. .slider__nav-bar {
  319. /* hide dots for mobile */
  320. opacity: 0;
  321. z-index: -1;
  322. }
  324. }
  326. @keyframes gradient {
  327. 0% {
  328. background-position: 0% 50%;
  329. }
  330. 50% {
  331. background-position: 100% 50%;
  332. }
  333. 100% {
  334. background-position: 0% 50%;
  335. }
  336. }
  338. </style>
  340. <script>
  341. window.dataLayer = window.dataLayer || [];
  342. function gtag(){dataLayer.push(arguments);}
  343. gtag('js', new Date());
  345. gtag('config', 'UA-124048250-1');
  346. </script>
  349. </head>
  350. <body>
  353. <section class="page-wrapper" >
  355. <div class="slider">
  357. <ul class="slider-list">
  359. <li class="slider-list__item ">
  360. <span class="back__element">
  361. <img src="assets/img/back_apple_002.png" />
  362. </span>
  363. <span class="main__element">
  364. <img src="assets/img/bottle_apple_002.png" />
  365. </span>
  366. <span class="front__element">
  367. <img src="assets/img/front_apple_002.png" />
  368. </span>
  369. <span class="title__element">
  370. <span class="title">apple</span>
  371. </span>
  372. <span class="more__element">
  373. <span class="content">
  374. <span class="headline">apple</span>
  375. <span class="excerpt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ratione nisi perferendis? Nemo in accusamus cupiditate officiis.</span>
  376. <span class="link">
  377. <div class="fill"></div>
  378. <a href="#">Open catalog</a>
  379. </span>
  380. </span>
  381. </span>
  382. </li>
  384. <li class="slider-list__item">
  385. <span class="back__element">
  386. <img src="assets/img/back_grapes_001.png" />
  387. </span>
  388. <span class="main__element">
  389. <img src="assets/img/bottle_grapes_001.png" />
  390. </span>
  391. <span class="front__element">
  392. <img src="assets/img/front_grapes_001.png" />
  393. </span>
  394. <span class="title__element">
  395. <span class="title">grapes</span>
  396. </span>
  397. <span class="more__element">
  398. <span class="content">
  399. <span class="headline">grapes</span>
  400. <span class="excerpt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ratione nisi perferendis? Nemo in accusamus cupiditate officiis.</span>
  401. <span class="link">
  402. <div class="fill fill-dark"></div>
  403. <a href="#">Open catalog</a>
  404. </span>
  405. </span>
  406. </span>
  407. </li>
  409. <li class="slider-list__item">
  410. <span class="back__element">
  411. <img src="assets/img/back_strawberry_003.png" />
  412. </span>
  413. <span class="main__element">
  414. <img src="assets/img/bottle_strawberry_003.png" />
  415. </span>
  416. <span class="front__element">
  417. <img src="assets/img/front_strawberry_003.png" />
  418. </span>
  419. <span class="title__element">
  420. <span class="title">strawberry</span>
  421. </span>
  422. <span class="more__element">
  423. <span class="content">
  424. <span class="headline">strawberry</span>
  425. <span class="excerpt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ratione nisi perferendis? Nemo in accusamus cupiditate officiis.</span>
  426. <span class="link">
  427. <div class="fill"></div>
  428. <a href="#">Open catalog</a>
  429. </span>
  430. </span>
  431. </span>
  432. </li>
  434. </ul>
  436. <div class="slider__nav-bar">
  437. <a class="nav-control"></a>
  438. <a class="nav-control"></a>
  439. <a class="nav-control"></a>
  440. </div>
  442. <div class="slider__controls">
  443. <a class="slider__arrow slider__arrow_prev"></a>
  444. <a class="slider__arrow slider__arrow_next"></a>
  445. </div>
  447. </div>
  449. </section>
  452. <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
  454. <script src="assets/js/demo.js"></script>
  456. </body>
  457. </html>
<!doctype html>
<html lang="en">
  <head>
     
    <title>Circular image slider with html,css and anime.js</title>
   
     <style>
           
 @import url('https://fonts.googleapis.com/css?family=Molle:400i|Open+Sans+Condensed:300,700');
      
      html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body  {
  font-family: 'Open Sans Condensed', sans-serif;
  background: #8e9eab;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #dde3e6, #8e9eab);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #dde3e6, #8e9eab); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  min-height: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.slider {
  position: relative;
  display: block;
  width: 100%;
  width: 100vw;
  height: 100%;
  height: 100vh;
  overflow: hidden;
}
.slider__nav-bar {
  position: absolute;
  width: 180px;
  height: 180px;
  bottom: -90px;
  left: 50%;
  transform: translateX( -50% );
  border-radius: 90px;
  text-align: center;
  background: #dde3e6;
  z-index: 100;
}
.slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY( -50% );
  width: 64px;
  height: 64px;
  transition: 0.2s;
  cursor: pointer;
  z-index: 100;
  opacity: 0.8;
}
.slider__arrow:hover {
  opacity: 1;
}
.slider__arrow_prev {
  left: 16px;
  width: 64px;
  height: 64px;
  background-image:url(assets/img/arrow__left-white.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 64px;
}
.slider__arrow_next {
  right: 16px;
  width: 64px;
  height: 64px;
  background-image: url(assets/img/arrow__right-white.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 64px;
}
.nav-control {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.5;
  width: 32px;
  height: 32px;
  transition: 0.2s;
  cursor: pointer;
  background-image: url(assets/img/dot-black.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 26px 26px;
  margin-top: 32px;
  z-index: 3;
}
.nav-control:hover {
  opacity: 0.8;
}
.nav-control_active {
  opacity: 1;
}
.slider-list {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.slider-list::before {
  content: '';
  display: block;
  padding-top: calc(9 / 16 * 100%);
}
.slider-list__item {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16vw;
  color: #000;
  will-change: transform;
  z-index: 1;
}
.slider-list__item .back__element {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
}
.slider-list__item .back__element img {
  position: relative;
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  top: 50%; left: 50%;
  transform: translate( -50%, -50% );
}
.slider-list__item .main__element {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 3;
}
.slider-list__item .main__element img {
  position: relative;
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  top: 50%; left: 50%;
  transform: translate( -50%, -50% );
}
.slider-list__item .front__element {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 4;
  /* transform: scale(0); */
}
.slider-list__item .front__element img {
  position: relative;
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  top: 50%; left: 50%;
  transform: translate( -50%, -50% );
}
.slider-list__item .title__element {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2;
}
.slider-list__item .title__element .title {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  top: 50%; left: 50%;
  transform: rotate(-15deg) translate( -45%, -125% );
  font-family: 'Molle', cursive;
  color: #eef2f3;
  text-align: center;
}
.slider-list__item .more__element {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10;
}
.slider-list__item .more__element .content {
  position: relative;
  display: block;
  width: 100%;
  max-width: 768px;
  height: auto;
  margin: 64px auto;
  padding: 0 32px;
  color: #2e3131;
  text-align: left;
}
.slider-list__item .more__element .content .headline {
  position: relative;
  display: block;
  max-width: 240px;
  font-family: 'Molle', cursive;
  font-size: 38px;
  line-height: 46px;
}
.slider-list__item .more__element .content .excerpt {
  position: relative;
  display: block;
  max-width: 240px;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 8px 0 16px;
}
.slider-list__item .more__element .content .link {
  position: relative;
  display: block;
  font-family: 'Open Sans Condensed', sans-serif;
  width: 180px;
  height: 48px;
  border-radius: 24px;
  font-size: 16px;
  line-height: 24px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.05), 0 10px 10px rgba(0,0,0,0.06);
  transition: all 0.4s ease;
}
.slider-list__item .more__element .content .link .fill {
  position: absolute;
  background-image: linear-gradient(to right, #d43325, #f36e67);
  background-size: 150% 150%;
  height: 48px;
  width: 180px;
  border-radius: 24px;
  margin: 0;
  z-index: -1;
  transition: all 0.4s ease;
  -webkit-animation: gradient 3s ease infinite;
  -moz-animation: gradient 3s ease infinite;
  animation: gradient 3s ease infinite;
}
.slider-list__item .more__element .content .link .fill.fill-dark {
  background-image: linear-gradient(to right, #252228, #848f9e);
} 
.slider-list__item .more__element .content .link a {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  color: #dde3e6;
  font-weight: 700;
  text-align: center;
  line-height: 48px;
  text-decoration: none;
  outline: 0px none;
  outline: 0px;
  z-index: 2;
}
.slider-list__item .more__element .content .link:hover {
  box-shadow: 0 19px 38px rgba(0,0,0,0.05), 0 15px 12px rgba(0,0,0,0.06);
}
.slider-list__item_active {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  z-index: 2;
}


@media screen and (max-width: 640px) {

  .slider-list__item .title__element .title {
    font-size: 26vw;
  }

  .slider-list__item .more__element .content .excerpt {
    display: none;
  }

  .slider-list__item .more__element .content .link {
    margin-top: 16px;
  }

}

@media screen and (max-width: 560px) {

  .slider__nav-bar {
    /* hide dots for mobile */
    opacity: 0;
    z-index: -1;
  }

}
 
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
      
      </style>
   
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-124048250-1');
    </script>
    

  </head>
  <body>

   
    <section class="page-wrapper" >

      <div class="slider">
        
        <ul class="slider-list">
          
          <li class="slider-list__item  ">
            <span class="back__element">
              <img src="assets/img/back_apple_002.png" />
            </span>
            <span class="main__element">
              <img src="assets/img/bottle_apple_002.png" />
            </span>
            <span class="front__element">
              <img src="assets/img/front_apple_002.png" />
            </span>
            <span class="title__element">
              <span class="title">apple</span>
            </span>
            <span class="more__element">
              <span class="content">
                <span class="headline">apple</span>
                <span class="excerpt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ratione nisi perferendis? Nemo in accusamus cupiditate officiis.</span>
                <span class="link">
                  <div class="fill"></div>
                  <a href="#">Open catalog</a>
                </span>
              </span>
            </span>
           </li>

          <li class="slider-list__item">
            <span class="back__element">
              <img src="assets/img/back_grapes_001.png" />
            </span>
            <span class="main__element">
              <img src="assets/img/bottle_grapes_001.png" />
            </span>
            <span class="front__element">
              <img src="assets/img/front_grapes_001.png" />
            </span>
            <span class="title__element">
              <span class="title">grapes</span>
            </span>
            <span class="more__element">
              <span class="content">
                <span class="headline">grapes</span>
                <span class="excerpt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ratione nisi perferendis? Nemo in accusamus cupiditate officiis.</span>
                <span class="link">
                  <div class="fill fill-dark"></div>
                  <a href="#">Open catalog</a>
                </span>
              </span>
            </span>
           </li>

           <li class="slider-list__item">
            <span class="back__element">
              <img src="assets/img/back_strawberry_003.png" />
            </span>
            <span class="main__element">
              <img src="assets/img/bottle_strawberry_003.png" />
            </span>
            <span class="front__element">
              <img src="assets/img/front_strawberry_003.png" />
            </span>
            <span class="title__element">
              <span class="title">strawberry</span>
            </span>
            <span class="more__element">
              <span class="content">
                <span class="headline">strawberry</span>
                <span class="excerpt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ratione nisi perferendis? Nemo in accusamus cupiditate officiis.</span>
                <span class="link">
                    <div class="fill"></div>
                  <a href="#">Open catalog</a>
                </span>
              </span>
            </span>
           </li>
           
        </ul>
        
        <div class="slider__nav-bar">
          <a class="nav-control"></a>
          <a class="nav-control"></a>
          <a class="nav-control"></a>
        </div>
        
        <div class="slider__controls">
          <a class="slider__arrow slider__arrow_prev"></a>
          <a class="slider__arrow slider__arrow_next"></a>
        </div>

      </div>      

    </section>
  
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
    
    <script src="assets/js/demo.js"></script>

  </body>
</html>

在线演示

让链接同时具备两种打开方式

获取源码: imagee slider with anime.js
下载数:229人次, 文件大小: 3.6 MB, 上传日期: 2021年-5 月-07日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

2,842 人查阅

类似文章