![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Css
Css
草字
点点关注点点赞,私信问答先回复。
展开
-
css 实现排行榜样式2,1,3顺序,不影响dom的循环渲染顺序1,2,3。
使用grid网格布局。原创 2023-02-10 13:56:53 · 469 阅读 · 0 评论 -
css 实现带边框三角的气泡框(带三角箭头)
底部一个带边框的矩形,顶部一个只带两条边的边框矩形,并旋转45度。原创 2023-02-02 15:29:00 · 1226 阅读 · 0 评论 -
css 排行榜动画,排序动画,横向,竖向,网格
【代码】css 排行榜动画,排序动画,横向,竖向,网格。原创 2023-01-03 11:35:11 · 1020 阅读 · 0 评论 -
js 卡片交换动画,网格卡片交换动画,排序算法动画,三消游戏交换动画
【代码】js 卡片交换动画,网格卡片交换动画,排序算法动画,三消游戏交换动画。原创 2022-12-02 15:21:02 · 735 阅读 · 0 评论 -
css 实现上升的气球效果
【代码】css 实现上升的气球效果。原创 2022-12-02 10:38:15 · 681 阅读 · 0 评论 -
css 解决ios设备固定背景图的显示问题。background-attachment: fixed在iphone设备上失效;
设置背景图固定,滚动内容时背景图不滚动。在android上是没有问题的,但是ios上就是会被内容挤出去,滚动的时候背景图变形。通过background-attachment: fixed;和定位的方法实现或还是会出现图片变形,或者盒子被撑大。最终采用动态添加::before伪元素样式实现图片的固定布局。背景图如果直接写死是没有问题的,动态绑定添加的就有问题。原创 2022-12-01 20:45:41 · 2480 阅读 · 0 评论 -
js 关于如何动态设置css的hover样式最佳方式,设置hover样式
网上很多方式都是采用js监听dom的鼠标移入(onmouseover)移出(onmouseout)事件,进行控制这个dom的hover样式。消耗性能先不说,代码也很庞大,再加上如果是自定义主题(修改后能立马看到效果的,不是需要刷新)的功能可能就更麻烦了,要给所有的dom都绑定这样的事件。原创 2022-11-16 17:31:18 · 5558 阅读 · 4 评论 -
js 根据深浅色背景,动态设置黑色白色文字颜色。判断颜色是否为深色,rgb转16进制,16进制转rgb
根据深浅色背景,返回黑白文字颜色。原创 2022-10-13 10:48:14 · 1897 阅读 · 0 评论 -
css 任意背景色前景色依旧看得见。图层混合模式:差值、排除模式;mix-blend-mode: difference;
【代码】css 任意背景色前景色依旧看得见。图层混合模式:差值模式;原创 2022-10-12 21:14:36 · 182 阅读 · 0 评论 -
vue Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime
执行命令:原创 2022-10-12 10:29:41 · 257 阅读 · 0 评论 -
html iphone手机显示数字或手机号为白色超链接(兼容性问题),手机号颜色变成白色,iPhone 13 pro max
其他方法:将数字用input框进行包裹,就不会被iphone手机转换了。或者在数字里面添加其他符号。iphone手机对纯数字内容做了二次处理,将他替换成了点击跳转到拨打电话界面的超链接。禁止iphone手机自动做相关处理。在html中的head头部添加如下。原创 2022-09-24 14:23:55 · 475 阅读 · 0 评论 -
css writing-mode设置文字的排列方式,展示方式:从上到下排列
设置文字的排列方式,不知道有这个属性的,还以为通过设置文字容器的宽度为一个字符1em,文字超出就会自动排列,但是如果遇到文字反向顺序展示那就没有办法了。css对文字的排列方式也是提供了对应的样式的,差不多能在word里面找到的功能,css都能找到。css文字排列方式:所有属性:...原创 2022-07-01 15:18:56 · 4217 阅读 · 0 评论 -
css 动效彩旗飘扬
效果图:代码:<!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> .flo原创 2022-05-20 13:50:47 · 950 阅读 · 0 评论 -
css 修改table边框的样式,修改单元格样式、间距
我们在调table的边框样式时,经常会出现单元格和表格的样式重叠,而造成某条边框的的异常粗,或者异常细。修改单元格间距:cellspacing="0"修改table标签的样式:<tableborder="1"style="width:100%;text-align:center;border:1pxsolid#ccc;"cellspacing="0"><tr><td...原创 2022-05-11 16:38:23 · 2195 阅读 · 0 评论 -
css 弹性盒子和grid网格布局实现九宫格布局,每个格子的宽高一致(跟随页面宽度平分)。
效果图:高度设置为0,使用内间距100%,就可以将容器宽高的大小设置为一致。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl原创 2022-04-07 11:46:02 · 2888 阅读 · 0 评论 -
js 根据文章内容生成目录,锚点链接跳转,根据标题生成目录
效果图:我们都知道锚点链接的跳转是通过<a href="#t0">标题</a>和<a name="t0"></a>实现的,点击a标签后,会跳转到与当前href值(除#号)与之相同的a标签name值的位置。一般的文章都是都过h1-h5标题和p标签的富文本来实现,有些为了美观,比如csdn,只有总共1-3级标题,所以我们可以通过遍历文章内容的标题标签,进行生成对应的目录。代码:<!DOCTYPE html><html.原创 2022-03-11 14:50:58 · 1597 阅读 · 0 评论 -
css 水波纹效果,地图重点提示效果
效果图:代码:<!DOCTYPE html><!-- saved from url=(0047)https://www.jq22.com/demo/cssMapdh202007031132/ --><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" c.原创 2022-03-04 16:16:14 · 401 阅读 · 0 评论 -
css 实现马赛克背景,ps透明背景,未选颜色的展示方式
效果图: 方式二:效果图:代码:原创 2022-03-01 16:06:26 · 752 阅读 · 0 评论 -
css svg实现彩虹过渡效果,圆形进度条效果
效果图:以下是练习的所有代码,代码:<!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>原创 2022-02-23 17:09:02 · 459 阅读 · 0 评论 -
css mix-blend-mode图层混合模式(跟ps的功能图层混合模式类似)
mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。很多时候,我们使用的网站主题背景和图片的主色反差太大的时候,可以使用图层混合模式进行调整,当然又是也拿来裁剪黑白图片。语法:mix-blend-mode:normal; //默认值属性:Photoshop图层 CSS混合模式 中文名称 功能描述 normal normal 正常模式 混合色的像素会透过所用的颜色显示出来 mu...原创 2022-02-15 14:35:07 · 492 阅读 · 0 评论 -
vue 使用animate.css动画库
vue和最新版的animate动画库不兼容,所以不能安装最新版的animate动画库。一、引入:在public文件夹中的index.html加入以下代码:<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">二、使用:在需要设置的地方添加类样式,默认类样式“animated”必须添加:三、示例:<input type="button" valu原创 2020-08-03 14:37:57 · 494 阅读 · 0 评论 -
css transition学习以及应用技巧
在css中,一共有两种方式实现css动画效果,一种transitio过渡,一种animation帧动画。transitio过渡的效果相对简单,往往都是一些大小、颜色和形状(圆角)的改变,以及元素的位置,显隐等等。animation帧动画能实现的效果就更多了,除了transitio能实现的,还有比如:不同帧显示不同的图片,由我们自己来控制每一帧是一个什么样的效果...等等。不过呢,在我们日常开发中,应用animation的场景并不是特别多,再加上使用animation相比较transitio要复杂原创 2022-02-10 15:44:59 · 579 阅读 · 0 评论 -
css img标签如何拥有background的相关属性,object-fit,object-position
场景:很多时候用户上传的图片跟我们显示的时候是不一致的,我们显示图片时是200*200(宽高比一致)。但用户的图片却是长宽比不一致的,有的时候长了,有的时候宽了。解决方案:这个时候background标签的优势就提现出来了,可以使用background-position:center将图片的显示位置居于正中心,也可以使用background-size:contain将图片完整的显示出来等等。但回过头来看img标签,他就没有这个功能了,他只能设置图片的宽高。如果图片真实宽高跟显示的宽高不一致,原创 2022-02-08 10:50:15 · 664 阅读 · 0 评论 -
js 展开折叠动画原理,jquery的toggle切换效果
效果图:想法:jquery的展开折叠动画效果很好看,想自己实现一个,结果发现仅仅只靠css添加类和动画是不行,最开始的思路是折叠时候设置高度为0,展开时设置高度设置为auto,让他自己撑开,可是transition并不过渡高度height为auto的动画,所以也就没有生效。实现方法:transition过渡高度height的时候,必须设置固定px,100%也不会生效,所以我们必须知道这块内容完全撑开的时候所占据的高度是多少。最后发现,在原生dom节点上,scrollHeight属性就原创 2022-01-27 15:51:10 · 2094 阅读 · 0 评论 -
css 实现旋转的花朵
效果图:代码:<!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> bod.原创 2022-01-25 15:15:03 · 314 阅读 · 0 评论 -
css 水平翻转和垂直翻转
代码:/*翻转*/.flip_horizontally { transform: rotateY(180deg); /* 水平镜像翻转 */}.flip_vertically { transform: rotateX(180deg); /* 垂直镜像翻转 */}原创 2022-01-25 14:48:40 · 2649 阅读 · 0 评论 -
css布局 屏幕大时左边菜单和右边内容居中显示,屏幕小时左右两边占满,左边菜单自动粘性吸顶
效果图:代码:<!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> *.原创 2022-01-06 16:03:16 · 324 阅读 · 0 评论 -
css 取消a标签的所有默认样式
代码:/*去除a标签下划线*/a { text-decoration: none;}/*去除未被访问的a标签的下划线*/a:link { text-decoration: none;}/*去除已经被访问过的a标签的下划线*/a:visited { text-decoration: none;}/*去除鼠标悬停时的a标签的下划线*/a:hover { text-decoration: none;}/*去除正在点击的a标签的下划线(鼠标按下,尚未松开)*/a:active原创 2022-01-20 11:23:57 · 8163 阅读 · 0 评论 -
css 响应式布局(媒体查询),兼容pc,ipad,移动端的布局单位
代码:.box{ width:80%;}//ipad和手机端,默认pc。@media screen and (max-width: 62rem){ //62rem对应992px,约等于1000px宽度 .newBgTitle{ width:90%; }}@media screen and (max-width: 48rem){ //48rem对应768px,约等于780px宽度 .newBgTitle{ width:原创 2022-01-10 11:26:47 · 2157 阅读 · 0 评论 -
css 使用本地字体
1.定义字体。@font-face{ font-family: Rajdhani; src: url("./Rajdhani-Bold-4.ttf");}2.使用字体。.box{ font-family: 'Rajdhani';}<div class="box">89787987</div>完整代码:<!DOCTYPE html><html lang="en"><head> &原创 2022-01-04 15:21:54 · 5356 阅读 · 1 评论 -
css 视差滚动效果实现,滚动屏幕的同时,其他图片跟随偏移
截图:以前的版本都是通过transform-style:preserve-3d的方式,并transform转换元素的z轴偏移位置,实现视差滚动效果;不过现在版本的浏览器已经不支持之前的实现方式了。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid.原创 2022-01-04 14:54:15 · 368 阅读 · 0 评论 -
css img图片与图片之间存在间隙的问题
问题:如图箭头指向,两张图片之间存在一定的间隙,如果使用背景图background实现,就没有间隙,使用img就存在这个间隙。解决方法,设置图片为块级元素。代码: img{ display: block; width:100%; height:100%; } <div> <img src="./1.jpg" /> </d原创 2022-01-04 11:42:06 · 2323 阅读 · 0 评论 -
css 粘性布局吸顶position:sticky与js监听滚动手动实现
CSS3新发布的一个属性position:sticky,当节点出现在可视窗口时,该节点的位置不受任何影响,也就是等于position:static定位;当节点滚动出屏幕后,粘性布局会自动转换为position:fixed固定定位的效果,并使相关的属性生效,如:top,left,right,bottom等等。如果不使用该属性,那么我们就只能手动监听scroll屏幕滚动,实现动态的定位布局,当然,这是一种消耗性能的解决方法,一般不推荐使用。示例demo:<!DOCTYPE html>原创 2022-01-04 10:22:26 · 1175 阅读 · 0 评论 -
css 英文所有字母转大写,小写,首字母开头大写(text-transform)
所有英文字母转大写css:text-transform:uppercase;其他属性:值 描述 none 默认。定义带有小写字母和大写字母的标准的文本。 capitalize 文本中的每个单词以大写字母开头。 uppercase 定义仅有大写字母。 lowercase 定义无大写字母,仅有小写字母。 inherit 规定应该从父元素继承 text-transform 属性的值。 ...原创 2021-12-30 16:48:07 · 558 阅读 · 2 评论 -
css 修改浏览器滚动条样式(火狐Firefox,谷歌google)
浏览器使用的内核说明:浏览器 内核 备注 IE Trident IE、猎豹安全、360极速浏览器、百度浏览器 firefox Gecko 可惜这几年已经没落了,打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。 Safari webkit 从Safari推出之时起,它的渲染引擎就是Webkit,一提到 webkit,首先想到的便是 chrome,可以说,chrome 将 Webkit内核 深入人心,殊不知,Webkit 的原创 2021-12-24 10:32:30 · 15717 阅读 · 0 评论 -
css dom去色,给图片去色的样式,整个网页变黑,变灰
dom去色,给图片去色的样式。代码:filter: grayscale(100%);原创 2021-12-17 17:58:09 · 466 阅读 · 0 评论 -
css background和animation精灵图实现帧动画,如何控制暂停和播放
效果图:示例代码:<!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> .fis原创 2021-12-15 18:03:32 · 742 阅读 · 0 评论 -
css 设置flex布局后,子元素的宽高不生效问题(flex-shrink: 0;)
设置flex布局后,子元素的宽高不生效问题。如果希望子元素的宽高生效,解决方法,给子元素添加如下属性:flex-shrink: 0;原创 2021-12-14 14:18:09 · 1347 阅读 · 0 评论 -
css 滚动条出现后莫名消失(隐藏)的问题
像element-ui的表格,内容超出后会自动显示滚动条。但是有时候浏览器会显示,然后隔几秒中就隐藏了,针对这种问题,可以先关闭浏览器,然后重新打开这个网址就可以解决这个问题。但是呢,不可能强制性要求用户重新网页,所以我们只能从自己的技术上去解决这个问题。我们可以通过修改滚动条样式,这种方式滚动条不会先显示几秒钟后隐藏。代码:::-webkit-scrollbar{ width:6px;height:6px; background-color: #00000040;}::-原创 2021-12-06 16:34:45 · 3712 阅读 · 1 评论 -
css 文字渐变色的效果
代码:<span class="text">$6,232,198</span>.text{ /* background-clip: text; */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, rg原创 2021-11-09 18:12:06 · 98 阅读 · 0 评论