gsap+Flip实现点击变换位置排序效果代码
代码语言:html
所属分类:其他
代码描述:gsap+Flip实现点击变换位置排序效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap"); html { background: #303841; color: #eeeeee; min-height: 100%; display: grid; align-items: center; overflow-x: hidden; } p { text-align: center; margin: 0.5em 0 0; font-family: "Fredoka One", cursive; opacity: 0.8; } .list { display: grid; grid-template-columns: 1fr 1fr 1fr; justify-content: center; gap: 1rem; margin: 1rem; } .item { padding: 0.75em 0.5em; background: #00adb5; font-family: "Fredoka One", cursive; display: grid; place-content: center; font-size: 9vmin; cursor: pointer; transition: background 0.2s linear; } .item:hover { transition-duration: 0s; background: #ff5722; } .item[data-clicked] { background: #ff5722; opacity: 0.8; } </style> </head> <body> <div class="list"> <div class="item" style="order:1">1</div> <div class="item" style="order:2">2</div> <div class="item" style="order:3">3</div> <div class="item" style="order:4">4</div> <div class="item" style="order:5">5</div> <div class="item" style="order:6">6</div> <div class="item" style="order:7">7</div> <div class="item" style="order:8">8</div> <div class="item" style="order:9">9</div> <!-- <div class="item" style="order:10">10</div> <div class="item" style="order:11">11</div> <div class="item" style="order:12">12</div> --> <!-- <div class="item" style="order:13">13</div> <div class="item" style="order:14">14</div> <div class="item" style="order:15">15</div> <div class="item" style="order:16">16</div> <div class="item" style="order:17">17</div> <div class="item" style="order:18">18</div> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0