网页常见效果之纯css实现卡片效果之hover、堆叠、鼠标滚动页面、选项卡分类效果、Swiper炫酷轮播

html+css+js版本 - 鼠标滚动页面

vue3+ts版本 -选项卡分类效果

纯css 卡片堆叠效果

纯css 卡片hover效果

纯css 卡片hover效果

Vue3 + ts + Swiper11炫酷轮播图效果

这个代码片段不知道为啥总报错算了直接代码提上效果自己看即可运行起来图已经贴上了。。

代码演示

<template>
  <div class="slide-container">
    <div class="slide-box">
      <swiper
        :slidesPerView="5"
        loop
        :autoplay="{ delay: 4000, disableOnInteraction: true }"
        :navigation="true"
        :pagination="{ clickable: true }"
        :scrollbar="{ draggable: true }"
        :space-between="0"
        :modules="modules"
        effect="coverflow"
        :coverflowEffect="coverflowEffect"
        @mouseenter="handleEnter"
        @mouseleave="handleLeave"
        @swiper="handleSwiper"
        @slideChange="handleSlideChange"
      >
        <swiper-slide
          v-for="(item, index) in bannerList"
          :key="index"
          class="swiper-item"
        >
          <img :src="item.img" class="slide-img" />
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, toRaw, onMounted } from 'vue'
import { Swiper, SwiperSlide } from 'swiper@11.1.14/vue'
import 'swiper@11.1.14/css'
import 'swiper@11.1.14/css/navigation'
import 'swiper@11.1.14/css/pagination'
import 'swiper@11.1.14/css/effect-coverflow'
import {
  Autoplay,
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  EffectCoverflow,
} from 'swiper@11.1.14/modules'
import type { Swiper as SwiperType } from 'swiper@11.1.14'

onMounted(() => {})

// 定义模块类型
const modules = [
  Autoplay,
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  EffectCoverflow,
]

// 定义swiper实例
let swiperInstance: SwiperType | null = null // 使用SwiperType类型，并允许为null

// 定义coverflowEffect的配置
const coverflowEffect = ref({
  rotate: 0, // slide做3d旋转时Y轴的旋转角度
  stretch: 1, // 每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比
  depth: 60, // slide的位置深度。值越大z轴距离越远，看起来越小
  modifier: 7, // depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显
  slideShadows: false, // 是否开启slide阴影
})

// 鼠标移入
const handleEnter = () => {
  swiperInstance?.autoplay.stop()
}
// 鼠标移出
const handleLeave = () => {
  swiperInstance?.autoplay.start()
}
const handleSwiper = (swiper: any) => {
  swiperInstance = toRaw(swiper)
}

const handleSlideChange = () => {
  // 处理切换事件
}

// 定义图片列表
const bannerList = ref([
  { img: 'https://picsum.photos/200/300?random=1' },
  { img: 'https://picsum.photos/200/300?random=2' },
  { img: 'https://picsum.photos/200/300?random=3' },
  { img: 'https://picsum.photos/200/300?random=4' },
  { img: 'https://picsum.photos/200/300?random=5' },
  { img: 'https://picsum.photos/200/300?random=6' },
])
</script>

<style scoped>
.slide-box {
  width: 100%;
}
.slide-img {
  width: 100%;
  height: auto;
}
</style>

总结

以上都是前端一些比较常见的页面效果，小汇总一下。。。