CSS元素内容与父元素内容背景混合模式的样式属性mix-blend-mode

mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合,类似于photoshop中的混合模式。应用场景有:图像叠加效果(如multiply正片叠底,融合.jpg图片背景颜色)、文字与背景融合(如 difference 实现高对比文字)、动态视觉设计(如 overlay 创建光效)。 样式语法: mix-blend-mod:  <blend-mode...
Web前端开发 / / 185次阅读
CSS元素内容与父元素内容背景混合模式的样式属性mix-blend-mode

简单易用的扒网站工具:目标网站html模板下载软件templatespider

    通过填写要扒的web网页的URL地址,点击按钮就可以自动把对应网页扒下来变为标准的html模版,并自动分好图片、css、js、以及html页面,网页扒完后会自动打开下载好的文件夹,直接鼠标双击打开模板即可在浏览器进行浏览查看。扒好的模板可以供网市场云建站、帝国CMS、织梦CMS等各大建站系统使用。    该软件为开源项目,由Java开发,源码已全部开源,支持 x64 位的系统,提供...
电脑软件 / / 241次阅读
简单易用的扒网站工具:目标网站html模板下载软件templatespider

支持html网页多语言全自动翻译转换的js插件

translate.js是一款通过AI实现i18n(国际化Internationalization),使用极其简单的网页语言自动翻译切换插件,支持中文简繁体转换、其它语言自动翻译,无需改动页面、无语言配置文件、无API Key,插件直接扫描HTML DOM并自动识别翻译显示,采用MIT开源协议,拿来即可永久免费使用。 插件扩展极其灵活、翻译能力快速、全球网络节点、源站翻译及域名分发、微调指令丰富、支持VUE项目。...
Web前端开发 / / 520次阅读
支持html网页多语言全自动翻译转换的js插件

网页常用侧边栏悬浮客服小工具代码

随着网页滚动始终固定在侧边的客服小工具,用于显示在线咨询、联系电话、微信公众号、返回顶部等信息。HTML+CSS结合jQuery代码,可以实现鼠标悬浮或点击显示电话号码、二维码图片等。 代码效果: HTML代码: <div id="widget"> <ul> <li> <a class="p...
Web前端开发 / / 230次阅读
网页常用侧边栏悬浮客服小工具代码

实现响应式web网页ctrl+鼠标滚轮等比缩放的js代码

使用非固定像素单位开发的响应式网页,如rem、vw等,使用ctrl+鼠标滚轮缩放时网页不会缩小,因为rem、vw大多会浏览器窗口宽度分辨率绑定,而ctrl+鼠标滚轮缩小,分辨率反应变化,所以网页不会等比缩小。但可以通过js+缩放比率来实现ctrl+鼠标滚轮等比缩小的效果,适用于使用了vw单位或者rem单位。 代码: (function (doc, win) { var docEl = doc.docum...
Web前端开发 / / 435次阅读

GSAP动画库实现无缝无限滚动跑马灯效果

网页图片跑马灯滚动效果的需求:均速无限滚动,无缝衔接滚动,鼠标悬浮暂停滚动,鼠标移动恢复滚动,可以向左或向右滚动。实现原理,利用gsap参数x和repeat。 效果如下: HTML代码: <div class="gallery"> <ul> <li> <a href=""> <img class="img"...
Web前端开发 / / 503次阅读
GSAP动画库实现无缝无限滚动跑马灯效果

GSAP参数的箭头函数的运用方法和示例

(参数) => { 函数体 }是ES6中引入的特性,叫箭头函数,一种简洁的函数定义方式,在GSAP中利用箭头函数,可以实现更多变化的动画。 箭头函数有两种基本语法,分别是 (参数) => { 函数体 } (参数) => 表达式 示例: //一般函数 function add(a, b){ return a + b; } //箭头函数 const add = (a,...
Web前端开发 / / 303次阅读

Node.js NODE_PATH环境变量的作用以及怎么配置NODE_PATH环境变量

为什么要配置Node.js的NODE_PATH环境变量?目的是为了能够让Node.js在全局范围内识别并找到某些模块或库,通俗地讲就是为了告诉Node.js在哪里查找全局安装的npm包(即npm全局包)。 配置步骤: 1、右键点击“此电脑”或“我的电脑”,选择“属性”,点击“高级系统设置”,在“系统属性窗口中”点击“环境变量(N)...”按钮,在新弹出的环境变量窗口中,点击“系统变量(S)”下面的“新建(W...
电脑软件 / / 723次阅读
Node.js NODE_PATH环境变量的作用以及怎么配置NODE_PATH环境变量

Node.js设置或更改npm下载包的默认缓存目录命令npm config set cache

npm下载包缓存目录用于保存已下载包的电脑本地位置,从而方便在后续安装相同包时进行复用,有效节省下载安装时间和带宽资源。不同操作系统的默认npm缓存目录会有差异,但好像都不好找。windows系统的默认npm缓存目录的路径一般是C:\Users\<username>\AppData\Roaming\npm-cache。(username是电脑用户名) 如果不喜欢这个存储路径,可以使用npm命令进行更改设置。...
电脑软件 / / 1065次阅读
Node.js设置或更改npm下载包的默认缓存目录命令npm config set cache

Node.js修改或自定义设置npm全局包的安装路径命令npm config set prefix

windows电脑想自定义npm全局包的安装路径方便查找,可以使用npm config set prefix命令。 1、在nodejs安装目录,如D:\nodejs,直接鼠标右键新建文件夹的方式创建一个用来存放全局npm包的目录(使用命令创建,则是mkdir命令),命名为node_global,那么其路径便是D:\nodejs\node_global。 2、以管理员身份运行命令提示符工具,输入以下命令后按回...
电脑软件 / / 1081次阅读
Node.js修改或自定义设置npm全局包的安装路径命令npm config set prefix

通过execCommand命令实现一键复制文本的javascript代码

网页上实现一键复制的功能可以使用clipboardjs插件,也可以使用execCommand命令,但兼容性没有前者好。实现思路是创建一个表单文本输入框元素如input、textarea,然后使用select()方法选择文本,再使用execCommand命令复制文本到剪切板。 为了便于重复调用,写成一个函数 function tddx_copyText(ctext) { var copyText = do...
Web前端开发 / / 488次阅读

canvas实现点击指定切换元素的圆形弧线进度条动画效果

这是一个使用画布canvas做的通过点击元素实现弧线运动到指定位置的动画效果。实现原理和前面分享的《Canvas百分比动画进度条》教程一样,区别是增加了一个点击事件来传递参数使弧线动画运动到指定位置。思路很简单,代码也很简单。 HTML代码: <div class="canvas"> <canvas id="circle" width="644" height="640...
Web前端开发 / / 656次阅读
canvas实现点击指定切换元素的圆形弧线进度条动画效果