让交互更加生动！有意思的鼠标跟随 3D 旋转动效
今天，群友问了这样一个问题，如下所示的鼠标跟随交互效果，如何实现： 简单分析一下，这个交互效果主要有两个核心： 借助了 CSS 3D 的能力 元素的旋转需要和鼠标的移动相结合 本文，就将讲述如何使用纯 CSS 实现类似的交互效果，以及，借助 JavaScript 绑定鼠标事件，快速还原上述效果。 纯 ...
八个解决你80%需求的CSS动画库
八个解决你80%需求的CSS动画库 点击打开视频讲解 在学习和工作的过程中，我们总免不了要写各种各样的css动画，给某个部分添加动画效果，如果觉得自己写的动画效果单一乏味，不妨试试这8个CSS动画库，值得收藏使用。 一、hover.css 开箱即用的鼠标悬停动画，支持的动画类型有： 2D Trans ...
关于重绘和回流的解析
重绘和回流： repaint(重绘) ，repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,background color，不会影响到dom结构渲染。 reflow(渲染)，与repaint区别就是他会影响到dom的结构渲染，同时他 ...
妙啊！动画还可以这样控制？
今天，有在群里看到这样一个问题：有一个动画，一开始静止处于第一帧，只在用户 hover 的时候运行动画，在运行一次后停止，并且停留在最后一帧，使用 CSS 可以完成么？ 像是这样： 一个非常有意思的问题，答案是可以的。我们抽取一下其中的关键点： 动画只运行一次，未运行前处于第一帧，运行完后处于最后一 ...
前端周刊：2022-8 期
前端周刊：2022-8 期 前端开发 为什么视频网站的视频链接地址是 blob？ 很详细的讲解了如何实现视频流式传输，还能防盗链 实时 html5 的 mp3 播放。再次体验数据格式 arraybuffer。 音频防盗链 前端工具箱-css 动画缓动函数预览及生成 css 动画缓动函数预览及生成 前 ...
CSS 选择器以及优先级
1. id选择器 <style> #container { width: 100px; } </style> <body> <div id="container"></div> </body> 2. class选择器 | 类选择器 <style> .container { width: 100px; ...
字符集和编码区别以及HTML/JS/CSS实体字符的表示
1.字符集/字符编码是什么？ 字符集或者说字符编码就是给字符定义了数值编号以及数值编号存储格式。 严格来说字符集和字符编码是两个概念： charset 是 character set 的简写，即字符集。 encoding 是 charset encoding 的简写，即字符集编码，简称编码。 字符集 ...
React中兄弟组件通信和组件跨级传递Context的使用
React兄弟组件之间的通信 Child2组件需要去更改Child1组件中的数据。 因为Child1和Child2是兄弟组件 所以数据和事件都放在最进的父级组件中去 兄弟组件通信的简单使用 import React from 'react'; //这个是react这个包，我们是需要的 import ...
Nest+Vue实战：工作计划管理系统
该项目是学习Nest.js框架所得，前端基于Vue.js + Vuex + VueRouter + ElementUI + SCSS，后端基于Node.js + TypeScript + Nest.js + MySQL + TypeORM。 ...
bootstrap的基础使用
Bootstrap Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。目前，Bootstrap最新版本为4.4。 注意，Bootstrap有三个大版本分别是 v2、v3 ...
个人音乐博客 h5、css和js等
浅说一下吧 这个小项目由h5和css还有js和jq写的 主题内容为个人音乐 博客等 首页一级导航栏 以及侧边栏 整合部分图标(侧边栏未添加收起操作 时间原因 会的朋友们可以自行添加一个动画就可以 在main.js中) 中间音乐部分为作者和歌词 点击播放的按钮可弹出对应的视频mv 视频mv均为酷狗音乐 ...
CSS 技术
浏览本篇文章前可以先看之前的前端网页介绍和html常用标签以便更容易理解 本文目录： CSS相关查阅文档：https://kohler.lanzouo.com/i0XFcz8svob 文档截图 CSS 技术介绍 CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一 ...