css箭头流动效果_前端基础⼊门之CSS中的函数
⼤家都知道，CSS只是⼀个声明式的语⾔，主要为标记语⾔服务。很多程序员鄙视它，有⼀部分原因是CSS并不像其他程序语⾔⼀样，具有⼀些逻辑能⼒以及函数功能等特性。随着CSS的不断变⾰，其慢慢地也变得越来越强⼤。时⾄今⽇，CSS中也有具有函数和运算相关的能⼒。⽐如我们今天要聊的CSS函数。在CSS Values and Units Module Level 4中把函数标记(Functional Natations)单独提取出来做为该规范的⼀部分。⽽这部分主要介绍了⼀些具有数学计算能⼒相关的属性值，⽐如⼤家熟悉的calc()和不怎么熟悉的min()和max()。⽽我们今天要聊的是CSS中的函数，其中就包括这些部分。如果⼤家感兴趣，欢迎继续往下阅读。
什么是函数标记
函数标记是CSS值和单位模块中的⼀部分。从Level 4 开始，函数标记中涵盖的内容也越来越多，⽐如toggle()，它允许通过使⽤attr()在值和属性引⽤之间切换。另外更有趣的是，⾥⾯包含了⼀些具备数学计算能⼒的表达式，⽐如calc()、min()和max()。
W3C规范是这样描述函数标记的：
函数标记是⼀种可以表⽰更复杂类型或调⽤特殊处理的组件值类型。语法从函数名开始，紧接着是左括号，然后是参数到符号，然后是右括号。
形象⼀点来说，它是⼀个函数或函数名，⽐如calc，后⾯紧跟着()。括号之间可以是⼀个表达式。看上去是不是有点类似于其他编程语⾔中的函数呢？
从这⼀点来说，在CSS中只要是带有()的属性值，我们都可以把它纳⼊到CSS中函数标记(或者函数表⽰法)，简单的就称其为CSS函数。仔细回忆⼀下，如果按其功能或特性我们可以简单的分为：
属性函数：attr()
背景图⽚函数：linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()、image-set()、image()、url()、element()
颜⾊函数：rgb()、rgba()、hsl()、hsla()、hwb()、color-mod()
图形函数：circle()、ellipse()、inset()、polygon()、path()
滤镜函数：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()
转换函数：matrix()、matrix3d()、perspective()、rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()、scale()、
scale3d()、scaleX()、scaleY()、scaleZ()、skew()、skewX()、skewY()、translate()、translateX()、translateY()、
translateZ()、translate3d()
数学函数：calc()、min()、max()、mixmax()、repeat()
缓动函数：cubic-bezier()、steps()
其他函数：counter()、counters()、toggle()、var()、 symbols()
rotate属性数学表达式
前⾯也提到过了，在函数标记中引⼊了数学表达式。有关于数学表达式，W3C是这样描述的：
数学函数calc()、min()和max()允许将带有加法(+)、减法(-)、乘法(*)和除法(/)的数学表达式⽤于()之中。
这也就是说，在⼀些函数中，我们可以通过表达式来计算值。简单点说，表达式⼀词只是括号内完全允许使⽤数学逻辑的⼀种花哨说法。
对这两点有基本了解之后，咱们分别来看看CSS中各种类型的函数是如何使⽤，⼜将起什么作⽤。
CSS的函数
在函数标记⼀节中，我们简单的整理了CSS中的各种类型的函数。有了这些函数之后，可以很好的帮助我们编写CSS，也可以减少⼈⾁的计算，甚⾄都不需要⼈⾁计算，客户端会⾃动帮助我们计算。接下来简单的了解⼀些CSS的函数的使⽤以及所起的相应作⽤。
属性函数
属性函数attr()是我们较为熟悉的⼀个函数，只不过⼤家平时并不把其称为函数。⼀般情况下，其主要配合CSS的伪元素::before、::after和content⼀起使⽤，可以根据HTML元素⾃定义的属性⽣成内容。⽐如CSS 的提⽰框就是⽤这个⽅式来做的：
.tooltip-toggle::before { content: attr(aria-label);}
上⾯只是attr()函数最基础的使⽤，在CSS 值和单位模块 中，attr()功能更为强⼤，不仅仅是根据HTML元素属性⽣成内容，其可以对所有属性应⽤attr()函数的功能，并返回⾮字符串值，⽐如数字、颜⾊等。
attr(  ? [ ,  ]? )
attr()还提供了⼀个回退值的选项，如果指定属性丢失，或者⽆法将其解析为给定类型，或者属性⽆效，则会采⽤这个回退值。⽐如下⾯这样的⽰例：
height: attr(data-size em, 20);
上⾯这个⽰例就是height属性设置的值将会从元素的data-size属性中获取，并且将其单位设置为em。同时如果data-size⽆法获取或失效时，则会采⽤回退值20。
背景函数
背景函数是属于CSS图像值和替换内容(CSS Image Value and Replaced Content Module Level 4)中的内容。其中⼤部分都是我们熟知的，⽐如：
url()：指定引⽤图⽚的路径
linear-gradient、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()：CSS中渐变相关的函数，可以通过这些函数绘制不同的渐变
图像
image-set()：可以根据不同的终端的dpr指定不同倍数的图像
image()：其功能和url()函数类似，只是功能更为强⼤。⽐如，使⽤媒体⽚段剪辑出图像的⼀部分；指定回退图像；使⽤纯⾊作为图像；对具有⽅向性的图像进⾏注释
element()：可以将⽹站中的某部分当作图⽚渲染
其中较有为意思的是image()和element()两个函数。
使⽤image()中的ltr和rtl可以指定图像⽅向。如果图像是⼀个箭头，表⽰指向内容的项⽬符号点，则可以使⽤此设置确保箭头始终指向正确的⽅向。
image(ltr "arrow.png")
image(rtl "arrow.png")
可以达到镜像的效果。另外⼀个不同点是，image()可以将纯⾊做为⼀图像。特别是图像加载失败时，可以使⽤纯⾊做为⼀个回退值。好⽐background-image通过url()加载失败时，采⽤background-color做为降级处理。
.special {  color: white;  background: image("dark.png

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。