HTML CSS
关注
分享
扫一扫
文章平均质量分 63
nicepainkiller
念念不忘 必有回响
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
邀新链接url被微信屏蔽2
邀新链接url被微信屏蔽原创 2025-02-26 19:24:09 · 631 阅读 · 0 评论 -
邀新链接url被微信屏蔽
在 App 邀新的过程中。经常需要把 二维码 或者 url 链接分享到 微信中。但是呢微信 很容易就会屏蔽你的 url原创 2025-02-25 17:09:24 · 925 阅读 · 0 评论 -
微信公众号 H5页面 卡片 分享朋友圈和好友
微信公众号 H5页面 卡片 分享朋友圈和好友原创 2023-07-25 16:29:05 · 4831 阅读 · 2 评论 -
canvas 画一条波浪线 进度条
波浪线 进度条原创 2022-07-11 14:24:39 · 1713 阅读 · 0 评论 -
雷达图canvas
手写雷达图原创 2022-06-20 15:03:27 · 748 阅读 · 0 评论 -
圆环进度条 两种实现方式
圆环进度条 两种实现方式原创 2022-06-17 14:53:52 · 14742 阅读 · 3 评论 -
overflow 监听是否滑动到底部
overflow 监听是否滑动到底部原创 2022-05-18 14:12:45 · 1861 阅读 · 1 评论 -
vue 自定义 文字背景
功能背景：有一个标题； 内容变化估计有20+种一般做法：切图也是团队中一部分的主张，切个几十个图也是可以的，但是呢 作为一名老司机，我想试试其他有 挑战的方式：并且以及上车：随着内容的 变化 长度变化；最麻烦的就是 凭借图形的过程！实际上这个背景图是被 分割了好几个块的，有点类似 小时候玩过的 七巧板( 看来小时候 七巧板 没白玩哈哈哈)；代码如下： 代码并未整理 大家撮合着看，看看思路就行<template> <view ...原创 2022-04-26 15:33:07 · 2554 阅读 · 0 评论 -
input 验证码 密码 输入框
前言：uniapp 在做需求的时候，经常会遇到；验证码输入框 或者 密码输框 自定义样式输入框 或者 格式化显示 银行卡 手机号码等等：这里总结了两种 常用的实现方式；从这两种实现方式 其实也能延伸出其他的显示 方式；先看样式： 自己实现 光标闪烁动画第一种：可以识别 获得焦点 失去焦点第一种实现的思路： 实际上就是，下层的真实 input 负责响应系统的输入，上面一层负责显示 应为输入框在手机端会 出现长按 学着 复制等等 输入框自带属...原创 2022-04-24 16:43:23 · 4488 阅读 · 0 评论 -
css 模仿水的感觉
之前做个一个需求，水柱慢慢变满；体现进度条实现原理其实挺简单的：两个旋转的 带弧度的环球圆球的东西东西 遮掉 纯色的背景；并且慢慢向上移动index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...原创 2021-12-31 09:21:25 · 591 阅读 · 0 评论 -
js 动态添加 dom 节点添加动画
项目背景：uniapp h5应用，为了提示用户下载，这里有个 提示下载的dom, 本想来想在 每个 tabbar 中添加（一共添加四个）；但是想 尝试换种玩法 如下： 效果如下：直接上代码：function showDownloadTisp() { console.log('--------------------------->showDownloadTisp') // #ifdef H5 const parent = document.querySelector(.原创 2021-08-17 17:10:04 · 3179 阅读 · 0 评论 -
CSS 简单图形 实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...原创 2021-07-05 16:01:04 · 309 阅读 · 0 评论 -
第七章 用户行为伪类
CSS伪类是 CSS选择器中最有趣的部分，本章会有你 不知道的高级技巧 和 应用知识用户行为类是指：与用户行为相关的一些 伪类， 例如 经过 :hover, 按下 :active 以及聚焦 ：focus 等◑ 手型经过伪类 :hover:hover 是各大浏览器最早支持的 伪类之一，最早只能用在 <a> 元素上。 目前可以用在 所有 HTML 元素上，包括自定义元素:hover 不建议用于 移动端， 虽然也能触发 但是消失不敏捷 体验反而奇怪 :hover 在...原创 2021-05-13 15:08:50 · 372 阅读 · 0 评论 -
第六章 属性选择器
我们平常提到的 属性选择器 是指 [type = "radio"] 这类选择器，实际上 这是一种简称。指的是 “属性值匹配选择器”； 在正式文档中:类选择器 和 ID 选择器都属于 属性选择器。 应为本质上 类选择器 是 匹配 HTML 中 class 的属性值， ID 选择器 是 匹配 HTML 中的 Id 属性值。ID选择器 和 类选择器ID选择器 和 类选择器 都属于 属性选择器， 他们的身份看起来 高贵而 特殊， 毕竟 HTML 原生属性那么多， 就 id 和 class 两..原创 2021-05-13 15:08:23 · 5273 阅读 · 1 评论 -
第五章 元素选择器
元素 选择器 主要包括 两类：标签 选择器 通配符 选择器元素 选择器的 级联语法不同类型的 CSS 选择器的级联使用 是非常常见的svg.icon { vertical-align: -.25em; }可能大家 不知道的是： 元素选择器的 级联语法 和其他 选择器的级联 语法 有两个明显不同之处：元素选择器 是唯一 不能重复自己的 选择器 .foo.foo { }#foo#foo { }[foo][foo] {}但是元素选择器 无法重复自己foo*fo...原创 2021-05-13 15:07:51 · 1167 阅读 · 0 评论 -
第四章 精通CSS选择符
CSS 选择符目前有以下几种： 后代 选择符 ( ) 子 选择符 (>) 相邻兄弟 选择符 (+) 随后兄弟 选择符 (~) 列 选择符 (||) 1> 后代选择符 空格 （ ） 请问 文字是 什么样色？：<div class = "lightblue"> <div class = "d...原创 2021-05-13 15:07:31 · 333 阅读 · 0 评论 -
第三章 CSS 选择器的命名
CSS 选择器 是否 区分大小写CSS 选择器有 那些区分大小写 那些不区分大小写 还有 那些可以设置为不区分；要搞清楚这个问题， 还要从 HTML 说起：在HTML 中： 标签 和 属性 是不区分大小写的， 而属性值是区分 大小写的，于是 对应的： 在CSS 中 标签选择器不区分大小写 属性选择器中的属性也不区分大小写， 而类选择器 和ID 选择器 本质上是 属性值 需要区分大小写不要使用 ID 选择器：没有 任何理由 推荐在实际项目中使用 ID 选择器...原创 2021-05-13 15:07:14 · 1680 阅读 · 0 评论 -
第二章 CSS 选择器的优先级
几乎所有的 CSS 样式冲突， 样式覆盖等问题 都与 CSS声明的 优先级错位 有关系：CSS 优先级的规则预览：大概分为 6 个等级：（1）： 0 级： 通配选择器， 选择符 和 逻辑组合伪类。 其中 通配符选择器 （*）， 表示如下* {color :red;} 选择符是指 ： +, >, ~, 空格 和 || 逻辑组合伪类有： :not(), :is() 和 :where()...原创 2021-05-13 15:06:54 · 332 阅读 · 0 评论 -
第一章 概述
CSS 选择器 可以分为 4 类：即选择器 选择符 伪类 和 伪元素 1 . 选择器类型选择器 -> 标签选择器body{ font : menu }image{ height:40px }属性选择器 -> 类选择器.container{ background-color: olive } 2 . 选择符 目前所知的 CSS 选择器中的选择符 有5个:1> 即表示 后代关系的 空格 ( ),2> 表...原创 2021-05-13 15:06:13 · 135 阅读 · 0 评论 -
134个银行ICO 缩写 以及对应 Json 文件 附带工程
134个银行ICO 缩写 以及对应 Json 文件 附带工程前段时间 APP 需要接一个 银行卡的 业务。要求输入银行卡 卡号 显示 银行名称 以及 银行ICO这就需要 有一套对应的素材了，百度了好久 要么又图片， 要么是有配置 没有能结合起来的；后来动手写了代码，给他们匹配上了；生成好的资源地址：...原创 2020-09-24 10:36:22 · 1296 阅读 · 0 评论 -
CSS 动画总结
CSS 动画总结 ------------过度动画------------变换函数● translate() 平移函数，基于 x, y 坐标重...原创 2020-04-03 17:16:29 · 752 阅读 · 0 评论