Web前端开发笔记-----16.3D、背景扩展、css3渐变、字体图标

最新推荐文章于 2024-07-14 20:21:35 发布

luokii

最新推荐文章于 2024-07-14 20:21:35 发布

阅读量131

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_51546204/article/details/114600107

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了Web前端开发中的CSS3新特性，包括3D变换（transform3D、rotateX/Y/Z等）、背景扩展（background-size、background-origin等）和渐变（线性、径向），以及如何使用字体图标，如阿里巴巴矢量图标库和在线生成工具。通过这些技术，开发者可以创建出更丰富的视觉效果和交互体验。

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

Web前端开发笔记-----16.3D、背景扩展、css3渐变、字体图标

一、3D

1.transform3D相关属性

rotateX():正值向上翻转
rotateY():正值向右翻转
rotateZ():正值向前，负值向右
scaleZ():立体元素的厚度

3d写法
scale3d():三个值x y z
translate3d():三个值x y z
rotate3d():四个值 0|1（x轴是否添加旋转角度）0|1（y轴是否添加旋转角度）0|1（z轴是否添加旋转角度）deg

2.3D相关属性

perspective：离屏幕多远的距离去观察元素，值越大幅度越小。
perspecti-origin：景深-基点位置，观察元素的角度
transform-origin：x y z
transform-style：3D空间
flat（默认值2d）、preserve-3d（3d，产生一个三维空间）
backface-visibility：背面隐藏
hidden、visible（默认值）

3D效果之旋转木马

<style>
        *{ margin: 0; padding: 0;} ul{list-style: none;} img{display: block;}
        .partent{ width: 800px; height: 800px; border: 1px black solid; margin: 30px auto; perspective: 700px;}
        .partent ul{ width: 200px; height: 100px; position: relative; margin: 80px auto; 
        ransform-style:preserve-3d ; transition: 2s;}
        .partent ul li{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;};
        .partent ul li:nth-child(1){ transform: rotateY(0) translateZ(200px);}
        .partent ul li:nth-child(2){ transform: rotateY(60deg) translateZ(200px);}
        .partent ul li:nth-child(3){ transform: rotateY(120deg) translateZ(200px);}
        .partent ul li:nth-child(4){ transform: rotateY(180deg) translateZ(200px);}
        .partent ul li:nth-child(5){ transform: rotateY(240deg) translateZ(200px);}
        .partent ul li:nth-child(6){ transform: rotateY(300deg) translateZ(200px);}
        .partent:hover ul{ transform: rotateY(360deg);}
    </style>
</head>
<body>
    <div class="partent">
        <ul>
            <li><img src="../../../web/images/1.jpg" alt=""></li>
            <li><img src="../../../web/images/2.jpg" alt=""></li>
            <li><img src="../../../web/images/3.jpg" alt=""></li>
            <li><img src="../../../web/images/4.jpg" alt=""></li>
            <li><img src="../../../web/images/5.jpg" alt=""></li>
            <li><img src="../../../web/images/6.jpg" alt=""></li>
        </ul>
    </div>
</body>

3d效果之翻转图片

  <style>
        *{ margin: 0; padding: 0;} img{ display: block;}
        .partent{ width: 640px; height: 320px; margin: 30 auto; position: relative; perspective: 600px;}
        .partent div{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; 
        backface-visibility: hidden; transition: 2s;}

        .partent div:first-child{ transform: rotateY(0);}
        .partent div:last-child{ transform: rotateY(-180deg);}

        .partent:hover div:first-child{ transform: rotateY(180deg);}
        .partent:hover div:last-child{ transform: rotateY(0);}


    </style>
</head>
<body>
    <div class="partent">
        <div>
            <img src="./1.png" alt="">
        </div>
        <div>
            <img src="./2.png" alt="">
        </div>
    </div>
</body>

二、背景扩展

background-size：背景图的尺寸大小
cover：覆盖
contain：包含
background-origin：背景图的填充位置
padding-box（默认）
border-box
content-box
background-clip：背景图的裁切方式
padding-box
border-box（默认）
content-box

注：复合样式的时候，前面的是位置，后面的是裁切。

三、css3渐变

1.线性渐变

linear-gradient：线性渐变（是一个值，需要添加到background-image属性上）
point || angle
color
percentage

background-image:linear-gradient(to top red blue);
渐变到哪

background-image:linear-gradient(45deg red blue);
斩变的0度是在页面的下边，正值会按照顺时针旋转，负值按逆时针旋转。

background-image:linear-gradient(red 25% blue 75%);
25%前纯红色，75%后纯蓝色。

2.径向渐变（用的不多）

radial-gradient：径向渐变,从中心点扩向四周
point
color
percentage

实例：渐变的进度条

<style>
        .progress{ width: 300px; height: 30px; border: 1px black solid; margin: 100px ;background-image: linear-gradient( to right top, #999 25% ,#080 25%, #080 50%, #999 50%,#999 75%,#080 75% );
        background-size: 30px; animation: move infinite 5s linear;
        }
        @keyframes move{
            0%{ background-position: 0 0;}
            100%{ background-position: 300px 0;}
        }
    </style>
</head>
<body>
    <div class="progress"></div>
</body>