![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 51
土匪丁的窝子
耍不好双截棍的摄影师不是好的程序猿٩( ö̆ ) و
展开
-
css实现毛玻璃效果
首先我们要知道实现毛玻璃效果的关键点:filter滤镜html代码<div class="main"></div>先写一个居中的div,并给body加上背景图,以及居中的div设置背景颜色和透明度body,html { background: url("./img/lamb.jpg"); background-position: bottom; background-size: cover; background-attachme原创 2021-03-04 23:58:03 · 2861 阅读 · 1 评论 -
svg实现环形loading加载
<circle> 标签可用来创建一个圆<svg> <circle cx="100" cy="100" r="40" stroke="#ffa940" stroke-width="8" fill="none" /></svg>首先实现一个圆环效果,cx,cy表示圆心坐标,r表示圆半径,stroke表示边框可以理解为border,stroke-width表示边框宽度,fill填充颜色。...原创 2021-03-03 23:36:59 · 820 阅读 · 1 评论 -
flex的三个属性
flex:flex-grow flex-shrink flex-basisflex-grow:定义放大比例,默认为0,规定项目相对于其他灵活的项目进行扩展的量 flex-shrink:定义了项目的缩小比例,仅在宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值,默认为1 flex-basis:给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小说起来听拗口也不怎么好理解,直接上代码吧!示例1:子元素都设置为f.原创 2021-02-28 02:48:55 · 5057 阅读 · 1 评论 -
v-html关于css和scss样式问题
这两天在做一个考试系统项目中在填空题方面遇到关于v-html中写class无法生效的问题百度之后发现了一个神奇的存在:样式穿透(嘿嘿 其实我也不知道这个叫法对不对,之前有遇到过js事件穿透 嗯 活到老学到老)这里简单写一个demo来看下图效果 没有生效百度了一大堆有说把scoped去掉或者写两个style,嗯效果是可以的 就是感觉有点low,另外也可以将样式写为行内样式,也是可行的,但是还是想找个更好的方法于是乎发现css中可用>>>,scss中存在/de.原创 2021-01-27 09:45:49 · 580 阅读 · 0 评论 -
css实现立体旋转
先放效果主要涉及css:perspective,animation直接上代码需要一个父级div包裹一个子元素父元素添加perspective,数值表示元素距离视图的距离,这里写了1000px,效果如下图改成300px之后数值决定景深然后我们给其加上animation动画,2s的重复匀速旋转得到最终的效果...原创 2021-01-24 22:44:46 · 922 阅读 · 1 评论