master

分支 (1)

管理

管理

master

css-gather
/
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Gather 首页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>

  <body>
    <div id="app" class="max-w-[1080px] mx-auto p-4">
      <div
        class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 rounded-md">
        <div
          class="grid grid-rows-[1fr,auto] w-full bg-white rounded-lg overflow-hidden shadow-lg border hover:border-2 hover:border-blue-500 transition-all duration-300 ease-in-out"
          v-for="(item, index) in data"
          :key="index">
          <div
            class="img-box flex items-center cursor-pointer opacity-60 hover:opacity-100">
            <img
              class="w-full h-full object-cover"
              v-if="isImage(item)"
              :src="item.image"
              :alt="item.title" />
            <video
              class="w-full h-full object-cover"
              v-else
              :src="item.image"
              :alt="item.title"
              autoplay
              loop
              muted />
          </div>
          <h2 class="h-min text-center py-4 px-2 bg-gray-300">
            <a
              :href="`./`+item.title+`/index.html`"
              class="hover:text-blue-500">
              {{ index + 1 }}#{{ item.title }}
            </a>
          </h2>
        </div>
      </div>
    </div>

    <script>
      const examples = [
        {
          image: './assets/css-modal.png',
          title: '纯CSS实现dialog模态框',
        },
        {
          image: './assets/cssVliadForm.png',
          title: '纯CSS实现表单验证',
        },
        { image: './assets/Snipaste-2505094026.png', title: '动漫卡片风' },
        { image: './assets/rent-pay.png', title: 'DotsDash' },
        { image: './assets/a-waves.png', title: '3D波浪特效' },
        { image: './assets/rent-pay.png', title: '租房到期交付租金' },
        { image: './assets/thunder.png', title: '扫雷' },
        {
          image: './assets/css-login-minicry.gif',
          title: '【CSS+JS】新拟态滑动登录注册页面',
        },
        { image: './assets/css-login-scene.mov', title: '纯CSS玻璃态视觉登录' },
        { image: './assets/360-floating-ball.mov', title: '仿360悬浮球' },
        {
          image: './assets/Meteor shower special effects.mov',
          title: '流星雨特效+天气',
        },
        { image: './assets/js-virtual-list.mov', title: '原生JS实现虚拟列表' },
        { image: './assets/Turntable lottery.mov', title: '转盘抽奖' },
        {
          image: './assets/Picture theme color set background color.mov',
          title: 'CSS 获取图片主题色设置背景色调',
        },
        {
          image: './assets/css-transition-tips.mp4',
          title: 'CSS-transition小技巧（保存hover状态）',
        },
        {
          image: './assets/CSS vertical card sliding animation.mov',
          title: 'CSS垂直卡片滑动动画',
        },
        {
          image: './assets/CSS vertical floating sidebar.mov',
          title: 'CSS垂直悬浮侧边栏',
        },
        { image: './assets/css-3d-animate.gif', title: 'CSS实现3D图标效果' },
        {
          image: './assets/css-login-animate.gif',
          title: 'CSS实现动画登录页面',
        },
        { image: './assets/css-two-menu.gif', title: 'CSS实现二级导航菜单' },
        {
          image: './assets/CSS card coupon effect.mov',
          title: 'CSS实现卡券效果',
        },
        { image: './assets/css-ground-glass.gif', title: 'CSS实现毛玻璃效果' },
        {
          image: './assets/CSS retractable navigation bar.mov',
          title: 'CSS实现伸缩式导航栏',
        },
        {
          image: './assets/css-login-input-animate.gif',
          title: 'CSS实现输入动画',
        },
        {
          image: './assets/css-search-flexible.gif',
          title: 'CSS实现缩放搜索栏',
        },
        {
          image: './assets/css-text-ellipsis.mp4',
          title: 'CSS实现文本过长中间省略',
        },
        {
          image: './assets/css-circle-statistical-figure.gif',
          title: 'CSS实现圆形比例统计图',
        },
        { image: './assets/vue.mov', title: 'JS 手撕Vue' },
      ]
      const { createApp, ref } = Vue

      createApp({
        setup() {
          const data = ref(examples)

          const isImage = data => {
            const exts = ['png', 'jpg', 'gif', 'jpeg']
            const ext = data.image.split('.').pop()
            return exts.includes(ext)
          }

          return { data, isImage }
        },
      }).mount('#app')
    </script>
  </body>
</html>