首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

HTML实现简单的下雪特效

先看一下运行效果 这里我的编译软件是HBuilder X,只用到了一张雪花图片snow.png,中间两个不用管,是我上课的其他内容,雪花图片我放在这里了。...下面这是01雪一片一片一片.html里的内容 直接运行的话可能显示的雪花偏大,如下面第一张图,这时我们可以在代码中将雪花尺寸设置小一些,或者选择在浏览器中运行,然后调一下页面的大小,运行效果就是下面第二张图的样子了 到这里我们要实现的效果就完成了...GitHub上广受欢迎的下载神器:youtube-dl youtube-dl安装和实用方法 基于Hexo和GitHub搭建自己的博客 java五子棋小游戏含免费源码 免费且好用的GIF录制软件LICEcap HTML...实现简单的下雪特效 最后,不要忘了❤或支持一下哦

3.2K20

实现pc端鼠标滚轮缩放图片的步骤

之前写一个图片预览插件的时候,遇到了鼠标滚轮滚动进行图片缩放的需求,现在来回顾一下。...思路 首先整理一下思路,要想实现这一需求都需要哪几部,首先我们肯定要阻止鼠标的默认事件,其次,给图片设置一个默认倍数,然后根据我们鼠标的缩放去调整这个倍数,OK,接下来就开干。...据搜索得知,事件参数中,代表鼠标滚轮滚动方向的参数为e.wheelDelta,我们可以打印一下 scrollFunc(e) { // ......// 鼠标滚轮缩放 scrollFunc(e) { e = e || window.event // 火狐下没有wheelDelta,detail代替,由于detail值的正负和wheelDelta...this.scaleFunc(0.05) } if (e.delta < 0) { //当滑轮向下滚动时 this.scaleFunc(-0.05) } }, 执行缩放操作 我们在上面获取鼠标滚轮滚动方向之后

2.2K30

Vue&uni-app swiper 轮播支持鼠标滚轮实现

最近使用 uni-app 开发的一个 H5 项目,其中有一个 uni-app 原生 swiper 组件写的轮播。 今天领导在用的时候提出一个问题:你这个不支持鼠标滚轮啊?...      this.swiper.curDot++     } else {       this.swiper.curDot--     }   } } 2、在 Mounted () 方法里监听鼠滚轮...不过有个问题,不管鼠标滚轮上滑还是下滑, swiper 都是往下翻的。 还需要再改造一下: 鼠标滑轮滚动的时候会有一个 deltaY 属性,正直(100)为往下滑动,负值(-100)为向上滑动。...change="swiperChange" > 实时修改 swiper 的 index : swiperChange (e) {   this.curDot = e.detail.current } 这样就可以实现鼠标滚轮控制...未经允许不得转载:w3h5 » Vue&uni-app swiper 轮播支持鼠标滚轮实现

1.1K40

Vue&uni-app swiper 轮播支持鼠标滚轮实现

最近使用 uni-app 开发的一个 H5 项目,其中有一个 uni-app 原生 swiper 组件写的轮播。 今天领导在用的时候提出一个问题:你这个不支持鼠标滚轮啊?...      this.swiper.curDot++     } else {       this.swiper.curDot--     }   } } 2、在 Mounted () 方法里监听鼠滚轮...不过有个问题,不管鼠标滚轮上滑还是下滑, swiper 都是往下翻的。 还需要再改造一下: 鼠标滑轮滚动的时候会有一个 deltaY 属性,正直(100)为往下滑动,负值(-100)为向上滑动。...change="swiperChange" > 实时修改 swiper 的 index : swiperChange (e) {   this.curDot = e.detail.current } 这样就可以实现鼠标滚轮控制...未经允许不得转载:w3h5 » Vue&uni-app swiper 轮播支持鼠标滚轮实现

1.3K20

Vue&uni-app swiper 轮播支持鼠标滚轮翻页实现

最近使用 uni-app 开发的一个 H5 项目,其中有一个 uni-app 原生 swiper 组件写的轮播。 今天领导在用的时候提出一个问题:你这个不支持鼠标滚轮啊?...      this.swiper.curDot++     } else {       this.swiper.curDot--     }   } } 2、在 Mounted () 方法里监听鼠滚轮...不过有个问题,不管鼠标滚轮上滑还是下滑, swiper 都是往下翻的。 还需要再改造一下: 鼠标滑轮滚动的时候会有一个 deltaY 属性,正直(100)为往下滑动,负值(-100)为向上滑动。...change="swiperChange" > 实时修改 swiper 的 index : swiperChange (e) {   this.curDot = e.detail.current } 这样就可以实现鼠标滚轮控制...未经允许不得转载:w3h5 » Vue&uni-app swiper 轮播支持鼠标滚轮翻页实现

2.5K30

Vue&uni-app swiper 轮播支持鼠标滚轮翻页实现

最近使用 uni-app 开发的一个 H5 项目,其中有一个 uni-app 原生 swiper 组件写的轮播。 今天领导在用的时候提出一个问题:你这个不支持鼠标滚轮啊?...      this.swiper.curDot++     } else {       this.swiper.curDot--     }   } } 2、在 Mounted () 方法里监听鼠滚轮...不过有个问题,不管鼠标滚轮上滑还是下滑, swiper 都是往下翻的。 还需要再改造一下: 鼠标滑轮滚动的时候会有一个 deltaY 属性,正直(100)为往下滑动,负值(-100)为向上滑动。...change="swiperChange" > 实时修改 swiper 的 index : swiperChange (e) {   this.curDot = e.detail.current } 这样就可以实现鼠标滚轮控制...未经允许不得转载:w3h5-Web前端开发资源网 » Vue&uni-app swiper 轮播支持鼠标滚轮翻页实现

43130

HTML和CSS实现酷炫的文字特效

前言 马上我们就要进入下一个阶段,也就是HTML和CSS实现前端界面的阶段了,想必很多小伙伴都想给自己的页面加点酷炫的特效,今天,我就给大家整理了一些非常酷炫的文字特效来装点你的页面!...同时也可以写多个参数逗号隔开来实现更强的效果(下方有多个效果都运用到了这个技巧) -webkit-background-clip 将背景按照设定的参数裁切,一般书写text(即按照文本的样式裁切,仅保留文本的部分...)然后将文本设为透明(webkit-text-fill- color属性)就能实现渐变色文字等 字体实例 下面就是一些字体实例了 镂空字体 .loukong{ /* 设置文字为透明,设置文本描边*/ background-color...webkit-text-stroke: 1px #000000; */ } 渐变字体 后记 以上就是全部内容了,灵活运用css的属性,就能创造出很多你想得到的和想都想不到的特效,甚至一些连写脚本都很难实现的特效

3K11
领券