不断燃烧的蜡烛
这篇文章主要介绍了纯 CSS 实现蜡烛燃烧效果的过程。包括 HTML 中用不同类描述蜡烛各部分，CSS 中设置蜡烛、蜡烛芯、火焰、发光等元素的样式及相应动画，如火焰的扭动和大小变化、发光的闪烁效果等，最后提及可在现有基础上创新和在码上掘金查看完整代码。 关联问题: 如何改蜡烛颜色 能否增加火焰效果 怎样优化发光效果 前言 这次带大家来实现一个生动的蜡烛燃烧的效果，纯 实现，通过动画来展现出一个燃烧的蜡烛，话不多说，我们直接进入主题 效果...
优秀框架都在使用的CSS规范: BEM、OOCSS、SMACSS
本文介绍了 BEM、OOCSS、SMACSS 这三种 CSS 规范。BEM 是广泛使用的命名规范，将界面拆分为块、元素和修饰符。OOCSS 以面向对象方式开发，将 CSS 分为结构和皮肤。SMACSS 则要求将 CSS 拆分为基础、布局、模块、状态、主题五部分。文章还对比了它们与现代化原子化 CSS 的优缺点，指出前三者适合长期维护的大型项目，原子化 CSS 适用于小型项目。 关联问题: BEM有哪些实际案例 OOCSS如何提高复用性...
手把手教你实现一个中间开屏前言
效果预览 效果如下所示。 HTML部分 首先看到 部分，相关代码如下。 这里包含了一个导航条和两个弹出窗口。 是主导航条的部分。包含了两个链接，分别链接到页面中的不同部分。 和 这两个链接标签（ ）作为导航链接，包含了类名 ，当这些链接被点击时会弹出相关的窗口。 和 这两个部分分别代表了两个弹出的窗口内容。每一个窗口内容块中包含了一个返回的链接（ ）和相应类别的动物表情。 综上所述，这里构建了一个包含导航条和两个弹出窗口的结构，点击不同...
「绝无仅有」CSS打造吸睛的文本与图片无限滚动动画CSS创建文本和图片无限滚动动画效
本文将详细介绍如何使用 和 创建 文本与图片的无限滚动动画 效果。网页内容包含两个部分，一个是 标签组 滚动，另一个是 图片组 滚动，其中动画的效果主要表现为标签和图片一直横向的水平滚动，并且元素会无缝衔接从而实现无限循环，并且首尾两端有渐变蒙层效果，以造成出现和消失的过渡🎢。 HTML 结构 首先， 代码部分包含了5个 元素，这个数量取决于你网页有几个无限滚动区域。每个scroll元素都放了两个 (d1和d2)用于创建滚动容器，其中...
CSS实现胶囊、半圆、90°扇形、4等份圆、吃豆人、对话框、爱心
四个盒子组合实现 一个盒子实现 伪元素实现 三盒子实现
古卷轴展开动画
本文主要介绍了古卷轴展开动画的实现，包括 jquery 版本和 react 版本，还实现了从中间展开的动画效果和从右向左展开的动画效果。 当然，还可以结合 效果，实现古诗词淡入动画和古画卷展开动画的组合效果。 jquery 版本 在网上找了一个 jquery 版本的实现，具体 demo 可以查看下列网址： 动画实现代码如下所示，直接从 demo 中复制过来，直接使用即可。 react 版本 上述是用 jquery 实现的版本，但是一般现...
css-各种各样三角形CSS
边框是实现三角形的部分，边框实际上并不是一个直线，如果我们将四条边设置不同的颜色，将边框逐渐放大，可以得到每条边框都是一个梯形 当分别取消边框的时候，发现下面几种情况： 取消一条边的时候，与这条边相邻的两条边的接触部分会变成直的 当仅有邻边时， 两个边会变成对分的三角 当保留边没有其他接触时，极限情况所有东西都会消失 通过上图的变化规则，利用旋转、隐藏，以及设置内容宽高等属性，就能够实现其他类型的三角形
css怎么绘制一个三角形
说在前面 🎈在CSS中画三角形通常利用border属性来实现，通过设置三个边的宽度为0，并为一个边提供颜色，结合transform属性进行旋转，可以创建一个三角形。以下是几种常见的CSS三角形的实现方法： 方法1：使用border 上面代码中，.triangle类创建了一个红色的三角形，其中border width定义了三角形的三个宽度，最后一个宽度定义了三角形的底边，其他三个宽度设置为0，以形成三角形的尖角。border color...
优雅实现任意形状的水球图
前言 翌日 我吃着早餐，划着水。 不一会，领导走了过来。 领导：小伙子，你去XX项目实现一个设备能源图，要求能根据剩余能量显示水波高低。 我： 啊？我？这个项目我没看过代码。 领导：任务有点急，你自己安排时间吧，好好搞，给你争取机会。 我：好吧。（谁叫咱只是一个卑微的打工人，只能干咯😎👌😭。） 分析 看到图，类似要实现这样一个立方体形状的东西，然后需要根据剩余电量显示波浪高低。 我心想，这不简单吗，这不就是一个水球图，恰好之前看过...