CSS部分函数(calc()、attr()、rgb()、rgba()、var() 、cubic-bezier()、hsl()、hsla()、渐变)

最新推荐文章于 2024-09-26 18:38:53 发布

ddx2019

最新推荐文章于 2024-09-26 18:38:53 发布

阅读量1.7k

点赞数 1

分类专栏： HTML+CSS+JS 所遇问题，小记文章标签： css css3 前端

本文链接：https://blog.csdn.net/ddx2019/article/details/105111057

版权

所遇问题，小记同时被 2 个专栏收录

74 篇文章 2 订阅

订阅专栏

HTML+CSS+JS

16 篇文章 1 订阅

订阅专栏

1. calc( )函数

calc() 函数用于动态计算长度值。

①：运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
②：任何长度值都可以使用calc()函数进行计算；
③： calc()函数支持 “+”, “-”, “*”, “/” 运算；
④： calc()函数使用标准的数学运算优先级规则；

例：创建一个横跨屏的div,两边各有50px的间隙
用绝对定位，（margin-left等控制的宽度会有变化）控制div距左边50px,控制其宽度为屏幕宽度的100%减去100px,减掉的100px包含距离左边的50px,也控制了距离右边50px。
在这里插入图片描述

<h3 class="test-calc">测试calc</h3>

.test-calc{
    background-color:yellow;
    border:1px solid red;
    position:absolute;
    top:100px;
    left:50px;
    width:calc(100% - 100px);
    padding:5px;
}

2. attr( )函数

· attr() 函数返回选择元素的属性值。

<div><a href="https://www.baidu.com/">百度一下</a></div>
<div class="test-attr" data-id="task-id111">返回选择元素的属性值：</div>

/*在a内容后加括号和href的属性值*/
a:after{
   content:"("attr(href)")";
  font-size: 12px;
  color: rgb(107, 177, 243);
  margin-left: 10px;
}
/* 在有data-id属性的元素后面添加上，data-id的属性值*/
.test-attr:after{
  content: ""attr(data-id)"";
  color:red;
  font-size: 18px;
}

前后对比：
在这里插入图片描述

3. linear-gradient() 函数

· linear-gradient() 函数用于创建一个线性渐变的 “图像”。
为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。
. 从左上角到右下角的线性渐变:
在这里插入图片描述

    .test-linear-gradient{
      width: 150px;
    height: 50px;//得有高度
    从左上角到右下角的线性渐变:
    background: linear-gradient(to bottom right, lightblue,lightyellow);//从上到下
}

· 线性渐变指定一个角度:

   .test-linear-gradient{
    width: 150px;
   height: 50px; /*高度必须 */
   background: linear-gradient(360deg,lightblue,lightyellow); /* 线性渐变角度360度 */ 
}

在这里插入图片描述
. 使用透明度的线性渐变（通过rgba ）:
为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明( 正常 )。
在这里插入图片描述

  .test-linear-gradient{
    width: 150px;
    height: 50px; /*高度必须 */
    background: linear-gradient(to right top,rgba(255,0,0,0.1),rgba(255,0,0,1)); /* 往右上角渐变，透明度0.1到1 */
    }

4. radial-gradient( ) 函数

· adial-gradient() 函数用径向渐变创建 “图像”。
径向渐变由中心点定义。为了创建径向渐变你必须设置两个终止色。
圆形径向渐变:如下：
颜色结点均匀分布：（不定义百分比）
在这里插入图片描述

<div class="test-radial-gradient"></div>

.test-radial-gradient{
    height:80px;
    width:80px;
    background:radial-gradient(circle,red,yellow,lightyellow,red);/* circle指定原形径向渐变，默认是 ellipse 椭圆形的径向渐变。  */
}

颜色结点不均匀分布：（利用百分比）
在这里插入图片描述

.test-radial-gradient{
    width: 100px;
    height: 100px;
    background:radial-gradient(red 15%,yellow 60%,lightyellow 25%)
}

5. repeating-linear-gradient() 函数

重复的线性渐变函数：

<div class="box"></div>

  <style>
    .box{
    height:80px;
    width:80px;
    background: repeating-linear-gradient(45deg,red , yellow 50%,  lightyellow 30%);
   }
</style>

在这里插入图片描述

6. repeating-radial-gradient() 函数

重复的径向渐变函数：

<div class="test-repeating-radial">  </div>

.test-repeating-radial{
   height:80px;
    width:80px;
    background:  repeating-radial-gradient(red 20%, yellow 50%,  lightyellow 60% );
}

在这里插入图片描述

7. var() 函数

这里需要了解一下 自定义属性（-*）：CSS变量: 在 CSS选择器中声明, 变量名必须以两个破折号（-）开头，如：–mode-bg_color; 区分大小写。对于全局范围，您可以使用：root或body`选择器。
即，前缀为的属性名称–（如–example-name）表示自定义属性，这些自定义属性包含一个可以在使用该var() 函数的其他声明中使用的值。
声明一个自定义属性 （ CSS变量 或者 级联变量）语法：

element { /* 这里的element代表CSS的选择器 */
  --main-bg-color: lightblue;
}

使用该变量 ( 用 css函数 var() ) ：

.test1{
  background-color: var(--main-bg-color);
}

注意：
:root 是一个 CSS 伪类，它代表文档的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。

var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。
语法： **var(变量名, 变量值 )**第二个参数，“变量值”可写可不写，是一个备用值，在属性不存在的时候使用

<div class="test-css_var"></div>

:root{
  --mode-bg_color:lightblue;  /* 定义一个 全局范围的 css 变量 ，名为--mode-bg_color*/
} 
.test-css_var{
  width: 100px;
  height: 100px;
  background: var(--mode-bg_color); /* 通过CSS 函数var() 使用刚刚定义的CSS变量，将元素的背景色设为lightblue */
}

在这里插入图片描述

8. cubic-bezier() 函数

定义了一个贝塞尔曲线(Cubic Bezier)。
它可以实现，ease-in等动画效果，cubic-bezier(.42, 0, 1, 1)的效果等同于ease-in

cubic-bezier的功能演示，参考：https://wow.techbrood.com/fiddle/28015
cubic-bezier() 效果，参考链接：https://cubic-bezier.com，
最初提到该地址的博客是：https://blog.csdn.net/lucky541788/article/details/83649881

css 动画中 ease,seae-in,ease-in-out,ease-out,效果区别

参考博文链接： https://blog.csdn.net/Candy_10181/article/details/80611009，
博主做了如下表格的总结：

css动画值描述
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。(匀速)
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）（相对于匀速，中间快，两头慢）。
ease-in 规定以慢速开始的过渡效果（等于cubic-bezier(0.42,0,1,1)）（相对于匀速，开始的时候慢，之后快）。
ease-out 规定以慢速结束的过渡效果（等于cubic-bezier(0,0,0.58,1)）（相对于匀速，开始时快，结束时候间慢，）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于cubic-bezier(0.42,0,0.58,1)）（相对于匀速，（开始和结束都慢）两头慢）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

css动画值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。(匀速)
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）（相对于匀速，中间快，两头慢）。
ease-in	规定以慢速开始的过渡效果（等于cubic-bezier(0.42,0,1,1)）（相对于匀速，开始的时候慢，之后快）。
ease-out	规定以慢速结束的过渡效果（等于cubic-bezier(0,0,0.58,1)）（相对于匀速，开始时快，结束时候间慢，）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于cubic-bezier(0.42,0,0.58,1)）（相对于匀速，（开始和结束都慢）两头慢）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

9. rgb()函数

rgb() 函数使用红(R)、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。
在这里插入图片描述

/* <p class="red"> 红色 </p> */
.red { color: rgb(255,0,0);  } /* 字体将显示为 红色*/

10. rgba()函数

rgba() 使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。
在这里插入图片描述

/* <p class="red"> 红色 </p> */
.red { color: rgb(255,0,0,0.3);  } /* 字体颜色比红色浅，类似 粉色*/

11. hsl()函数

使用色相、饱和度、亮度来定义颜色。
在这里插入图片描述

/* <p id="p2">浅绿</p>  */
#p2 {background-color:hsl(120,100%,75%);}

在这里插入图片描述

12. hsla()函数

使用色相、饱和度、亮度、透明度来定义颜色。
在这里插入图片描述

ddx2019

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录