自定义博客皮肤VIP专享

*博客头图：

点击选择上传的图片

格式为PNG、JPG，宽度*高度大于1920*100像素，不超过2MB，主视觉建议放在右侧，请参照线上博客头图

请上传大于1920*100像素的图片！

博客底图：

点击选择上传的图片

图片格式为PNG、JPG，不超过1MB，可上下左右平铺至整个背景

栏目图：

点击选择上传的图片

图片格式为PNG、JPG，图片宽度*高度为300*38像素，不超过0.5MB

主标题颜色：

RGB颜色，例如：#AFAFAF

Hover：

RGB颜色，例如：#AFAFAF

副标题颜色：

RGB颜色，例如：#AFAFAF

预览取消提交

自定义博客皮肤

-+

上一步保存

weixin_43541909的博客

缘不知 CSDN认证博客专家 CSDN认证企业博客

码龄6年

16: 原创

21万+: 周排名

149万+: 总排名

4万+: 访问

: 等级

355: 积分

3: 粉丝

9: 获赞

8: 评论

37: 收藏

私信

关注

热门文章

分类专栏

最新评论

Nuxt.js项目是antd 按需加载笔记
缘不知: 需要先按需引入组件 [code=javascript] import { MenuItem } from "ant-design-vue"; [/code] 才可以使用
Nuxt.js项目是antd 按需加载笔记
咸鱼工页: Unknown custom element: <a-menu-item> - did you register the component correctly? 应该怎么解决呢
Nuxt.js 中使用Swiper Animate
缘不知: 不好意思。现在才看到，请问现在解决了吗？没有的话我可以帮忙看看。
Nuxt.js 中使用Swiper Animate
wakalao: 照着同样的方式引入了，还是报错，swiperAnimate is not defined[code=javascript]，大哥有空帮忙看看，孩子要死了 import '../static/swiper/swiper.animate1.0.3.min' [/code] [code=javascript] // Global CSS (https://go.nuxtjs.dev/config-css) css: [ 'static/public.css', 'swiper/css/swiper.css', 'static/swiper/animate.min.css' ], // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins) plugins: [ { src:'@/plugins/axios-plugin.js' }, { src:'@/plugins/swiper.js', ssr: false }, { src:'@/plugins/animate.js', ssr: false } ], [/code]
Nuxt.js 中使用Swiper Animate
wakalao: 为什么我已引入就是 swiperAnimate is not defined[code=javascript] on: { init: function(){ swiperAnimateCache(this); //隐藏动画元素 swiperAnimate(this); //初始化完成开始动画 }, slideChangeTransitionEnd: function(){ swiperAnimate(this); //每个slide切换结束时也运行当前slide动画 //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名 } } [/code]

最新文章

遮罩层

关注

关注数：文章数：1 文章阅读量：891 文章收藏量：2

作者: 缘不知

代码搬运流水线作业，代号 007，我不生产代码，我只是代码的搬运工。码农 bug 有点多！！

展开

整理了一些CSS自定义加载动画效果，可与遮罩层一起使用

在这里整理了一些PC端的loading动画效果，个人感觉还可以，所以就整理了一下。转载于原文，因为我用的是 Nuxt.js ，所以整理的也是vue组件。先上效果图，我只整理了原链接的第 1 ，4，5，6，7，8种动画效果。解释一下为什么未收录第2，3种动画，是因为这种动画效果的实现是需要背景色 background-color 存在且不能为透明色的背景色，为透明色的无法遮盖住动画轨迹，而这里遮罩层是需要透明色，所以未采用这两种效果，如果有背景色存在且不透明的童鞋可以考虑添加进来，组件源码就在下面&.

原创 2020-05-29 18:10:15 · 891 阅读 · 0 评论