css
HainesFreeman
function
展开
-
CSS中:root的运用
CSS中:root的运用原创 2023-01-03 11:21:51 · 1919 阅读 · 0 评论 -
overflow-x:auto无效!!!
overflow-x:auto无效!!!原创 2022-11-07 16:59:22 · 801 阅读 · 0 评论 -
使用canvas画一个流星动画送给她吧
canvas画一个流星动画原创 2022-09-20 14:38:04 · 199 阅读 · 0 评论 -
CSS实现手机信号条
CSS实现手机信号条原创 2022-09-19 16:27:40 · 1212 阅读 · 0 评论 -
移动端抽屉实现css篇
移动端抽屉实现css篇原创 2022-09-19 15:30:07 · 513 阅读 · 0 评论 -
css画一个卡通动画
1、效果图2、代码<!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".原创 2022-05-26 15:35:44 · 272 阅读 · 0 评论 -
CSS中伪类与伪元素,你弄懂了吗?
前言熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,即使你有用过伪类与伪元素,但里面总有一两个你没见过的吧。伪类与伪元素先说一说为什么css要引入伪元素和伪类,以下是css2.1 Selectors章节中对伪类与伪元素的描述:CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on原创 2022-02-28 09:50:10 · 251 阅读 · 0 评论 -
程序员表白
序言:每当过节的时候,女朋友就抱怨我总是忘记给她买花,说程序不懂浪漫,这不我准备了几款爱心动画特效,打算当面向她表达一下。第一款:html5通过canvas实现浪漫告白爱心动画特效寓意:告白无须多么华丽的语言,一颗颗小的爱心汇聚成一颗真心,让你的另一半感受到浓浓的爱意。代码难度系数★★★新建index.html,复制以下代码保存在浏览器中打开即可。<!doctype html><html><head><meta cha.原创 2022-02-10 09:37:17 · 404 阅读 · 0 评论 -
让一个元素相对于父元素固定定位
问题:之前在项目中,遇到了一个场景,需要实现相对于父元素的fixed定位:在父元素内拖动滚动条时,"fixed"定位的元素不能滑动,在外层拖动滚动条时,父元素及父元素内的所有元素跟着一起滑动。但是position: fixed是相对于窗口进行的定位,不能直接实现我们需要的效果。我们想让特定子元素相对于父元素"fixed"定位,也就是说,剩余的子元素不定位。那我们可以分开来想,如果添加一个祖先元素assistor,有两个祖先元素,一个用于辅助定位,一个用于包裹不定位的内容,这个问题不就解决了吗?原创 2021-12-10 15:25:51 · 1945 阅读 · 2 评论 -
css实现阮一峰博客的进度条
原理:利用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原创 2021-11-30 11:16:16 · 146 阅读 · 0 评论 -
flex上下固定中间滚动布局
html <div class="wrap"> <div class="header">header</div> <div class="main"> <div class="box">我是滚动区域~~</div> <div class="box">我是滚动区域~~</div> <div class=".原创 2021-11-09 16:43:13 · 984 阅读 · 0 评论 -
小程序加载svg图片
1.精简svghttps://jakearchibald.github.io/svgomg2.转化为base64https://www.sojson.com/image2base64.html3.在WXSS和WXML中使用// Base64 在CSS中的使用.box{ background-image: url("刚刚转的Base64");}// Base64 在HTML中的使用<img src="data:image/jpg;base64,/9j/4..原创 2021-07-18 16:00:04 · 534 阅读 · 0 评论 -
css水波纹效果
html: <div id="ball"></div>css: body { margin: auto; min-height: 100vh; background-image: linear-gradient(rgb(90,90,200),rgb(3,3,110)); } #ball { position: absolute; width: 200px; height: 200px; border-radiu原创 2021-07-18 13:35:53 · 221 阅读 · 0 评论 -
svg背景图
<!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>Do.原创 2021-06-15 08:38:09 · 818 阅读 · 0 评论 -
详解 CSS 属性 - 伪类和伪元素的区别
之前写了一篇《详解 CSS 属性 - :before && :after》的博文,当时自己没分清楚伪元素和伪类,所以在文章内把概念混淆了,庆幸 @riophae 兄指正了我的错误,所以今天打算好好研究下两者的区别。首先,阅读w3c对两者的定义:CSS伪类用于向某些选择器添加特殊的效果。 CSS伪元素用于将特殊的效果添加到某些选择器。可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他css无法描述的东西。伪类种类...原创 2021-05-12 15:47:05 · 156 阅读 · 0 评论 -
让一个子元素相对于父元素固定定位
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .assistor { .原创 2021-03-17 21:41:36 · 383 阅读 · 0 评论 -
css /deep/
引用了第三方组件库,只需要在当前页面修改第三方组件库的样式以做到不污染全局样式。通过在样式标签上使用scoped达到样式只制作用到本页面。但有时又需要调整组件的样式,在含有scoped的style里里面在写样式对子组件是不生效的。以前都是再加一个不含scoped的style标签,通过外层组件添加唯一class来区分组件,修改各种第三方组件的样式。无意中发现了/deep/,可以同样达到上面的效果<-- less语法 -->.wrap{ .class1{ .原创 2021-01-13 15:26:59 · 781 阅读 · 0 评论 -
CSS文本超过两行用省略号代替(兼容所有浏览器)
通过float特性实现多行文字截断效果,基本原理:有个三个盒子 div,粉色盒子左浮动,浅蓝色盒子和黄色盒子右浮动:1、当浅蓝色盒子的高度低于粉色盒子,黄色盒子仍会处于浅蓝色盒子右下方。2、如果浅蓝色盒子文本过多,高度超过了粉色盒子,则黄色盒子不会停留在右下方,而是掉到了粉色盒子下。好了,这样两种状态的两种展示形式已经区分开了,那么我们可以将黄色盒子进行相对定位,将内容溢出的黄色盒子移动到文本内容右下角,而未溢出的则会被移到外太空去了,只要我们使用 overflow:hidden就可以隐藏掉。原创 2021-01-04 18:06:04 · 1903 阅读 · 0 评论 -
CSS选择器之兄弟选择器(~和+)
今天在改以以前人家写的网页的样式的时候,碰到这个选择器,‘~’,当时我是懵逼的,傻傻分不清 ‘+’ 跟 ‘~’的区别,虽然我知道他们都是兄弟选择器。 后来网上查了下,也许是我查找的方式不对,没有找到我想要的答案,于是私下拿这两个选择器来测试了一下。发现原来是这样的。 先来代码说话: (1)、‘~’选择器 1 2 3 4 5 6 7 8 9 10 11 12 13 14原创 2020-06-29 17:32:25 · 14343 阅读 · 0 评论 -
CSS与GPU硬件加速(二三四五面试题)
问题:日常工作中,哪些css3的可以触发gpu加速渲染?解答: transform opacity filter 硬件加速的工作原理:浏览器接收到页面文档后,会将文档中的标记语言解析为DOM树。DOM树和CSS结合后形成浏览器构建页面的渲染树。渲染树中包含了大量的渲染元素,每一个渲染元素会被分到一个图层中,每个图层又会被加载到GPU形成渲染纹理,而图层在GPU中transform是不会触发 repaint 的,这一点非常类似3D绘图功能,最终这些使用transf...原创 2020-06-24 10:36:49 · 1138 阅读 · 0 评论 -
未知宽高的div盒子,水平和竖直方向都居中
方法一:定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>未知宽高元素水平垂直居中</title></head><style>.parent3{ position: relative; height:300px; width: 300px; background原创 2020-06-19 10:37:14 · 204 阅读 · 0 评论 -
修改select默认样式,移动端和pc端通用
<div class="select" style="margin-top:0;outline:none;border:1px solid #BBBBBB;border-radius:4px;position:relative;"> <select id="orderTimeDataSel" class="text" style="height:40px;-webkit-appearance:none;appearance:none;border:none;font-size:1...原创 2020-06-08 17:41:04 · 714 阅读 · 0 评论 -
纯CSS实现border的0.5px设置
<div class="custom-border border-color">边框宽度1px</div><div class="scale-border "> <div class="content">边框宽度0.5px</div> <div class="border border-color">...原创 2020-04-28 20:18:40 · 5326 阅读 · 0 评论 -
toast提示样式
.toast-error { position: fixed; z-index: 10000; top: 50%; left: 50%; width: px2rem(750); transform: translateX(-50%); padding: 0 px2rem(30); height: px2rem(149); l...原创 2020-03-31 20:42:20 · 687 阅读 · 0 评论 -
css画梯形解析
1.先要知道border属性是怎么绘制的,你就会豁然开朗,找到灵感。html:<div class="mask"></div>css:.mask { width:100px; height:100px; border-top: 10px solid red; border-left: 10px solid ...原创 2020-02-24 16:52:55 · 1062 阅读 · 0 评论 -
浅谈@font-face
制作网站难免有些字体不是默认的,通过@font-face可以加载自己特定的字体,来实现特定的文字效果。@font-face语句是css中的一个功能模块,用于实现网页字体多样性(设计者可随意指定字体,不需要考虑浏览者电脑上是否安装)。主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,@font-face 不能说...原创 2020-02-24 13:39:25 · 474 阅读 · 0 评论 -
li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
有时,在写页面的时候,会需要将<li>这个块状元素横排显示,此时就需要将display属性设置为inline-block,此时问题出现了,在两个<li>元素之间会出现大约8px左右的空白间隙,下面举例说明:<html><head><title>demo</title><style type="text/cs...原创 2019-12-06 11:40:13 · 452 阅读 · 0 评论 -
!import的样式优先级高于一切,包含内联样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .demo { color: red!important; }</st...原创 2019-11-25 10:51:23 · 1257 阅读 · 0 评论