基于HTML5的爱心表白动画特效
从视觉上看，它也是一个爱心轮廓，但是不同的是这个爱心轮廓由许多跳动的小爱心组成，更加有一种3D立体的效果。 1. 运行效果 2. 代码构成 <!doctype html><html...
排序
那些你不知道的 CSS 自定义形状网格布局 3
基于CSS自定义网格已发布第一部分和第二部分，本文将开始第三部分探讨更多的奇特自定义形状，与之前的文章一样，核心还是基于CSS grid，clip 和 mask来自定义网格形状布局。,三部分文章不一定...
世界杯火热进行中, 用一个div画个足球场助助兴
四年一度的世界杯正在火热进行中，有没有熬夜看你喜欢的队伍比赛呢。在这欢庆的氛围中，我决定用代码参与一把世界杯，擦边参与，那就是用CSS画一个足球场，正常的用CSS布局肯定是非常easy的，所以决定只用...
【CSS】能全部通关？那你这些知识点都巩固了（附上游戏攻略...）
(目录),,大家好，我是翼同学。,前几天刚学完CSS选择器，有位大佬分享了一个有关 CSS选择器用法的小游戏，共32关，如果你全都通关了，那么你的选择器算是初步入门了。,下面是游戏链接：,欢度国庆，在...
React中路由中的redux和redux拓展
路由中使用redux 在路由中使用redux只需要两步 第一步 在路由策略组件中（如HashRouter），渲染Route组件，并在该Route路由规则组件中，引入connect方法处理后的应用程序组...
vue入门知识总结
1.插值表达式 {{}} 2.指令 2.1 v-if 、v-else、 v-show、v-else-if v-if： 在切换过程中条件块内的事件监听器和子组件...
Java 接口的所有子类都需要执行相同处理逻辑的推荐姿势
一、背景 在实际开发过程中，有些时候我们可能会遇到这样的场景：我们定义接口给上游使用，不同的业务类型定义不同的子类型，实现该接口的某个函数，但是这些子类型会有很多公共的逻辑（公共的步骤）。 如果将这部...
那些炫酷的CSS文字效果之诗词《兔》
不知不觉已经迈入2023年，今年是兔年，想到兔子就会联想到玉兔，中秋，胡萝卜，兔子不吃窝边草，这就越扯越远了，今天的主题是用纯CSS来实现各种不错的文字效果，文字则摘录古诗词中有关《兔》相关的诗词，让...
700行无用 纯 CSS 祝考生 金榜高粽！《1_bit 的无用 CSS 代码 》
今天才想起来端午这回事，没办法就急急忙忙的赶工一下，接下来我就画一下这个海报试试手了：,,先给整个网页制作一个布局吧，直接 flex 搞定，并且使其居中 justify-content、align-i...
那些你不知道的炫酷开关交互效果(12种)
本文将继续更新那些炫酷交互效果系列文章，今天带来的是有关 toggle 开关相关的组件。以下是本次文章涉及到的开关组件总览图，总计收集12款不同交互效果，相信总有一款适合你。 ,那些你不知道的炫酷交互...
面试官：说说你对 Node 中的 Stream 的理解
大家好，我是 CoderBin,面试官：“说说你对Node中的Stream的理解”,紧张的萌新：“好像是一种流？...”,面试官：“...”,······,又来到了面试官系列，本次讲解的是node中关...
基于一段神奇的CSS渐变制作噪点效果
提及噪点效果，首先想到的就是以前的旧电视机信号不稳定时或者画面不稳定时的效果。如果你没有看过那种旧电视，可以看下面的gif动图，真实的情况噪点的变化速度会快很多，这里为了gif的大小，截取的时间较短供...
Vue组件的通信方式有哪些？
文章目录 组件间通信的概念 组件间通信解决了什么？ 组件间通信的分类 组件间通信的方案 props传递数据 $emit 触发自定义事件 ref EventBus $parent 或 $root $at...
CSS中常用函数和渐变效果
calc calc()函数支持加减乘除四种运算，很多类型都可以使用calc()函数，例如angle、length、frequency、time，percentage...
基于CSS mask和clip-path实现切角的技巧
我们最近使用 CSS mask属性创建花哨的边框，本文将使用 CSS mask和 clip-path来切元素的四个角！使用多种技巧可以从任何元素的角切割不同的形状。在本文中，我们将考虑创建独特角落形状...
JavaScript中 处理异步的几种方法
1. 回调函数 回调（callback）是一个函数被作为一个参数传递到另一个函数里，在那个函数执行完后再执行。 假定有两个函数f1和f2，f2等待f1的执行结果，f1()–>f2()；如果f1很...
CSS中box-shadow属性和2D变换
box-shadow box-shadow表示盒阴影，可以给元素设置阴影效果，如果我们设置向下的阴影效果: .wrapper { position: fixed; left: 0; top: 0, b...
【原子样式实践】第12篇 一次搞定微信开发者工具的原子样式扩展
原子样式虽好，在IDE中使用，有扩展辅助就更好。本文介绍如何开发微信开发者工具的原子样式扩展，支持原子样式的自动生成，支持特色功能组合样式，支持特色功能样式使用统计报告。 1 研发背景 （1）集成可视...
dart-sass与node-sass的区别以及使用dart-sass可能会出现的问题
前言 2020年10月27日，Sass 官方团队正式宣布 Libsass 将弃用，以及基于它的 Node Sass 和 SassC，并且建议用户使用 Dart Sass。如果在vue脚手架搭建的项目中...
CSS 基于文字的图片马赛克你见过吗
,看到封面这张图，是不是如同艺术品一般，第一次看到这张图时，是比较震惊的，迫不及待的研究其源码是如何实现的，最后更为惊奇的是只需要纯 CSS 即可实现，接下来就展开说明实现过程。,实现此效果需要了解 ...
面试官：你说说var、let、const三者的区别
大家好，我是 CoderBin,面试官：“你说说var、let、const三者的区别”,紧张的萌新：“var没有块级作用域，let有......”,面试官：“...”,······,本次又来到了面试官...
本地小说阅读网站打造
如下示例，是使用VUE 打造的本地小说阅读网站 编辑 一、本地小说网站总体组织框架 1、所需的VUE库和elementLib以及JQ库 编辑 2、本地目录设计 编辑 编辑 藏书库下，是HTML...
CSS 实现炫酷文本过渡动画
今天分享一个炫酷的文本过渡动画效果，如下面GIF所示，曾经是否有见过这种动画呢，想想是不是感觉挺复杂呢，通常这个过渡效果通过较为复杂的可用WebGl实现，本文通过另一种方式实现，文章尾部有神奇的代码...
夏天来啦，用纯CSS实现水果解解馋吧
今日是农历六月初一。不知不觉地又是一年夏天来临了，面对烈日炎炎，夏天要吃的水果那是必不可少，今天就用CSS来给大家带来一个水果拼盘，提前给大家解解暑~,,以上15种水果你能看出都是什么水果吗？相对不够...
React中Flux与redux
混合 react提供了组件的目的是为了复用虚拟DOM，所以react提供了混合的技术是为了复用组件的功能 在ES5中，我们可以通过mixins使用，继承对象中的属性和方法 但是ES6中，提供了exte...
那些你不知道的 CSS 自定义形状网格布局
在正常的开发中，我们会遇到很多元素块排列对齐的需求，如九宫格抽奖，多张图片上传后等分布局预览，微信朋友圈多张图片展示等。这都是正常的正方形很规整的布局。,如下所示，如果图像不是完全正方形，而是形状像六...
【Java Web】前端三剑客 之 CSS
(目录),上面的代码，就是最典型的例子。 其中 style 标签的内容，就是一个 CSS的代码。,,,,,CSS 是不区分大小写，但是我们开发时统一使用小写。,,这个类选择器，可以说是我们最常使用的一...
纯CSS实现四种方式文本反差色效果
,如上图所示，文字随着界面的交互变化会修改文字的颜色形成反差色，让平平无奇的文字产生了眼前一亮的效果。如果你关注设计和动画效果，这样的效果肯定见过不少，在一些比较注重设计的网站都有类似的交互效果出现...
前端布局之浅谈BFC
大家好，我是 CoderBin,在介绍BFC之前，需要先给大家介绍一下文档流。,我们常说的文档流其实分为 定位流、 浮动流、 普通流三种。,如果元素的属性 position 为 absolute ...
关于Redis的BigKey
文章目录 准备 keys * 等命令的危害与避免 不用keys * ，应该用什么 BigKey 阿里云Redis开发规范 多大算Big 危害 怎么产生的？ 怎么发现BigKey 怎么删除 String...
React中详解redux
redux redux严格按照flux思想实现的一套框架，实现了单一数据流向。 组成部分 redux由四部分组成 action 组件发布的消息 store 存储消息的 reducers 捕获actio...
【原子样式实践】第10篇 原子样式到原子设计的发展使用
在各种知名样式表或者组件库开箱即用的优势下，原子样式依然流行，说明了成品样式（半定制样式）存在升级、变更或者管理的需求，在维护时与发展或者规范形成了冲突。在大粒度上不能较好的解决问题时，势必下钻寻求更...
技术干货贴|小程序WXSS编译原理
近年来，小程序蓬勃发展，从微信到支付宝、抖音等各大平台，小程序纷纷上线。小程序发展如此快速，究其原因离不开它的几大特点：获客成本低、用户访问成本低、轻量触达、用户体验佳、用户负担小、更加安全。 小程序...
《CSS揭秘》读书笔记-条纹背景(一)
背景知识 颜色渐变设置：background: linear-gradient(direction, color-stop1, color-stop2, ...);指定背景图片大小：backgroun...
浅谈性能优化之图片压缩、加载和格式选择
在认识图片优化前，我们先了解下 【二进制位数】与【色彩呈现】的关系。,在计算机中，一般用二进制数来表示像素。在不同的图片格式中，像素与二进制位数之间对应的关系是不同的。一个像素对应的二进制位数越多，它...
CSS中的文字美化与装饰属性
text-shadow text-shadow是文字阴影，不支持inset关键字，也就是text-shadow只有外阴影，没有内阴影，不支持阴影扩展，最多支持3个数值，分别表示水平偏移、垂直偏...
HTML5+CSS3(六)-全面详解（学习总结---从入门到深化）
目录 CSS简介 CSS概念 为什么需要CSS CSS和HTML之间的关系 语法 学习效果反馈 CSS的引入方式 内联样式（行内样式...
CSS 中 ::before 和 ::after 伪元素的几个实际用途
给元素设置伪元素的时候，必须设置其 content属性，浏览器才会将这些元素插入到选择的元素中。该值可以设置为空字符串： content: ""。,::before 表示在原始元素的实际内容之前表示一...
CSS动画篇之炫酷时钟之时钟墙
通过CSS制作的时钟大家肯定看到的多了，但是像下面这样的时钟是不是很少见，整个时钟是有很多个小的时钟组合而成，每秒通过多个时钟的动画来切换时间，不得不说这个设计是非常的炫酷且有特色。 ,看到这个动画效...
CSS3实现有趣的动态表情包
前置知识点 animation animation 属性是一个简写属性，用于设置六个动画属性： animation-name animation-duration animation-timing-f...
一张图不用，纯CSS 做个贺卡
朋友生日了，直接画，炫技并且表示本人闲的全身疼才会去拿CSS画画，以此嘲弄对方的加班： ,既然贺卡做出来了，那就顺便介绍一下贺卡制作流程吧，其实也不是什么技术，也就是CSS 拼拼拼就可以了，简简单单...
Android 自定义View 之 圆环进度条
圆环进度条 前言 正文 一、XML样式 二、构造方法 三、测量 四、绘制 ① 绘制进度条背景 ② 绘制进度 ③ 绘制文字 五、API方法 六、使用 七、源码 前言 很多时候我们会使用进度条，而Andr...
那些你不知道的炫酷导航交互效果
基于上次发布的 那些你不知道的炫酷按钮交互效果 反馈比较好，后续将继续收集那些炫酷的交互效果，希望可以给你的项目添砖加瓦，更上一层楼。,那些你不知道的炫酷交互效果系列：,本文带来的炫酷的导航交互效果...
你没事吧？没事就来看看这篇响应式方案
前言 hi大家好，我是小鱼，今天讨论的是前端响应式方案。这也是很多面试官喜欢问的一个问题，题型考察范围比较广，区分度比较大，一题就把你看得透透的，特别是移动端的更不可避免。所以，卷起来吧。 响应式 一...
Intellij IDEA配置Tomcat并创建JavaWeb项目
Intellij IDEA配置Tomcat并创建JavaWeb项目 Intellij IDEA配置Tomcat并创建JavaWeb项目 一、实验环境 二、说明 三、Web项目搭建...
vue中工作总结-持续更新
1.vue中数据向下传递时，无法使用@close方法清除 原因：传递的时候需要进行一波深拷贝 方法：JSON.parse(JSON.stringify(obj)) 2.表格选择的时候无法再次点击取消 ...
SpringMVC注解开发
在SpringMVC配置文件中 配置注解开发设置 配置注解需要扫描的位置 <context:component-scan base-package="org.djd.Controller"/&g...
让 Spartacus 服务器端渲染引入 long API 调用超时机制的两种配置方法
两种方法，使用 config.backend.timeout = { 浏览器：...，服务器：...} ，或者可以更具体地配置，即基于 Request 粒度，通过将 HTTP_TIMEOUT_CONF...
css中的counter计数器
作为程序猿，代码比什么都有说服力，嗯，所以废话不多说，直接看吧，认真看完了，就一定有收获（内容有点多，需要一点耐心哦,我是一点一点写的，咱也一点一点看呗） counter:是css计数器，只能跟con...
基于vue-Ant实现图片上传
引言： 上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。如何使用Ant-design-vue中的 a-upload 上传组件进行图片或者视频的上传呢？ 正文： 1...
面试官：谈谈你知道的 DOM 常见的操作
大家好，我是 CoderBin，本次总结了JavaScript中DOM的一些常用操作，希望对大家有所帮助，谢谢！如果文中有不对、疑惑的地方，欢迎在评论区留言指正,文档对象模型 (DOM) 是 HTM...
开箱即用，这些 Vue3 后台管理系统模板绝对让你爽歪歪！
原文链接：Vue3 后台管理系统模板推荐。 之前写了一篇关于 Vue2 的后台管理系统模板的推荐，详情请见 Vue后台管理系统模板推荐。 Vue3 在今年2月份已成为新的默认版本，本文收集了一些 Vu...
知道了web的攻击方式，还不快防起来？
大家好，我是 CoderBin,本文总结了一些关于web攻击的几种方式（不代表全部）以及预防方法，希望大家的web之路能够"一路平安",如果文中有不对、疑惑的地方，欢迎在评论区留言指正,Web攻击（W...
SVG图标实现主题皮肤切换
通过添加class以及修改css变量得方式实现一个svg图标切换不同得主题色 1.在变量文件中定义几组控制几种不同颜色得变量 分析提供的图标发现有三种颜色，因此定义三个css变量 //控制导航双色图标...
【前端】总结一下前端css样式规范
(总结一下前端css样式规范),通用规范,如果 CSS 可以做到，就不要使用 JS，建议并适当缩写值，提高可读性，特殊情况除外 “建议并适当”是因为缩写总是会包含一系列的值，而有时候我们并不希望设置某...
C4D搭配椭圆动态及闪动控制动画效果
前言 上一章讲述了利用 C4D 图切割制作闪光效果，本章将讲述如何在上一章描述的效果基础上，加入椭圆动态效果以及闪动控制。 如下图所示，椭圆运动主要分成两部分：外圈运动、内圈运动。其中内圈运动看似一个...
WebSocket和Socket编程
面试一般会问 socket原理 socket为啥要有端口：确定一个链路的是一个四元组 Socket编程 socket通信 你做过socket编程吗，socket是怎么实现知道有连接过来的 说说WebS...
纯css实现文本内容单行/多行溢出显示省略号
一般都知道css可以实现单行溢出限制，那么多行溢出的话，css该怎么去实现了，此例主要借助css的伪元素样式去实现的，具体代码和注释如下。 单行超出宽度限制溢出 html代码： <div cla...
这是我在51CTO博客的第一篇博文
一、自我介绍 很高兴来到51CTO博客，目前我是一名在读本科生，希望在这里能学到更多的知识，并且能够写出优秀的博客。 二、技术分享 基础用户登陆界面 <!doctype html><...
CSS中3D变换和gradient效果
radial-gradient radial-gradient()是径向渐变，指的是一个中心点向四周扩撒的渐变效果，其中包括波的扩散和光的扩散中都有径向渐变的特征。 css中我们使用radial-gr...