css的特殊样式

Lh_13%

已于 2023-07-15 20:55:45 修改

阅读量224

点赞数

分类专栏：前端文章标签： css 前端

于 2023-07-06 21:23:04 首次发布

本文链接：https://blog.youkuaiyun.com/LongHongYu908/article/details/131564894

版权

前端专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了CSS中2D和3D转换的各种方法，如translate、rotate、scale和skew，以及如何组合使用matrix。接着讲解了过渡效果，包括如何设置过渡时间和触发动作，以及同时处理多个属性的过渡。此外，还探讨了CSS动画的创建，使用@keyframes规则实现样式变换。最后，讨论了线性渐变和径向渐变的使用，以及如何创建圆角效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.线性渐变（向下/向上/向左/向右/对角线）

2.径向渐变

5.圆角

1.css变换的效果

转换使我们的元素发生大小、位置、形状发生一些改变，分为 2D 和 3D 转换

1.2D转换

css3提供的2D转换，都是通过transform属性进行设置

1.translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）-------- 是一种平移效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D转换</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 75px;
            background-color: red;
            border: 1px solid black;
        }
        #div2{
            transform:translate(50px,100px);
        }
    </style>
</head>
<body>
    <div>这是第一个div</div>
    <div id="div2">这是第二个div</div>
</body>
</html>

2.rotate() 方法根据给定的角度顺时针或逆时针旋转元素,可以取负值，元素进行逆时针旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D转换</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 75px;
            background-color: red;
            border: 1px solid black;
        }
        #div2{
            /* transform:translate(50px,100px); */
            transform:rotate(30deg);
        }
        #div3{
            transform:rotate(-30deg);
        }
    </style>
</head>
<body>
    <div>这是第一个div</div>
    <div id="div2">这是第二个div</div>
    <div id="div3">这是第三个div</div>
</body>
</html>

3.scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）

scaleX() 方法增加或减少元素的宽度

scaleY() 方法增加或减少元素的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D转换</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 75px;
            background-color: red;
            border: 1px solid black;
            margin: 0 auto;
        }
        #div2{
            /* transform:translate(50px,100px); */
            /*transform:rotate(30deg);*/
            transform:scale(0.5,0.5);
        }
        #div3{
            /*transform:rotate(-30deg);*/
            transform:scale(2,2);
        }
    </style>
</head>
<body>
    <div>这是第一个div</div>
    <div id="div2">这是第二个div</div>
    <div id="div3">这是第三个div</div>
</body>
</html>

4.skew() 方法使元素沿 X 和 Y 轴倾斜给定角度

skewX() 方法使元素沿 X 轴倾斜给定角度

skewY() 方法使元素沿 Y 轴倾斜给定角度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D转换</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 75px;
            background-color: red;
            border: 1px solid black;
            margin: 0 auto;
        }
        #div2{
            /* transform:translate(50px,100px);
            transform:rotate(30deg); */
            /*transform:scale(0.5,0.5) rotate(30deg);*/
            transform:skew(20deg,10deg);
        }
        #div3{
            transform:skewY(20deg);
        }
    </style>
</head>
<body>
    <div>这是第一个div</div>
    <div id="div2">这是第二个div</div>
    <div id="div3">这是第三个div</div>
</body>
</html>

5.matrix() 方法把所有 2D 变换方法组合为一个。

matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

参数如下： matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

2.3D转换

1.rotateX() 方法使元素绕其 X 轴旋转给定角度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D转换</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 75px;
            background-color: red;
            border: 1px solid black;
            margin: 0 auto;
        }
        #div2{
            transform:rotateX(180deg);
        }
    </style>
</head>
<body>
    <div>这是第一个div</div>
    <div id="div2">这是第二个div</div>
    <div id="div3">这是第三个div</div>
</body>
</html>

2.rotateY() 方法使元素绕其 Y 轴旋转给定角度

rotateZ() 方法使元素绕其 Z 轴旋转给定角度

3.转换的方法与2D转换大同小异

2.css的过度效果

元素从一种效果过渡另一种效果上

要求：

1、把效果添加到哪个CSS属性

2、过渡效果的时长

3、效果触发的动作（hover）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡效果</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background: yellow;
        }
        div{
            /*宽度2秒的过渡*/
            transition:width 10s;
        }
            div:hover{
            width: 500px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

多项改变

同时制定多个属性进行过渡效果，添加多个属性，用逗号进行隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡效果</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background: yellow;
        }
        div{
            transition:width 3s,height 3s,transform 3s;
        }
        div:hover{
            width: 500px;
            height: 500px;
            transform:rotate(40deg);
            background: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

语法

3.动画效果

@keyframes规则去创建动画，实现将一个元素从一种css样式变换到另一种css样式，使用from和

to或者使用%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style type="text/css">
        @keyframes first{
            0%{
                background-color: red;
            }
            50%{
                background-color: yellow;
            }
            100%{
                background-color: red;
            }
        }
        div{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: red;
            animation-name: first;
            /*动画持续时间*/
            animation-duration:10s;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style type="text/css">
        @keyframes first{
            0% {
                background-color:red;
                left:0px;
                top:0px;
            }
            25% {
                background-color:yellow;
                left:200px;
                top:0px;
                transform:rotate(30deg)
            }
            50% {
                background-color:blue;
                left:200px;
                top:200px;
                transform:rotate(60deg)
            }
            75% {
                background-color:green;
                left:0px;
                top:200px;
                transform:rotate(100deg)
            }
            100% {
                background-color:red;
                left:0px;
                top:0px;
                transform:rotate(180deg)
            }
        }
        div{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: red;
            position: relative;
            animation-name: first;
            /* 动画持续时间 */
            animation-duration:10s;
            /* animation:first 10s; */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

4.渐变效果

1.线性渐变（向下/向上/向左/向右/对角线）

1.语法格式

background-image:linear-gradient(direction,color1,color1,......)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变</title>
    <style type="text/css">
        #box{
            height: 200px;
            background-color: red; /*可能有些浏览器不支持渐变的属性*/
            /*默认的渐变方向是从上到下 to bottom*/
            background-image: linear-gradient(red,yellow,green);
        }
        /*从左到右的渐变*/
        #box{
            height: 200px;
            background-image: linear-gradient(to right,red,yellow,green);
        }
        /*从右到左的渐变*/
        #box{
            height: 200px;
            background-image: linear-gradient(to left,red,yellow,green);
        }
        /*对角线渐变*/
        #box{
            height: 200px;
            background-image: linear-gradient(to bottom right,red,yellow,green);
        }
        /*从下到上的渐变*/
        #box{
            height: 200px;
            background-image: linear-gradient(to top,red,yellow,green);
        }
        /*有限定角度的线性渐变 0deg 等于向上（to top）。值 90deg 等于向右（to right）。值 180deg 等于向下（to bottom）*/
        #box{
            height: 200px;
            background-image: linear-gradient(-90deg,red,yellow,green,blue);
        }
        /*不透明度 rgba() 函数中的最后一个参数可以是 0 到 1 的值，它定义颜色的透明度：0 表示全透明，1 表示全彩色（无透明）
        使用rgb ----- rrggbb 颜色表示法 a表示就是不透明度*/
        .box{
            height: 200px;
            background-image: linear-gradient(to right, rgba(255,0,0,0),
            rgba(255,0,0,1));
        }
        /*重复线性渐变*/
        .box{
            height: 200px;
            background-image: repeating-linear-gradient(red,yellow 10%,blue 20%);
        }
        /*有角度的重复线性渐变*/
        .box{
            height: 200px;
            background-image: repeating-linear-gradient(45deg,red,blue 10%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.径向渐变

1.语法格式

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

size 参数定义渐变的大小。它可接受四个值：

closest-side

farthest-side

closest-corner

farthest-corner

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style type="text/css">
        .box{
            height: 300px;
            background-image: radial-gradient(red,yellow,blue)
        }
        .box{
            height: 300px;
            background-image: radial-gradient(red 10%,yellow 20%,blue)
        }
        .box{
            height: 300px;
            background-image: radial-gradient(circle,red 10%,yellow 20%,blue)
        }
        .box{
            height: 300px;
            background-image: repeating-radial-gradient(red,yellow 10%,blue 20%)
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

5.圆角

通过 CSS border-radius 属性，可以实现任何元素的“圆角”样式

四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）

三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，

第三个用于右下角

两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下

角）

一个值 - border-radius: 15px;（该值用于所有四个角，圆角都是一样的）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角</title>
    <style type="text/css">
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            border-radius:25px;
        }
        .box2{
            width: 200px;
            height: 200px;
            border:1px solid blue;
            border-radius: 25px;
        }
        .box3{
            width: 200px;
            height: 200px;
            background:url(哆啦A梦.jpg);
            border-radius: 25px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>