CSS3——02

最新推荐文章于 2023-01-07 18:54:53 发布

Galaksen

最新推荐文章于 2023-01-07 18:54:53 发布

阅读量330

点赞数

分类专栏：学习笔记文章标签： CSS3

本文链接：https://blog.csdn.net/qq_41857060/article/details/103040231

版权

学习笔记专栏收录该内容

37 篇文章 2 订阅

订阅专栏

1.渐变

1.1 线性渐变：linear-gradient

1.2 径向渐变：radial-gradient

1.3 重复渐变

2.背景样式

2.1 背景颜色：background-color;

2.2 背影图片：background-image: url("");

2.3 背景平铺：background-repeat;

2.4 背景图像是否随页面的其余部分滚动：background-attachment;

2.5 背景大小：background-size;

2.6 background-position属性相对于什么位置来定位：background-origin;

2.7 最终显示哪些区域：background-clip;

5.5 transform-origin：改变被转换元素的参照中心（改变旋转轴心）

5.6 同时添加多个transform属性值

5.7 实现元素居中

6.transform3D转换

6.1 3D移动：translate3d()

6.2 3D缩放：scale3d()

6.3 3D旋转：rotate3d()

6.4 透视/景深效果（立方体案例）

1.渐变

通过渐变可以实现许多炫丽的效果，有效减少图片的使用数量，并且具有很强的适应性和可扩展性。

1.1 线性渐变：linear-gradient

线性渐变指沿着某条直线朝一个方向产生渐变效果

linear-gradient( [<point> || <angle>,]? <start-color>, <stop-color> [, <stop-color>]* );

[point/angle]=0个或1个；start-color=1个；stop-color>=1个

第一个参数表示线性渐变的方向（point-方向或angle-角度）

to left：设置渐变为从右到左。相当于: 270deg;
to right：设置渐变从左到右。相当于: 90deg;
to top：设置渐变从下到上。相当于: 0deg;
to bottom：设置渐变从上到下。相当于: 180deg。默认值，等同于留空不写。
也可以直接指定度数，如45deg

第二个参数是起点颜色，可以指定颜色的位置

第三个参数是终点颜色，还可以在后面添加更多的参数，表示多种颜色的渐变

1.2 径向渐变：radial-gradient

径向渐变指从一个中心点开始沿着四周产生渐变效果

radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-start>[ , <color-stop> ]+);

shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。如果宽高不一样，默认效果切换到ellipse。
size：渐变的大小，即渐变到哪里停止。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。默认是最远的角farthest-corner。
position：确定圆心的位置。可以赋值坐标（参照元素的左上角），也可以赋值关键字(left center right top bottom)。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center。默认在正中心。
color-start、color-stop：开始颜色、结束颜色。可以指定颜色位置。

1.3 重复渐变

2.背景样式

2.1 背景颜色：background-color;

2.2 背影图片：background-image: url("");

如果图片大于容器，那么默认就从容器左上角开始放置

如果图片小于容器，那么图片默认会平铺

2.3 背景平铺：background-repeat;

no-repeat:不平铺
repeat:默认。背景图像将在垂直方向和水平方向重复
repeat-x:背景图像将在水平方向重复
repeat-y:背景图像将在垂直方向重复
round:会将图片进行缩放之后再平铺
space:图片不会缩放平铺，只是会在图片之间产生相同的间距值

2.4 背景图像是否随页面的其余部分滚动：background-attachment;

scroll：默认值。背景图像会随着页面其余部分的滚动而移动。
fixed：当页面的其余部分滚动时，背景图像不会移动。

local和scroll的区别：

对于可以滚动的元素（设置为overflow:scroll的元素）,设置background-attachment:local，则背景会随内容的滚动而滚动。

因为背景图是相对于元素自身内容定位，开始固定，元素出现滚动条后背景图随内容而滚动。

设置background-attachment:scroll，则背景图片不会跟随内容一起滚动。

2.5 背景大小：background-size;

auto：默认值，保持背景图片的原始高度和宽度
number：具体的值，可以改变背景图片的大小。建议：在使用这个属性之前先确定宽高比与容器的宽高比是否一致，否则会造成图片失真变形
percentage：百分值，可以是0%〜100%之间任何值，但此值只能应用在块元素上，背景图片大小根据其父元素宽度的百分比来计算
contain：背景图片按比例缩放，自适应整个背景区域，使图片全部包含在容器内（会包含整个图片，可能会造成容器的空白区域）
cover：与contain相反，背景图片按比例缩放，自适应整个背景区域，如果背景区域不足以包含所有背景图片，图片内容会溢出（只要填满背景就可以，可能会有内容溢出）

当background-size取值为number和percentage时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于auto，但这里的auto并不会使背景图片的高度保持自己原始高度，而是会参照第一个参数值进行等比例缩放。

应用：背景图片大于元素容器，使背景图片居中显示

2.6 background-position属性相对于什么位置来定位：background-origin;

border-box：从border的位置开始填充背景，会与border重叠
padding-box：从padding的位置开始填充背景，会与padding重叠
content-box：从内容的位置开始填充背景，会与content重叠

2.7 最终显示哪些区域：background-clip;

border-box：显示border及以内的内容
padding-box：显示padding及以内的内容
content-box：显示内容部分

应用：以更大的范围响应用户，但只显示指定的图片

3.边框图片：border-image

将图片规定为包围 div 元素的边框

border-image 属性是一个简写属性，用于设置以下属性

border-image-source：可以指定边框图片的路径，默认只是填充到容器的四个角点
border-image-slice：该属性规定图像的上、右、下、左侧边缘的向内偏移，图像被分割为九个区域：四个角、四条边以及一个中间区域。除非使用了关键词 fill，否则中间的图像部分会被丢弃。值可以是数值也可以是百分比（相对于图像尺寸的百分比值）。如果省略第四个数值/百分比，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。

（图片宽高为81px，九宫格：一一对应）

border-image-width：图片边框的宽度。如果没有设置这个属性，那么宽度默认就是元素的原始的边框宽度。

细节：1.边框图片的本质是背景，并不会影响元素内容的放置 2.内容只会被容器的border和padding影响

建议：一般将值设置为原始的边框的宽度。

border-image-outset：边框图像区域超出边框的量

当border:1px solid red时，如果不用上述的两种办法解决内容与边框的重叠问题，也可以用border-image-outset:27px的方法。但这样其实存在很大的问题：（区别见下图，所以一般将它设置为0，否则它周围有其他元素时会影响到其他元素）

border-image-repeat：图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

repeat:直接重复平铺
round:将内容缩放进行完整的重复平铺
stretch：拉伸（默认）

应用：任意拉伸的按钮：通过一个按钮的背景图片制作出任意大小的按钮，实现背景填充

4.过渡：transition

通过过渡transition，可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果. 要实现这一点，必须规定两项内容：1.规定希望把效果添加到哪个 CSS 属性上；2.规定效果的时长

transition 属性是一个简写属性，用于设置以下属性：（过渡效果执行完毕之后，默认会还原到原始状态）

transition-property：添加过渡效果的样式属性名称
transition-duration：过渡效果的耗时，以秒做为单位
transition-timing-function：规定过渡效果的速度曲线

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 之间的数值。

transition-delay：过渡效果的延迟（过渡效果何时开始）

应用：手风琴菜单（鼠标移动上去时，以过渡效果显示全部菜单）

添加过渡效果:过渡效果只能产生从某个值到另外一个具体的值的过渡
display:none——>display:block; 这种过渡无法产生

      * {
            padding: 0;
            margin: 0;
        }

        .menu {
            width: 200px;
            height: auto;
            margin: 100px auto;
        }

        .item {
            width: 100%;
            height: auto;
        }

        .item > h3 {
            height: 40px;
            line-height: 40px;
            background-color: #7dffe7;
            color: orange;
            border-bottom: 2px solid #ccc;
            padding-left: 10px;
        }

        .item > .itemBox {
            width: 100%;
            height: 0;
            overflow: hidden;
            /*添加过渡效果:过渡效果只能产生从某个值到另外一个具体的值的过渡
              display:none——>display:block; 这种过渡无法产生
            */
            /*1.一定要设置为哪些css样式添加过渡效果*/
            transition-property: height;
            /*2.一定要设置过渡效果的耗时*/
            transition-duration: 1s;
        }

        .item > .itemBox > ul {
            list-style: none;
            background-color: #eaffb6;
            padding: 10px;
            height: 90px;
        }

        /*为item添加hover伪类*/
        .item:hover > .itemBox {
            height: 90px;
        }


<div class="menu">
    <div class="item">
        <h3>市内新闻</h3>
        <div class="itemBox">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div>
    <div class="item">
        <h3>省内新闻</h3>
        <div class="itemBox">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div>
    <div class="item">
        <h3>国内新闻</h3>
        <div class="itemBox">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div>
</div>

5.transform2D转换

通过CSS3transform转换，能够对元素进行移动、缩放、旋转、倾斜

5.1 2D移动：translate()

5.2 2D缩放：scale()

5.3 2D旋转：rotate()

5.4 2D斜切：skew()

rotate()函数只旋转，不改变元素形状；skew()函数只改变元素形状，不旋转

5.5 transform-origin：改变被转换元素的参照中心（改变旋转轴心）

应用：旋转扑克牌

       *{
            padding: 0;
            margin: 0;
        }
        .pkBox{
            width: 155px;
            height: 219px;
            position: relative;
            margin:300px auto;
        }
        .pkBox > img{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            /*添加过渡*/
            transition: transform 2s;
            /*设置旋转轴心*/
            transform-origin: right top;
        }
        /*添加鼠标上移的效果*/
        .pkBox:hover >img:nth-of-type(1){
             transform: rotate(60deg);
         }
        .pkBox:hover >img:nth-of-type(2){
            transform: rotate(120deg);
        }
        .pkBox:hover >img:nth-of-type(3){
            transform: rotate(180deg);
        }
        .pkBox:hover >img:nth-of-type(4){
            transform: rotate(240deg);
        }
        .pkBox:hover >img:nth-of-type(5){
            transform: rotate(300deg);
        }
        .pkBox:hover >img:nth-of-type(6){
            transform: rotate(360deg);
        }

<div class="pkBox">
    <img src="../images/pk1.png" alt="">
    <img src="../images/pk2.png" alt="">
    <img src="../images/pk1.png" alt="">
    <img src="../images/pk2.png" alt="">
    <img src="../images/pk1.png" alt="">
    <img src="../images/pk2.png" alt="">
</div>

5.6 同时添加多个transform属性值

单独写两个transform是无效的，后面的会覆盖前面的，所以需要合并起来写，用空格隔开

无效写法：

transform: translateX(100px);

transform: rotate(-90deg);

有效写法：

transform: translateX(100px) rotate(-90deg);

注意：

transform: rotate(-90deg) translateX(700px);会出问题，因为旋转会将坐标系旋转，所以要先移动再旋转。

同时设置旋转、缩放、斜切三个变换属性：transform: rotate(360deg) scale(2,2) skew(30deg,30deg);

注意：

同时设置多个变换transform属性时，它们的执行顺序是从后向前的

比如：transform: rotate(360deg) scale(2,2) skew(30deg,30deg);

上面变换属性中会先执行skew(30deg,30deg) ，再执行 scale(2,2)，最后再执行 rotate(360deg)

所以：顺序不同变换效果也会不同

应用：打散的盾牌，复原

       *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #31965b;
        }
        .box{
            width: 440px;
            margin:100px auto;
        }
        .box > img{
            transition: transform 1s;
        }
        /*打散盾牌碎片*/
        .box > img:nth-of-type(1){
            transform: translate(100px,100px) rotate(30deg);
        }
        .box > img:nth-of-type(2){
            transform: translate(-100px,-100px) rotate(-30deg);
        }
        .box > img:nth-of-type(3){
            transform: translate(200px,200px) rotate(60deg);
        }
        .box > img:nth-of-type(4){
            transform: translate(-200px,-200px) rotate(-60deg);
        }
        .box > img:nth-of-type(5){
            transform: translate(150px,150px) rotate(90deg);
        }
        .box > img:nth-of-type(6){
            transform: translate(50px,150px) rotate(-90deg);
        }
        .box > img:nth-of-type(7){
            transform: translate(-150px,-150px) rotate(60deg);
        }
        .box > img:nth-of-type(8){
            transform: translate(10px,-250px) rotate(-90deg);
        }
        .box > img:nth-of-type(9){
            transform: translate(-250px,10px) rotate(45deg);
        }

        /*鼠标悬停时,盾牌复原*/
        .box:hover > img{
            /*去掉transform*/
            transform: none;
        }
<div class="box">
    <img src="../images/shield_1_01.png" alt="">
    <img src="../images/shield_1_02.png" alt="">
    <img src="../images/shield_1_03.png" alt="">
    <img src="../images/shield_1_04.png" alt="">
    <img src="../images/shield_1_05.png" alt="">
    <img src="../images/shield_1_06.png" alt="">
    <img src="../images/shield_1_07.png" alt="">
    <img src="../images/shield_1_08.png" alt="">
    <img src="../images/shield_1_09.png" alt="">
</div>