css
只会cv的小前端
有问题大家都可以探讨
展开
-
css中的 :root
var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。(这样做通常会产生无效的语法或者一个没有关联到变量的值。在:root中声明相当于全局属性,只要当前页面引用了:root segment所在文件,都可以使用var()来引用。用 – 这样写法加上样式名称 例如:–background 引用:var(–background)是一个伪类,表示文档根元素,所有主流浏览器均支持 :root 选择器,除了 IE8 及更早的版本。原创 2022-10-09 15:36:04 · 7936 阅读 · 0 评论 -
一组舒服好看的css加载动画(复制就能用)
搬运几种好用的css加载动画,没有gif动画,大家手动cv一下看看,记得点赞收藏,文章最后附上例子地址第一种:方块翻滚<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> --> <meta name="viewp原创 2022-03-23 14:52:08 · 1845 阅读 · 1 评论 -
ps切图,前端切图仔必学,差点我都忘了,害
在记不住别学了第一步:找到矩形选框工具 选取你要切的大小第二步:选取好了,按下 ctrl + shift + C 复制 然后按下 ctrl + N 创建新的模板 选中剪贴板(这是你刚刚复制的图片大小)第三步:ctrl + V 粘贴图片第四步:ctrl + shift + alt + s 保存 导出就行...原创 2021-11-17 11:30:23 · 138 阅读 · 0 评论 -
炫酷的css例子网站,赶紧收藏起来
网址一:https://shiroi.netlify.app/网址二:https://juejin.cn/post/6844904031513477128原创 2021-11-09 15:15:05 · 693 阅读 · 0 评论 -
用css的mask-image属性搞个好玩的
html: <div> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/851550/sponge.jpg" alt="" /> </div>css: img { display: inline-block; mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/851550/spongebob.gif); ma原创 2021-11-05 15:13:54 · 174 阅读 · 0 评论 -
一个超酷的3d旋转盒子的demo
源码:https://github.com/fly0o0/css3d-demo/tree/main/h5-pano演示地址:https://yun.dui88.com/tuia/junhehe/index.html原创 2021-11-05 11:27:53 · 164 阅读 · 0 评论 -
几个可视化 CSS 工具, 快速生成 CSS 片段
1. Neumorphismhttps://neumorphism.io/#e0e0e02. Fancy Border Shape Generatorhttps://9elements.github.io/fancy-border-radius/#58.100.0.45–.它通过操作 border-radius 生成很 awesome 形状,我们可以在项目中尽情的使用的,通过微调来达到我们想要的形状。3.CSS Waves Generatorhttps://getwaves.io/下面这三原创 2021-11-05 09:45:12 · 209 阅读 · 0 评论 -
超出省略号、css三角形、画虚线边框、placeholder样式、滚动条、优惠券
【代码】超出省略号、css三角形、画虚线边框、placeholder样式、滚动条、优惠券。原创 2021-11-03 10:44:47 · 293 阅读 · 0 评论 -
canvas实现粒子跟随鼠标
<!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>Document&l原创 2021-10-29 14:11:50 · 341 阅读 · 0 评论 -
CSS巧妙实现分隔线的几种方法
实际效果1.单个标签实现分隔线HTML部分代码如下所示<div class="line_01">小小分隔线 单标签实现</div>CSS部分代码如下.line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px solid #ddd; border-right: 200px solid #ddd; text-alig原创 2021-08-02 15:15:17 · 4489 阅读 · 0 评论 -
/deep/ 深度选择器 在scoped下 改变ui组件样式(新)
>>>和/deep/ 已经被弃用。使用方法:depp()。在scss中这样.box { &:deep(.el) { }}直接用css.box ::v-deep .el { }以前scss.box { /deep/.el{ }}原创 2021-07-09 16:46:50 · 277 阅读 · 0 评论 -
文本超出省略号(单行、多行)
单行#div1{ width: 100px; overflow: hidden; /*内容会被修剪,并且其余内容是不可见的*/ text-overflow:ellipsis; /*显示省略符号来代表被修剪的文本。*/ white-space: nowrap; /*文本不换行*/}多行#div2 { width: 100px; display: -webkit-box; /*必须结合的属性,将对象作为弹性伸缩盒原创 2021-07-06 11:02:43 · 108 阅读 · 0 评论 -
伪类元素:after画一条线
.wraper:after { content: ""; position: absolute; bottom: 0; left: 30px; width: 620px; height: 1px; background: #fff; z-index: 1;}原创 2021-06-29 08:31:55 · 1544 阅读 · 0 评论