CSS 实战笔记：记录我的成长与收获

滑动定屏

fullpage组件：alvarotrigo.com/fullPage/

scroll-snap-type

background-attachment: fixed;

CSS filter属性

将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

outline和border

字体官方下载地址

github.com/googlefonts... 将这个链接中的blob改为raw就可以直接下载Unbounded-Regular字体，即 github.com/googlefonts...

github.com/adobe-fonts... ------> github.com/adobe-fonts...

Swiper 实现轮播图

官网地址： swiperjs.com/

注意： swiper需要在data大于0时呈现，即vue需要判断v-if="data && data.length > 0"，否则会出现切换到最后一屏，就无法切换到第一屏的问题。

vue-awesome-swiper 3 实现案例

js 复制代码

 "vue-awesome-swiper": "^3.1.3",
 "swiper": "^4.4.2",

js 复制代码

<template>
  <div>
    <swiper :options="swiperOption" class="feat-swiper" ref="swiper" key="feat-swiper" v-if="data && data.length > 0">
        <swiper-slide class="feat-item" v-for="item in data" :key="item.id">
          <img :src="item.img" class="img" />
        </swiper-slide>

        <!-- 自定义导航按钮 -->
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
  </div>
</template>

<script>

export default {
  data() {
    return {
      data: [],
      swiperOption: {
        loop: true,
        observer: true,
        observeParents: true,
        speed: 600,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false, // 当自动播放（autoplay）到达最后一个幻灯片时，自动播放将停止**。注意：**在循环模式（loop mode）下，此参数无效**。
          disableOnInteraction: false, // 将其设置为 `false` 时，**在用户交互（例如滑动）后，自动播放（autoplay）将不会被禁用**，而是会在每次交互后重新启动。
        },

        pagination: { // 自定义分页功能
          el: '.feat-swiper .swiper-pagination',
          clickable: true,
        },
        navigation: { // 自定义导航功能
          nextEl: '.feat-swiper .swiper-button-next',
          prevEl: '.feat-swiper .swiper-button-prev',
        }
      },
    };
  },

 
  
};
</script>

<style lang="scss" scoped>

    .feat-swiper {
      width: 1188px;
      padding: 50px 0;
      position: relative;
      .feat-item {
        position: relative;
        cursor: pointer;
        width: 988px;
        height: 588px;
        display: flex;
        justify-content: center;
        align-items: center;

        img.img {
          width: 945px;
          height: 535px;
        }

      }
      .swiper-button-next {
        width: 50px;
        height: 85px;
        transform: rotate(180deg);
      }

      .swiper-button-prev {
        width: 50px;
        height: 85px;
        transform: translateY(50%);
      }
      .swiper-pagination {
        ::v-deep .swiper-pagination-bullet {
          width: 14px;
          height: 14px;
          border: 1px solid #7db6d4;
          background-color: #fff;
          opacity: 1;
          position: relative;
          
       }
       ::v-deep .swiper-pagination-bullet-active::after {
          content: "";
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #7db6d4;
          position: absolute;
          top: 50%; 
          left: 50%; 
          transform: translate(-50%, -50%);
       }
      }

}

</style>