CSS进阶

weixin_58732695

已于 2022-04-30 15:44:42 修改

阅读量263

点赞数

文章标签： css html5

于 2022-04-29 14:20:34 首次发布

本文链接：https://blog.csdn.net/weixin_58732695/article/details/124411126

版权

本文介绍了CSS的进阶技巧，包括字体图标、平面转换、空间转换和动画效果。内容涵盖如何使用字体图标、transform属性实现位移、旋转、缩放等效果，以及如何创建动画、设置精灵图动画和应用CSS3滤镜。

摘要由CSDN通过智能技术生成

一、

字体图标

字体图标-类名 Font class

引用：1.在引入项目下面生成fontclass代码（使用link标签）2.挑选相应图标并获取类名，应用于页面（class引入两个类名iconfont）（标签选择器权重较低，不能直接更改属性）

字体图标：Iconfont(使用字体图标实现网页中简介图标的效果）

案例：购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont">
</head>
<style>
    li{
        list-style: none;
    }
      a{
          color: papayawhip;
          text-decoration: none;
      }
      .nav{
          width: 200px;
          margin: 50px auto;
          font-size: 50px;
      }
      .orange{
          color: orange;
      }

</style>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">
                    <span class="iconfont orange"></span>
                    <span>购物车</span>
                    <span class="iconfont"></span>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

平面转换

使用transform属性实现元素的位移、旋转、缩放效果，改变盒子在平面中的形态

1.位移：使用translate （水平移动正数向右，竖直移动正数向下）；取值：像素单位数值，百分比（正负均可）；单独设置某个方向的值：translateX（）translateY(),单给一个值表示水平；

定位盒子居中：

position:absolute;
left:50%;
top:50%;
margin-top:-100px;
margin-left:-50px;
/*设置为自身高度宽度的一半*/
transform:translate(-50%,-50%);
width:100px;
height:200px;

案例：双开门右侧盒子背景图：background-position：right 0；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 500px;
        height: 800px;
        margin: 0 auto;
        background-image: url(./images/壁纸4.jpg);

    }
    .box::before,.box::after{
        float: left;
        content:'';
        width: 50%;
        height: 100%;
        transition:all .5s;
      
    }
    .box::after{
        background-image: url(./images/电脑壁纸.jpg);
    }
    .box::before{
        background-image: url(./images/电脑壁纸2.jpg);
    }
    .box::after{
        background-position:right 0;
    }
    .box:hover::before{
        transform: translate(-100%);
    }
    .box:hover::after{
        transform: translate(100%);
    }

   
</style>
<body>
    <div class="box"> </div>
</body>
</html>

2.旋转

transform：rotate（）正负均可，角度单位是deg，默认为顺时针

转换圆点（绕原点旋转）：transform-origin 复合属性，原点水平位置竖直位置；设置原点：方位名词（top left middle）

3.多重转换

transform复合属性，有层叠性，可以实现多重转换同时进行（空格隔开多个值）一般先平移在旋转，旋转会改变坐标轴

4.缩放

scale属性改变元素宽或高（x轴缩放倍数，y轴缩放倍数）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    img{
        width: 100%;
    }
    .box{
        position: absolute;
        width: 500px;
        height: 400px;
        margin: 50px auto;
    }
    .box p{
        color:powderblue;
        padding: 10px 10px 0 10px;
    }
    .box.pic::after{
        /* 播放按钮压在图片上面 */
        position: absolute;
        left: 50%;
        right: 50%;
        margin-left: -29px;
        margin-top: -29px;
    content: '';
    width: 50px;
    height: 50px;
    background-image: url(./电脑壁纸.jpg);
    /* 大图效果 */
    transform: scale(5);
    transition: all .5s;
    /* 过度 */
    opacity: 0;
    /* 透明 */
    }
    .box li :hover .pic::after
{
    opacity: 1;
    transform: scale(1);
}

</style>
<body>
    <div class="box">
        <ul>
            <li>
                <div class="pic"><img src="./壁纸4.jpg" alt=""></div>
                <!-- 图片区域 -->
                <p> 文字区域</p>
            </li>
        </ul>
    </div>
</body>
</html>

5.渐变背景

background-image实现渐变背景效果，是多个颜色逐渐变化，一般用于设置盒子的背景。

background-image:linear-gradient(
颜色1，
transparent，颜色（可表示透明效果）
颜色2
)

6.倾斜

transform:skew() 取值可正可负单位是deg 用逗号隔开

7.中心点的确立

元素变形的基准点transform：origin x轴 y轴默认是50% z轴是0% x-axis：left right center % y-axis：center bottom z-axis： length

空间转换

1.平移 transform ：translate3d（x,y,z）translateX translateY translateZ

perspective：200-800透视效果：近大远小，近实远虚

transform-style：preserve-3d（给父级添加，子集有效果）让子集处于三D空间

2.缩放 transform：scale3d（x,y,z）大于1表示放大，小于1表示缩小

动画

使用animation添加动画效果

定义动画

@keyframes 动画名称(change）{
from{}
to{}
}
/*实现两种两个状态动画*/
@keyframes 动画名称{
0%{}
/*表示动画所占时间比例*/
20%{}
50%{}
}
/*实现多种状态的缩放*/

使用动画

animation：动画名称动画时间速度曲线延迟时间重复次数动画方向执行完毕状态

速度线：linear step（n）（表示分几帧）重复次数：infinite无限循环动画方向：alternate为反向曲执行完状态：backwards第一帧状态forwards最后一帧状态

逐帧动画

使用steps（数字）实现逐帧动画，作用于速度曲线（配合精灵图使用）

CSS3精灵图：网页的图片处理技术，网页优化一种方式

精灵图动画制作步骤

准备显示区域：设置盒子尺寸为一张小图尺寸，盒子背景为精灵图

定义动画：改变背景图位置（移动距离为精灵图宽度）

使用动画：添加速度曲线steps（N），N与精灵图上小图的个数相同，添加无限重复效果

多组动画

使用animation属性给一个元素添加多个动画效果

精灵图动画的同时添加盒子位移动画

CSS3的滤镜（Filters）

1.模糊效果：blur（value）:参数value表示模糊半径

2.图像的亮度：brightness（value)参数表示图像亮度，可以是百分比也可以是正数值，0表示全黑，0%和100%表示原图

3.图像对比度contrast（value）表示图像对比度可以是百分比、正数 0表示全黑 1表示原图

4.图像阴影drop-shadow(x,y,r,c）xy表示水平和垂直偏移参数 r表示阴影半径 c表示阴影颜色

5.将图像转化为灰度grayscale(value) 1表示全灰，0表示不变

6.反转效果invert（value) 0表示不变

7.图像透明度opacity 0表示全透明

8.图像棕褐色效果sepia（value) 1表示不变 0表示全褐色

9.图像饱和度saturate 0表示黑白 200%表示过饱和