六、css函数

最新推荐文章于 2024-01-19 10:22:07 发布

杨691

最新推荐文章于 2024-01-19 10:22:07 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/kissing_yang/article/details/118530579

版权

函数，也称为方法、过程，是一组已经进行逻辑定义通过传入参数数据实现指定功能的语法

组成：函数名称（参数）

函数名称:是函数使用与功能的唯一标识

参数：函数执行时需要使用的数据，根据数据进行执行完成不同功能

6.1 attr()

获取指定元素指定的值,获取的是标签属性的值,只有书写在标签中的属性值才能被获取,由于顺序执行，在页面加载时进行获取，不能获取页面修改的数据，之后我们可以通过事件与js函数的形式进行实时获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a::after{
            content: " (" attr(target) ")";
        }
    </style>
</head>
<body>
    <a href="#" target="_blank">第一个A</a>    
    <a href="#" target="_self">第二个A</a>  
</body>
</html>

6.2 calc()

用于页面内数值计算，常用于不同单位数值计算的转换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        div {
            height: calc(100vh - 50px) ;
            width: 100px;
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

6.3 linear-gradient()

线性渐变，用于自定义背景图片的绘制

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

direction：渐变方向

常用值：

方向：to left/right/top/bottom

角度: 角度值deg

6.4 repeating-linear-gradient()

重复线性渐变,在渐变的基础上重复执行

background-image: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

angle | to side-or-corner：角度或由两个值组成的起始位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 500px;
            width: 500px;
            background-image: repeating-linear-gradient(to left,red, yellow 10% , green 20% );
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

6.5 radius-gradient()

径向渐变，以圆心为中心进行放射渐变

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 150px;
  background-image: radial-gradient(closest-side at  center ,blue,green,yellow,black);
}

#grad2 {
  height: 150px;
  width: 150px;
  background-image: radial-gradient(farthest-side at 10% 40%,blue,green,yellow,black);
}

#grad3 {
  height: 150px;
  width: 150px;
  background-image: radial-gradient(closest-corner at 20% 20%,blue,green,yellow,black);
}

#grad4 {
  height: 150px;
  width: 150px;
  background-image: radial-gradient(farthest-corner at 20% 20%,blue,green,yellow,black);
}
</style>
</head>
<body>

<h1>径向渐变-使用不同的 size 关键字</h1>

<p><strong>closest-side:</strong></p>
<div id="grad1"></div>

<p><strong>farthest-side:</strong></p>
<div id="grad2"></div>

<p><strong>closest-corner:</strong></p>
<div id="grad3"></div>

<p><strong>farthest-corner (this is default):</strong></p>
<div id="grad4"></div>

<p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持渐变。</p>

</body>
</html>

6.6 repeating-radial-gradient()

重复的径向渐变，重复执行的径向渐变将整个背景铺满

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-image: repeating-radial-gradient(circle closest-side at center ,red, yellow 10%, green 15%);
}
</style>
</head>
<body>

<h1>重复的径向渐变</h1>

<div id="grad1"></div>

<p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持渐变。</p>

</body>
</html>

二、2D转换

transform是css3重要的特性，是对元素进行2d与3d转换使用的属性，通常使用对应的矩阵值函数进行转换的运算，但是我们有时只需要对某个样式进行转换，所以一般常用对应的转换函数对指定样式修改

2.1 translate()平移

将元素进行平移操作

translate(x,y)

x指的是元素x轴平移长度值为整数或以当前大小的百分比数值

y指的是元素轴平移长度值为整数或以当前大小的百分比数值

平移不会影响其他元素位置只会在当前变换原点的基础上进行操作,如果xy平移值相同则可以书写一个值

正负影响平移方向

使用

转换效果不会使当前元素脱离文档流，对于没有脱流的块元素我们在页面进行居中时可以使用margin 0 auto 的形式进行居中,如果绝对定位脱流元素想要居中通常我们使用的是left(页面一半-元素一半)的方法，这种方法需要运算并且会改变元素位置，通常我们建议使用平移的方式进行居中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 100%;
            margin: 0;
        }

        .dd {
            height: 100px;
            width: 100px;
            position: relative;
            /* 过度属性 3s为执行秒数 之后动画讲解 */
            transition: all 3s;

            /* 对未脱流元素可以使用margin进行居中 */
            margin: 0 auto;
        }

        .d1 {
            background-color: aqua;
        }

        .d2 {
            background-color: wheat;
        }

        .d3 {
            background-color: violet;
            position: absolute;
            left: 50%;
            transform: translate(-50px);
        }

        div:hover {
            /* 平移 */
            transform: translate(100%, 100%);
        }
    </style>
</head>

<body>
    <div class="dd d1"></div>
    <div class="dd d2"></div>
    <div class="dd d3"></div>
</body>

</html>

2.2 transform-origin变换原点

默认变换的原点为center元素中心，可以通过transform-origin属性修改当前元素变换的原点（注意：对于平移而言设置变换原点可能没有效果）

预设值- left center right top bottom

百分比- 设置以当前元素值相比的百分比

指定值- 使用指定数值通常设置原点为外部时使用的值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 100%;
            margin: 0;
        }

        .dd {
            margin: 0 auto;
            height: 100px;
            width: 100px;
            
            /* 过度属性 3s为执行秒数 之后动画讲解 */
            transition: all 3s;
            
        }

        .d1 {
            background-color: aqua;
        }

        .d2 {
            background-color: wheat;
            z-index: 1;
            /* 预设值 */
            transform-origin: left bottom;
            /* 百分比 */
            transform-origin: 0 50%;
            /* 指定数值 常用单位px */
            transform-origin: -100px 0;
        }

        .d3 {
            background-color: violet;
        }

        div:hover {
            transform: scale(2, 2);

        }
    </style>
</head>

<body>
    <div class="dd d1"></div>
    <div class="dd d2"></div>
    <div class="dd d3"></div>
</body>

</html>

2.3 scale() 缩放

将元素进行缩放操作

scale(x,y)

x指的是元素x轴缩放比例值为整数

y指的是元素轴缩放比例值为整数

缩放如果是放大不会影响其他元素位置只会在当前变换原点的基础上进行操作,如果xy缩放比例相同则可以书写一个值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 100%;
            margin: 0;
        }

        .dd {
            margin: 0 auto;
            height: 100px;
            width: 100px;
            
            /* 过度属性 3s为执行秒数 之后动画讲解 */
            transition: all 3s;
            
        }

        .d1 {
            background-color: aqua;
        }

        .d2 {
            background-color: wheat;
            z-index: 1;
        }

        .d3 {
            background-color: violet;
        }

        div:hover {
            transform: scale(2, 2);

        }
    </style>
</head>

<body>
    <div class="dd d1"></div>
    <div class="dd d2"></div>
    <div class="dd d3"></div>
</body>

</html>

2.4 skew()倾斜

在原图像的基础上进行x轴与y轴的倾斜

skew(x,y)

x,y值为deg倾斜角度，如果只书写一个值就是x倾斜角度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 100%;
            margin: 0;
        }

        .dd {
            margin: 0 auto;
            height: 100px;
            width: 100px;
            
            /* 过度属性 3s为执行秒数 之后动画讲解 */
            transition: all 3s;
            
        }

        .d1 {
            background-color: aqua;
        }

        .d2 {
            background-color: wheat;
            z-index: 1;

        }

        .d3 {
            background-color: violet;
        }

        div:hover {
           /* 倾斜 */
            transform: skew(45deg,10deg);
        }
    </style>
</head>

<body>
    <div class="dd d1"></div>
    <div class="dd d2"></div>
    <div class="dd d3"></div>
</body>

</html>

2.5 rotate()旋转

以原点进行旋转,在当前平面内进行旋转使用deg作为角度单位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 100%;
            margin: 0;
        }

        .dd {
            margin: 0 auto;
            height: 100px;
            width: 100px;
            
            /* 过度属性 3s为执行秒数 之后动画讲解 */
            transition: all 3s;
            
        }

        .d1 {
            background-color: aqua;
        }

        .d2 {
            background-color: wheat;
            z-index: 1;
        }

        .d3 {
            background-color: violet;
        }

        div:hover {
           /* 旋转 */
            transform: rotate(15deg);
        }
    </style>
</head>

<body>
    <div class="dd d1"></div>
    <div class="dd d2"></div>
    <div class="dd d3"></div>
</body>

</html>

进行变换时注意以下特性

变化不会影响其他元素

变化不会使元素脱离文档流

变化是同一个属性如果属性多个不通值的变化书写多个属性只有最后生效

同一个变化属性书写多个变化效果但是注意书写顺序，会按照书写的顺序依次进行变化

使用变换原点以及旋转平移模拟扑克牌的展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            width: 100%;
        }
        .dd{
            position: absolute;
            top: 50px;
            left: calc(50% - 50px);
            width: 100px;
            height: 150px;
            /* 设置变化原点 */
            transform-origin: center 250px;
            transition: all 1s;
          
        }
        .d1{
            background-color: turquoise;
            
            transform:  rotate(-30deg)  ;
        }
        .d2{
            background-color: yellowgreen;
            transform:  rotate(-15deg);
        }
        .d3{
            background-color: rosybrown;
        }
        .d4{
            background-color: skyblue;
            transform: rotate(15deg);
        }
        .d5{
            background-color: darkorchid;
            transform: rotate(30deg);
        }


    </style>
</head>
<body>
    <div class="dd d1"></div>
    <div class="dd d2"></div>
    <div class="dd d3"></div>
    <div class="dd d4"></div>
    <div class="dd d5"></div>
</body>
</html>

三、3D转换

相比较2D转换3D转换就是在2D的基础上添加了z轴，但是明确概念即使是3d也是在当前页面效果的展示

默认情况下3d效果不明显，如果进行单个属性的设置可能变为收缩，需要在展示变化元素的父标签设置透视属性

perspective: 500px;

3.1 旋转

3.1.1 rotateX()x轴旋转

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 100%;
            margin: 0;
            /* 透视属性 */
            /* 默认浏览器展示的是二位图形进行3d变化 无法查看效果 */
            perspective: 500px;
        }
        img{
            display: block;
            margin: 0 auto;
            transition: all 1s;
        }
 
        img:hover{
            transform: rotateX(18000deg);
        }
    </style>
</head>

<body>
    <img src="../img/wa.jpg" alt="">
</body>

</html>

3.1.2 rotateY() 轴旋转

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 100%;
            margin: 0;
            /* 透视属性 */
            /* 默认浏览器展示的是二位图形进行3d变化 无法查看效果 */
            perspective: 10000px;
        }
        img{
            display: block;
            margin: 0 auto;
            transition: all 5s;
        }
 
        img:hover{
            transform: rotateY(45deg);
        }
    </style>
</head>

<body>
   

    <img src="../img/gg.jpg" alt="">
</body>

</html>

3.1.3 rotateZ() z轴旋转

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 100%;
            margin: 0;
            /* 透视属性 */
            /* 默认浏览器展示的是二位图形进行3d变化 无法查看效果 */
            perspective: 10000px;
        }

        img {
            display: block;
            margin: 0 auto;
            transition: all 5s;
        }

        img:hover {
            transform: rotateZ(360deg) ;
        }
    </style>
</head>

<body>
    <img src="../img/gg.jpg" alt="">
</body>

</html>

使用Y轴旋转完成图片切换

使用属性 backface-visibility: hidden; 默认为 visible

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>练习 网站导航</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background-color: lightblue;
        }

        .box {
            height: 300px;
            width: 300px;
            margin: 0 auto;
        }

        div {
            transition: all 2s;
            position: absolute;
            backface-visibility: hidden;
        }

        .p1 {
            height: 300px;
            width: 300px;
            border-radius: 50%;
            background: url(../img/gg.jpg) no-repeat center;
            transform: rotateY(0deg);
        }

        .p2 {
            height: 300px;
            width: 300px;
            border-radius: 50%;
            background: url(../img/wa.jpg) no-repeat center;
            transform: rotateY(180deg);
        }

        .box:hover .p1 {
            transform: rotateY(180deg);

        }

        .box:hover .p2 {
            transform: rotateY(360deg);
        }
    </style>

<body>
    <div class="box">
        <div class="p1"></div>
        <div class="p2"></div>
    </div>

</body>

</html

3.1.4 rotate3d() 3d旋转

x，y，z，deg

其中xyz为矢量值，常用01代表是否设置对应的旋转

rotate3d(1,1,1,45deg) 等价于 rotateX(45deg) rotateY(45deg) rotateZ(45deg)

但是分别旋转会进行依次执行使用rotate3d可以同时进行设置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 100%;
            margin: 0;
            /* 透视属性 */
            /* 默认浏览器展示的是二位图形进行3d变化 无法查看效果 */
            perspective: 1000px;

        }

        img {
            display: block;
            margin: 0 auto;
            transition: all 2s;

        }

        img:nth-of-type(1) {
            transform: rotate3d(1, 1, 1, 45deg);
        }

        img:nth-of-type(2) {
            transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg)
        }

        img:nth-of-type(3) {
            transform: rotateY(45deg) rotateX(45deg) rotateZ(45deg)
        }

        img:nth-of-type(4) {
            transform: rotateY(45deg) rotateZ(45deg) rotateX(45deg)
        }
    </style>
</head>

<body>


    <img src="../img/wa.jpg" alt="">
    <img src="../img/wa.jpg" alt="">
    <img src="../img/wa.jpg" alt="">
    <img src="../img/wa.jpg" alt="">
</body>

</html>

使用旋转实现3d相册

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            perspective: 1000px;
            width: 100%;
        }

        div[class*="d"] {
            width: 100px;
            height: 150px;
            position: absolute;
            top: 300px;
            left: calc(50% - 50px);
            transform-origin: center center -300px;
            opacity: 0.5;
            transition: all 3s;
        }

        .bg {
            width: 50px;
            height: 50px;
            background-color: slateblue;
        }

        .bg:hover>.d1 {
            background-color: khaki;
            transform: rotateY(45deg);
        }

        .bg:hover>.d2 {
            background-color: khaki;
            transform: rotateY(90deg);
        }

        .bg:hover>.d3 {
            background-color: khaki;
            transform: rotateY(135deg);
        }

        .bg:hover>.d4 {
            background-color: rgb(100, 102, 101);
            transform: rotateY(180deg);
        }

        .bg:hover>.d5 {
            background-color: burlywood;
            transform: rotateY(225deg);
        }

        .bg:hover>.d6 {
            background-color: darkviolet;
            transform: rotateY(270deg);
        }

        .bg:hover>.d7 {
            background-color: khaki;
            transform: rotateY(315deg);
        }

        .bg:hover>.d8 {
            background-color: khaki;
            transform: rotateY(360deg);
        }
    </style>
</head>

<body>
    <div class="bg">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
        <div class="d4"></div>
        <div class="d5"></div>
        <div class="d6"></div>
        <div class="d7"></div>
        <div class="d8"></div>
    </div>
</body>

</html>

3.2 平移

translateX()

translateY()

translateZ()

分别向xyz进行平移

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 100%;
            height: 100vh;
            margin: 0;
            /* 透视属性 */
            /* 默认浏览器展示的是二位图形进行3d变化 无法查看效果 */
            perspective: 1000px;
        }

        div {
            height: 200px;
            width: 200px;
            position: absolute;
            top: calc(50vh - 100px);
            left: calc(50% - 100px);
        }

        .d1 {
            background-color: slateblue;
        }

        .d2 {
            background-color: slategray;
        }

        .d3 {
            background-color: springgreen;
            transform:translateX(100px) translateZ(100px);
        }
    </style>
</head>

<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>

</body>

</html>

盒子3d保护

盒子中存在折叠冲突的3d元素，如果想让这些3d元素完整的显示那么需要对其盒子添加相应的属性

transform-style: preserve-3d;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 100%;
            height: 100vh;
            margin: 0;

        }

        div {
            height: 200px;
            width: 200px;
            position: absolute;
            top: calc(20vh);
            left: calc(50% - 100px);
        }

        .wrap {
            /* 将当前盒子转换为3d盒子 */
            /* 默认值为 flat 平面盒子 */
            transform-style: preserve-3d;
            perspective: 1000px;
        }

        .d1 {
            background-color: slateblue;
            transform: translateX(-100px) rotateX(-45deg);
        }

        .d2 {
            background-color: slategray;
        }

        .d3 {
            background-color: springgreen;
            transform: translateX(100px) rotateX(45deg);
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
    </div>

</body>

</html>

3d盒子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 300px;
            width: 300px;
            position: relative;
            margin: 0 auto;
            font-size: 100px;
            transform-style: preserve-3d;
            transition: all 5s;

        }

        .box:hover {
            transform: rotate3d(1,1,0,360deg);
        }

        .bb {
            position: absolute;
            height: 100%;
            width: 100%;
            opacity: 0.5;
        }

        .top {
            background-color: black;
            transform-origin: top;
            transform: rotateX(90deg) translateY(-150px);
        }

        .bottom {
            background-color: aquamarine;
            transform-origin: bottom;
            transform: rotateX(-90deg) translateY(150px);
        }

        .left {
            background-color: blue;
            transform-origin: left;
            transform: rotateY(90deg) translateX(-150px);
        }

        .right {
            background-color: pink;
            transform-origin: right;
            transform: rotateY(270deg) translateX(150px);
        }

        .befor {
            background-color: yellow;
            transform: translateZ(150px);
        }

        .after {
            background-color: darkviolet;
            transform: translateZ(-150px);
        }
 
    </style>

</head>

<body>
    <div class="box">
        <div class="bb top">上</div>
        <div class="bb bottom">下</div>
        <div class="bb left">左</div>
        <div class="bb right">右</div>
        <div class="bb befor">前</div>
        <div class="bb after">后</div>
    </div>
</body>

</html>