
css基础
文章平均质量分 50
门前大桥下.
坚持==美好 每一次努力都是在追光
展开
-
HTML+CSS+JavaScript实现烟花绽放的效果源码
一个css案例,在浏览器的可视区域,生成随机大小的烟花图片,天机动画.实现烟花绽放的效果 复制粘贴代码 在同级别下放一张图片fire.png接可以了原创 2024-07-29 16:48:07 · 634 阅读 · 0 评论 -
css中的迷惑样式1.:root 伪类2.var() 函数3.calc() 函数的概念和使用
很多朋友对于:root var() calc()很是迷惑,不知道是什么有什么用。原创 2024-07-21 18:49:45 · 401 阅读 · 0 评论 -
一个好玩的css样式mix-blend-mode图像混合
css的好玩属性 实现黑白效果mix-blend-mode原创 2023-01-27 18:18:10 · 293 阅读 · 0 评论 -
css流水(瀑布)布局
css的常见流水布局原创 2022-08-01 19:31:41 · 519 阅读 · 0 评论 -
html中文档流概念+高度塌陷+bfc+浮动清除
理解文档流的概念浮动塌陷的案例原创 2022-04-12 16:24:14 · 346 阅读 · 0 评论 -
css浮动float:left|right
浮动浮动1.浮动是什么2.为什么要用浮动呢3.怎么做4.会怎样5.浮动产生的问题浮动1.浮动是什么是一种css的样式 div{ float:left;//right }1.可以让元素脱离文档流 取消在标准流中所占的位置2.如果是left 靠近父元素的左边排列 如果是right 靠近父元素的右边排列2.为什么要用浮动呢进行水平排列常见的元素 --行内元素 和块级元素行内元素 水平排列 共同占一行但是不具有宽高属性块级元素 垂直排列 单独占一行具有宽高属性你会发原创 2022-04-12 15:59:27 · 551 阅读 · 0 评论 -
css3D 立体感的小案例
css的3D空间原创 2022-03-02 14:05:28 · 276 阅读 · 0 评论 -
彩虹雨(源码)html css+js(22行)
1.效果图思路:首先 搭建好 一个 ‘< i >’ 的样式 还用下落的动画接着使用for循环 创建多个 并添加到body中2.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie原创 2022-03-01 08:58:45 · 749 阅读 · 0 评论 -
loading加载的动画+逻辑
效果图思维方式文字 的话父元素 顺时针转动文字 逆时针转动最终 相对感觉没怎么动css* { margin: 0; padding: 0;}body { min-height: 100vh; background-color: #333; overflow: hidden;}.loading { position: relative; width: 200px; height: 200px; margin:原创 2022-02-28 13:13:16 · 194 阅读 · 0 评论 -
html+css好玩的案例(源码-纯手写)
小块爬坡的的loading页面效果图css*{ margin: 0; padding: 0;}body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #333;}.cbody{ display: flex; width: 100%; height: 100%;原创 2022-02-21 12:56:25 · 2543 阅读 · 2 评论 -
vscode中使用less的方式和配置 3步即可完成
vscode中使用less的方式和配置 3步即可完成第一步在 vscode下载 Esay LESS第二步点击 文件 —> 首选项 ----> 设置 ---->输入less.compile—>点击 setting.json第三步将一下文字复制到 对应的less.compile位置下"less.compile": { //建议 把compress设为 false 便于阅览 "compress": false, // 是否删除多余原创 2021-06-01 21:57:36 · 867 阅读 · 3 评论