背景属性深入理解及动画综合应用

1.背景类常用属性应用

background-color 背景颜色
设置或检索对象的背景颜色，默认值：transparent；

同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上;

CSS中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"

RGB - 如：“rgb(255,0,0)”

颜色名称 - 如：“red”

background-image 背景图片
设置或检索对象的背景图像，默认值：none；

如果设置了 <’ background-image’>，同时也建议设置 <‘background-color’> 用于当背景图像不可见时保持与文本颜色有一定的对比度。

如果定义了多组背景图，且背景图之间有重叠，写在前面的将会盖在写在后面的图像之上。

background-repeat 背景平铺
设置或检索对象的背景图像如何铺排填充。必须先指定 <’ background-image’> 属性。默认值：repeat；

允许提供2个参数，如果提供全部2个参数，第1个用于横向，第二个用于纵向；

repeat-x：背景图像在横向上平铺

repeat-y：背景图像在纵向上平铺

repeat：背景图像在横向和纵向平铺

no-repeat: 背景图像不平铺

background-attachment 背景是否滚动的设置
设置或检索背景图像是随对象内容滚动还是固定的。必须先指定 <‘background-image’> 属性。默认值：scroll

fixed：背景图像相对于窗体固定。

scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。

background-position 背景定位
设置或检索对象的背景图像位置。必须先指定 <" background-image"> 属性。该属性提供2个参数值；

如果提供两个，第一个用于横坐标，第二个用于纵坐标；

如果只提供一个，该值将用于横坐标；纵坐标将默认为50%（即center）

percentage：用百分比指定背景图像填充的位置。可以为负值；

length：用长度值指定背景图像填充的位置。可以为负值；

center：背景图像横向和纵向居中；

left：背景图像在横向上填充从左边开始；

right：背景图像在横向上填充从右边开始；

top：背景图像在纵向上填充从顶部开始；

bottom: 背景图像在纵向上填充从底部开始；

background-origin属性的详解
设置或检索对象的背景图像计算 background-position 时的参考原点(位置)

padding-box：从padding区域（含padding）开始显示背景图像。

border-box：从border区域（含border）开始显示背景图像。

content-box：从content区域开始显示背景图像。

background-clip属性的详解
指定对象的背景图像向外裁剪的区域

padding-box：从padding区域（不含padding）开始向外裁剪背景。

border-box：从border区域（不含border）开始向外裁剪背景。

content-box：从content区域开始向外裁剪背景。

text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩

background-size属性的详解
检索或设置对象的背景图像的尺寸大小。

该属性提供2个参数值(特性值cover和contain除外)。

如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度。

如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放。

取值：

length：用长度值指定背景图像大小。不允许负值。

percentage：用百分比指定背景图像大小。不允许负值。

auto：背景图像的真实大小。

cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。

contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内

2.背景复合属性之background

background: 背景颜色背景图片背景平铺方式背景是否滚动背景定位；

3.雪碧图的使用和制作技巧

代码
想要的图片的大小+背景图原图+背景图的定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .phone{
        width: 35px;
        height: 47px;
        background: black url(../images/xuebitu.png) no-repeat;
        background-position:-380px -174px;
   

    }
    .ipad{
        width: 50px;
        height: 44px;
        background: black url(../images/xuebitu.png) no-repeat;
        background-position:-380px -221px;
    }
    </style>
</head>
<body>
    <div class="phone"></div>
    <div class="ipad"></div>
</body>
</html>

4.炫酷动画之变换 transform

transform变换之translate位移

translate()：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

translateX()：定对象X轴（水平方向）的平移

translateY()：指定对象Y轴（垂直方向）的平移

transform变换之rotate旋转

rotate()：指定对象的2D rotation（2D旋转），需先有 <’ transform-origin ‘> 属性的定义；表示旋转一定的角度；

rotate() = rotate(angle)

rotate3d() = rotate3d(number,number,number,angle)

rotateX() = rotatex(angle)

rotateY() = rotatey(angle)

rotateZ() = rotatez(angle)

transfrom变换之scale缩放

scale()：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值；

scaleX()：指定对象X轴的（水平方向）缩放；

scaleY()：指定对象Y轴的（垂直方向）缩放；

transform-origin元素变换基点

设置或检索对象以某个原点进行转换。

该属性提供2个参数值。

如果提供两个，第一个用于横坐标，第二个用于纵坐标。

如果只提供一个，该值将用于横坐标；纵坐标将默认为50%;

默认值：50% 50%，效果等同于center center

percentage：用百分比指定坐标值。可以为负值。

lenght：用长度值指定坐标值。可以为负值。

left：指定原点的横坐标为left

center①：指定原点的横坐标为center

right：指定原点的横坐标为right

top：指定原点的纵坐标为top

center②：指定原点的纵坐标为center

bottom：指定原点的纵坐标为bottom

5.炫酷动画之过渡 transition

复合属性。检索或设置对象变换时的过渡。

注意：

如果只提供一个参数，则为 <‘transition-duration’> 的值定义；

如果提供二个参数，则第一个为 <’ transition-duration ‘> 的值定义，第二个为 <’ transition-delay’> 的值定义

可以为同一元素的多个属性定义过渡效果,如果需要定义多个过渡属性且不想指定具体是哪些属性过渡,可以用all代替;

transition-property: 检索或设置对象中的参与过渡的属性

检索或设置对象中的参与过渡的属性。

默认值为：all。默认为所有可以进行过渡的css属性。

如果提供多个属性值，以逗号进行分隔。

none：不指定过渡的css属性

all：所有可以进行过渡的css属性

: 指定要进行过渡的css属性

transition-duration: 检索或设置对象过渡的持续时间

检索或设置对象过渡的持续时间,默认值：0；

如果提供多个属性值，以逗号进行分隔；

取值: time 指定对象过渡的持续时间

transition-timing-function : 检索或设置对象中过渡的动画类型
检索或设置对象中过渡的动画类型，默认值：ease；
如果提供多个属性值，以逗号进行分隔。

linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

step-start：等同于 steps(1, start)

step-end：等同于 steps(1, end)

steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。

cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

transition-delay : 检索或设置对象延迟过渡的时间

检索或设置对象延迟过渡的时间,，默认值：0；

如果提供多个属性值，以逗号进行分隔；

time：指定对象过渡的延迟时间

6.炫酷动画之动画 animation

@keyframes 动画帧

指定动画名称和动画效果。

@keyframes定义的动画名称用来被animation-name所使用。

定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：

语法:
@keyframes<identifier> { <keyframes-blocks> }
<keyframes-blocks>：[ [ from | to | <percentage> ]{ sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]*

取值:
** **<identifier>： identifier定义一个动画名称
<keyframes-blocks>：定义动画在每个阶段的样式，即帧动画

@keyframes test {
  0% { opacity: 1; }
  50% { opacity: .5; }
  100% { opacity: 0; }
}

animation-name 动画的名称
检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义

none：不引用任何动画名称

identifier: 定义一个或多个动画名称(identifier标识)

animation-duration 动画的持续时间
检索或设置对象动画的持续时间,默认值：0s

time 指定对象动画的持续时间

animation-timing-function 动画的过渡类型
检索或设置对象动画的过渡类型，默认值：ease；

linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

step-start：等同于 steps(1, start)

step-end：等同于 steps(1, end)

steps([, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。

cubic-bezier(, , , )：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内；

animation-delay 动画延迟的时间
检索或设置对象动画的延迟时间，默认值：0s；

time：指定对象动画延迟的时间

animation-iteration-count 动画的循环次数
检索或设置对象动画的循环次数;

infinite：无限循环

number: 指定对象动画的具体循环次数

animation-direction 动画在循环中是否反向运动
检索或设置对象动画在循环中是否反向运动

normal：正常方向

reverse：反方向运行

alternate：动画先正常运行再反方向运行，并持续交替运行

alternate-reverse：动画先反运行再正方向运行，并持续交替运行

animation-play-state 动画的状态
检索或设置对象动画的状态

running：运动

paused：暂停

animation-fill-mode 动画时间之外的状态
检索或设置对象动画时间之外的状态

none：默认值。不设置对象动画之外的状态

forwards：设置对象状态为动画结束时的状态

backwards：设置对象状态为动画开始时的状态

both：设置对象状态为动画结束或开始的状态

7.背景和动画综合实例

梦幻西游官网首页: http://xyq.163.com/

代码

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
<link rel="stylesheet" href="menghuanxiyou .css">    
</head>

<body>
    <div class="footer">
        <div class="content">
            <div class="west01"></div>
            <div class="west02"></div>
            <div class="west03"></div>
            <div class="west04"></div>
        </div>
    </div>
    <!-- 音乐 autoplay = "autoplay" 自动播放-->
    <audio src="niepan.mp3" autoplay></audio>
</body>

</html>

* {
    margin: 0;
    padding: 0;
}
html,
body {
    width: 100%;
    height: 100%;
    /* 超出我们内容大小的区域隐藏起来 */

}
.footer {
    width: 100%;
    height: 100%;
    background: url(../images/beijingtu.png) no-repeat center;
    background-size: cover;
    /* 超出我们内容大小的区域隐藏起来 */
    overflow: hidden;

}
.content {
    margin: 270px auto 0;
    width: 780px;
    height: 240px;
    /* background-color: yellow; */
}
.west01 {
    width: 200px;
    height: 180px;
    float: left;
    margin-top: 30px;
    background: url(../images/wukong.png) no-repeat;
    /* animation： 动画的名称 west01 动画的持续时间1s  动画的运动曲线(ease平滑  无数字 steps(8))动画的延迟时间 动画的运动次数(循环infinite) 动画的方向 动画的运动状态 动画结束时的状态 */
    animation: west01 1s steps(8) infinite;
}
.west02 {
    width: 200px;
    height: 180px;
    float: left;
    margin-top: 35px;
    background: url(../images/bajie.png) no-repeat;
    animation: west02 1s steps(8) infinite;

}
.west03 {
    width: 170px;
    height: 240px;
    float: left;
    background: url(../images/tangseng.png) no-repeat;
    animation: west03 1s steps(8) infinite;

}

.west04 {
    width: 210px;
    height: 200px;
    float: left;
    margin-top: 30px;
    background: url(../images/shaseng.png) no-repeat;
    animation: west04 1s steps(8) infinite;
}
/* CSS3 animation 动画 
分两步:
+ 通过@keyframes规定好动画的名称 ，名称是我们自己命名的;
0% = from 开始帧  100% = to = 结束帧  0-100 
+ 通过animation去调用上面指定好的动画名称
*/
@keyframes west01 {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -1600px 0;
    }
}
@keyframes west02 {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -1600px 0;
    }
}
@keyframes west03 {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -1360px 0;
    }
}
@keyframes west04 {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -1680px 0;
    }
}

8.3D案例(3D相册)

/* 视距 /
/ 景深，有了它子元素才能产生3D效果 ,加上内核可以实现不同浏览器不同样式 */
perspective: 5000PX;

QQ图片20200110111914.jpg

/* rotateY   从正轴向负轴看，顺时针正 */
 .list li:nth-child(3) {
            transform: translate(-100px)rotateY(-90deg);
        }
------------------------------------------------------------
• 定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：
        @keyframes move {
            from {
                transform: rotateX(0) rotateY(0deg);
            }
            to {
                transform:rotateX(360deg) rotateY(360deg);
            }
        }

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: yellow;

        }

        .bg {
            width: 320px;
            height: 560px;
            position: relative;
            margin: 100px auto;
            background: url("./img/ls_cubeBg.jpg");
            /* 视距 */
            /* 景深，有了它子元素才能产生3D效果 ,加上内核可以实现不同浏览器不同样式 */
            perspective: 5000PX;
        }

        .list {
            /* 规定指定元素的子元素的变换效果是位于3D空间，还是被平展于元素的2D空间 */
            transform-style: preserve-3d;
            list-style: none;
            width: 100%;
            height: 100%;
            animation: 5s move linear infinite;

        }

        .list li {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;

        }

        .list li:nth-child(1) {
            transform: translateZ(100px);
        }

        .list li:nth-child(2) {
            transform: translateZ(-100px)rotateY(180deg);
        }

        /* 从正轴向负轴看，顺时针正 */
        .list li:nth-child(3) {
            transform: translate(-100px)rotateY(-90deg);
        }

        .list li:nth-child(4) {
            transform: translate(100px)rotateY(90deg);
        }

        .list li:nth-child(5) {
            transform: translateY(-100px)rotateX(90deg);
        }

        .list li:nth-child(6) {
            transform: translateY(100px)rotateX(-90deg);
        }

        @keyframes move {
            0% {
                transform: translate(200px) rotateX(90deg);
            }

            50% {
                transform: translate(100px) rotateY(180deg);
            }

            100% {
                transform: translate(100px) rotateZ(90deg);
            }
        }
        .list li img {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="bg">
        <ul class="list">
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>
            <li><img src="./images/10.jpg" alt=""></li>
        </ul>
    </div>
    <script>
    </script>
</body>

</html>

背景属性深入理解及动画综合应用

背景属性深入理解及动画综合应用

1.背景类常用属性应用

2.背景复合属性之background

3.雪碧图的使用和制作技巧

4.炫酷动画之变换 transform

5.炫酷动画之过渡 transition

6.炫酷动画之动画 animation

7.背景和动画综合实例

8.3D案例(3D相册)

猜你喜欢