css
文章平均质量分 94
css
一颗冰淇淋
这个作者很懒,什么都没留下…
展开
-
关于预处理器 sass 的超全用法
和 js 中的函数类似,在 sass 中将比较复杂或者常用的内容进行封装,可以重复使用。函数的定义函数名 function-name 与 function_name 相同@return 它只允许在函数体中使用,并且每个@function必须以@return结束。当遇到@return时, 它会立即结束函数并返回其结果。函数入参可以设置默认值,也可以按参数名传值,或者通过...表示任意参数函数@function实现的某些功能混入@mixin也能实现,但函数更侧重于做一些计算。原创 2023-05-14 21:28:12 · 586 阅读 · 1 评论 -
预处理器 Less 的十个语法
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。不过浏览器只能识别 CSS 语言,所以 Less 语言直接运行在浏览器端是不被识别的,需要我们通过一些方式将其先转成 CSS,再将 CSS 资源加载到浏览器中。原创 2023-04-02 20:58:23 · 350 阅读 · 0 评论 -
CSS3新增了哪些选择器?(属性、结构伪类、伪元素选择器)
在css3提供的新选择器之前,选择一个元素需要借助id或者class,css3新增的选择器可以更灵活的去选择需要的元素,那css3提供了哪些好用的选择器呢?首先就是属性选择器,我们可以通过属性选择器在同样的标签/类中选择出具有相同属性的元素,不用额外再添加class或者id。比如需要选择出input标签中具有value属性的内容,就可以按以下方式// cssinput[value]{color: #333;}// html<input type="text" value...原创 2021-05-03 22:08:53 · 460 阅读 · 0 评论 -
好用的css3特性-动画和3d变换
上一篇文章总结了过渡和2D变化,这一篇来总结一下动画和3D变换,动画可用的场景也很多,比如在加载的页面的时候,可以放置一个gif图,也可以自定义小动画来缓解用户等待的焦虑感,比如以下三个小圆圈转圈圈的动画。想要完成一个动画的效果,首先要知道定义的语法使用animation来实现动画,@keyframes来定义元素的运动规律(1) animation-name: 动画的名称,即@keyframes定义的动画名字(必写)(2) animation-duration: 动画的执行时间,一个动画原创 2021-04-26 00:46:33 · 198 阅读 · 0 评论 -
好用的css3特性-过渡和2D变换
css3中有很多非常好用的特性,今天来总结一下与动画相关,包括过渡、2D变化、以及设置动画。首先来介绍一下过渡,过渡是在进行变化的时候进行的一个缓冲,如果没有过渡,当变更了元素的位置、大小的数据时,会一瞬间完成变化,增加了过渡之后,变化的过程会展现出来。比如以下gif,我们想要在鼠标移入盒子的时候,将盒子的宽和高增大一倍,并且更改颜色,没有过渡和过渡明显在用户体验上就不一样。过渡的写法也简单,只需要在变化的基础上增加一个 transition 就行transition: 过渡属性 过渡时.原创 2021-04-21 23:41:19 · 192 阅读 · 0 评论