CSS 奇思妙想之酷炫倒影
在 CSS 中，倒影是一种比较常见的效果。今天，我们就将尝试，使用 CSS 完成各类不同的倒影效果，话不多说，直接进入主题。 实现倒影的两种方式 首先，快速过一下在 CSS 中，实现倒影的 2 种方式。 使用 -webkit-box-reflect 正常而言，-webkit-box-reflect ...
day07-Vue04
Vue04 12.Vue2 脚手架模块化开发 目前开发模式的问题： 开发效率低 不够规范 维护和升级，可读性比较差 12.1基本介绍 官网地址 什么是Vue Cli脚手架 12.2环境配置，搭建项目 VUE安装教程+VScode配置 搭建Vue脚手架工程，需要用到NPM（node package m ...
CSS3 中flex 布局
Flexbox 是 CSS3 中的一种布局模式。它允许元素在一个容器中自动排列，可以使用灵活的方式创建复杂的布局。Flex 布局有很多优点，例如，它很容易实现响应式设计，并且可以很容易地对齐和排列元素。 ...
UnoCSS 简化 CSS 的书写，Nice！
CSS 样式太多，重复写 在学习 UnoCSS 之前，我提出几个问题： 你是否有过写完了 HTML 之后，跳转到 style 写 CSS 这样来回跳转的痛苦？ 你是否有过不知道如何给节点取类名的痛苦（有的节点确实没啥必要取类名，但就是需要写 CSS）？ 你是否有过管理重复、繁杂、繁多的 CSS 而痛 ...
CSS优先级-权重叠加计算
• 先上总结: a. 说明: i. 公式: (行内, Id, 类, 标签) ii. 规则: 从左至右依次做个数上的比较, 如果同级数量一致, 则比较下一级个数, 直到某一级数量不一致, 则数量较大的一方选择器的优先级较高, 后面的数量就无需比较了。 如选择器1 (0, 0, 1, 0), 选择器2 ...
如何不移除<p>标签而将段落连接起来？
这是一个很经典的CSS布局问题，新人彻底理解了这个问题，HTML网页布局思想便已掌握了七七八八了。 问题 先看一段HTML代码： <!DOCTYPE html> <html> <body> <h1>这是一个标题</h1> <div class="wrapper"> <p>这是一个段落</p> <p> ...
Web前端学习笔记4——CSS
CSS基本语法规范 CSS的使用的标签：<style></style> style标签一般放在head里面，CSS一般由一个选择器和一个或多个声明组成 示例如下： 1 <head> 2 <meta charset="utf-8"> 3 <title> 4 Test 5 </title> 6 <sty ...
你是来找茬的吧？对自己的博客进行调优
“作为博客园的使用者而不是开发者，就不能对博客进行调优了？看好了，我只示范一次。” —— 我说的 0x00 大纲 0x01 前言 用过很多博客和写作平台，但是最终还是选择了博客园，毕竟，自定义 CSS 和自定义 JS 是真的香！某天突发奇想，决定对自己的博客进行下优化，现将其中的一些心得与大家分享。 ...
Web 标准 & W3C 规范
Web 标准 & W3C 规范 引用 最全面的前端笔记来啦，包含了入门到入行的笔记，还支持实时效果预览。小伙伴们不需要在花时间去写笔记，或者是去网上找笔记了。面试高频提问和你想要的笔记都帮你写好了。支持移动端和PC端阅读，深色和浅色模式。 原文链接：https://note.noxussj.top/ ...
一颗红心,三手准备,分别基于图片(img)/SCSS(样式)/SVG动画实现动态拉轰的点赞按钮特效
华丽炫酷的动画特效总能够让人心旷神怡，不能自已。艳羡之余，如果还能够探究其华丽外表下的实现逻辑，那就是百尺竿头，更上一步了。本次我们使用图片、SCSS样式以及SVG图片动画来实现“点赞”按钮的动画特效，并比较不同之处。 图片实现 最简单，也最容易理解的实现方式就是使用图片。曾几何时，几乎所有前端特效 ...
SVG 从入门到后悔，怎么不早点学起来（图解版）
本文简介 点赞 + 关注 + 收藏 = 学会了 作为一只前端，只懂 Vue、React 感觉已经和大家拉不开距离了。 可视化、机器学习等领域 JS 都有涉及到，而可视化方面已经被很多领域用到，比如大屏项目。 可视化领域相关的技术有 canvas 和 SVG ，而这两个东东是迟早要接触的了。 在我接触 ...
开局一张图，构建神奇的 CSS 效果
假设，我们有这样一张 Gif 图： 利用 CSS，我们尝试来搞一些事情。 图片的 Glitch Art 风 在这篇文章中 --CSS 故障艺术，我们介绍了利用混合模式制作一种晕眩感觉的视觉效果。有点类似于抖音的 LOGO。 像是这样： 假设，我们有这样一张图： 只需要一个标签即可 <div clas ...