![](https://img-blog.csdnimg.cn/20210714193127360.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
CSS相关知识积累
fanny_匚
这个作者很懒,什么都没留下…
展开
-
javascript设置颜色值的几种方法
H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360。本文链接:https://www.ngui.cc/51cto/show-560265.html。S:Saturation(饱和度)。取值为:0.0% - 100.0%L:Lightness(亮度)。取值为:0.0% - 100.0%A:Alpha透明度。原创 2023-02-08 16:34:12 · 2398 阅读 · 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>毛玻璃 </ti原创 2021-07-16 12:10:10 · 67 阅读 · 0 评论 -
适用于电商项目的放大镜效果
代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&原创 2021-07-16 12:09:38 · 121 阅读 · 0 评论 -
元素的显示模式和定位的特性
标签的显示模式(display):<!-- 一 : 标签有三种显示模式 a:block b:inline-block c:inline二 : 三种显示模式的特点:block 1.独自占据一行 2.可以设置宽高 3.如果块级元素没有设置宽高,name就会继承与父盒子的宽inline-block 1.一行占据多个 2.可以设置宽高inline 1.一行占据多个 2.不可以设置宽高原创 2021-07-16 12:08:57 · 98 阅读 · 0 评论 -
CSS特效2 - 刮刮乐效果
虽然对于canvas不是很了解,但是写这个效果确实是很常用的,看到这个资料的时候相对于来说这个代码还是比较简单的,所以这里先保存下来效果展示代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .原创 2021-07-16 12:07:33 · 319 阅读 · 0 评论 -
CSS特效1 - 聚光灯效果
效果预览代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <t原创 2021-07-16 12:06:58 · 235 阅读 · 0 评论 -
CSS特效3 - 爱心加载动画,背景渐变
效果展示:代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <原创 2021-07-16 12:06:14 · 266 阅读 · 0 评论 -
CSS特效4 - 色彩板案例
实现效果:代码展示<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>色彩板</title> <style>原创 2021-07-16 12:05:09 · 78 阅读 · 0 评论 -
图片的预加载与懒加载
图片预加载与懒加载由名字可以知道,图片的预加载->当用户需要查看图片可以直接从本地缓存中取到(提前加载下来的),图片的懒加载->是当用户一次性访问的图片数量比较多的时候,会减少请求的次数或者延迟请求,是一种服务器前端的优化总结来说: 图片的预加载在一定程度上加强了服务器的压力, 图片的懒加载在一定程度上减轻了服务器的压力预加载就是在我们需要使用到图片资源的地方之前就先把这些图片资源加载下来,这样在我们使用的地方就会直接从本地缓存中去取实现方式1 : 可以直接在使用之前报所以资源加载原创 2021-07-16 12:04:35 · 111 阅读 · 0 评论 -
css3 animation 实现波纹动画
实现效果实现代码//html <div class="coment"> <div class="ima"> <div class="cc"></div> <div class="cc cc1"></div> <div class="cc cc2"></div&g原创 2021-07-16 12:03:54 · 158 阅读 · 0 评论 -
css使用@keyframes首次加载图片循环会出现白色间隙
问题解说:在使用css 的animations 属性时,首次加载循环会出现白色的间隙,看着有点像页面有刷新的感觉,后面每次循环就不会再有这个问题问题演示实现代码//html <div class="container"> <div class="first"> </div> </div>//less.container { width: 100vw; height: 100%;}.container .firs原创 2021-07-14 19:36:42 · 262 阅读 · 0 评论 -
css文字超出显示省略号
单行显示…white-space:nowrap;overflow:hidden;text-overflow:ellipsis;多行显示…word-break: break-all;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;原创 2021-07-14 19:36:04 · 41 阅读 · 0 评论 -
一个less文件中引入另一个less文件
假设有两个 .less的文件1.less 和2.less在1.less 中引入2.less文件@import "2.less" ;// " ; " 是一定不可以忘记的原创 2021-07-14 19:35:24 · 1092 阅读 · 1 评论 -
css绘制三角形(border属性的使用)
1 . 实现一个简单的三角形使用css 盒模型中的border (边框) 即可实现如下的三角形:实现原理:首先来看在为元素添加border时,border的样子;假设有如下代码:<div></div>div { width: 50px; height: 50px; border: 2px solid orange;}效果图:这是我们平常使用border最普遍的情况——往往只给border一个较小的宽度(通常为1-2px);然而这样的日常用原创 2021-07-14 19:34:22 · 312 阅读 · 0 评论 -
css修改浏览器默认的滚动条样式
浏览器自带的滚动条样式多少有一点呆板,为使在项目中UI美观,所以重写了滚动条样式要注意是哪个容器产生的滚动条 就把伪类的样式加到哪个容器上1.html2.css//css .content { width: calc(100vw - 250px); height: 100%; background-color: pink; overflow: auto; // 滚动条整体部分 &::-webkit-scrollbar { wid原创 2021-07-14 19:33:38 · 192 阅读 · 0 评论 -
不隐藏滚动条使滚动条不占据位置
问题描述:之前自己仿写了一个聊天机器人的小项目,页面的高度会随着聊天数量的增加而变大,进而出现滚动条,滚动条默认的宽度是17px,所以每次出现滚动条右边的内容区域就会被挤压,影响布局解决办法:1.使用margin-right:calc(100% - 100vw );100% 是浏览器的可用宽度 , 100vw是浏览器的内部宽度window.innerWidth 是包含滚动条在内的宽度,在没有滚动条的时候margin-right:0;没哟影响,在有滚动条的时候,margin-right:-17px,原创 2021-07-14 19:32:53 · 3433 阅读 · 0 评论 -
position: sticky;页面滚动实现吸顶效果
滚动页面到某一个元素的位置的时候,改元素实现吸顶效果在项目中使用如图的标题吸顶效果很常见,这里实现一个属性就可以解决的方案.只要在需要实现吸顶效果的元素的上添加position: sticky; 属性,就可以实现相应的效果...原创 2021-07-14 19:32:04 · 571 阅读 · 0 评论