vue视频教程 pandas 深度图像 sorting syntax pyqt x86 Web Uploader vue引入组件 后台模板 java后台框架 jquery去除空格 oracle无效的列索引 bootstrap居中对齐 java微服务架构 python的str python中的range函数 python调用函数 python随机整数 python读取字典 java简介 java编程学习入门 java中tostring java8时间 java实现栈 linux用户 javascript实例 unix操作系统下载 小米5c拆机 视频加字幕软件哪个好 html特殊字符 1660ti 渐变事件 ad下载 2k14生涯模式修改器 php购物车 getelementbyid 保留小数点后两位 微信临时链接多久失效 pycharm中文版
当前位置: 首页 > 学习教程  > 编程语言

第十节:CSS3 高级应用

2020/8/11 19:28:40 文章标签:

第八课时:CSS3 高级应用

2.8.1 过渡

CSS3 提供的过渡属性,可以在不使用 Flash 的动画或者 JavaScript 脚本的情况下,为元素从一种 样式转变为另一种样式时添加效果,如:渐显、渐弱、动画快慢 等


transition-property 属性

用于指定应用过渡效果的 CSS 属性的名称,通常在用户将指针移动到元素上时发生,当指定的 CSS 属性改变时,过渡效果才开始

属性值 说明
none 没有属性会获得过渡效果
all 所有属性都将获得过渡效果
property 定义应用过渡效果的 CSS 属性名称,多个名称之间以逗号隔开
语法格式:
transition-property: none | all | property;
<head>
    <style type="text/css">
        /* 设置 div 的宽高,字体变粗 */
        div { width: 400px; height: 200px; font-weight: bold; }
        
        div:hover {
            background-color: blue;
            -webkit-transition-property: background-color;		/* Safari、Chrome 浏览器兼容代码 (-webkit-) */
            -moz-transition-property: background-color;			/* Firefox 浏览器兼容代码 (-moz-) */
            -o-transition-property: background-color;			/* Opera 浏览器兼容代码 (-o-) */
        }
    </style>
</head>
<body>
    <div> 使用 transition-property 属性 改变元素背景颜色 </div>
</body>

transition-duration 属性

定义过渡效果所花费的时间,默认值为 0,常用单位是 秒(s) 或 毫秒(ms)

语法格式:
transition-duration: time;
<head>
    <style type="text/css">
        /* 设置 div 的宽高,字体变粗 */
        div { width: 400px; height: 200px; font-weight: bold; }
        
        div:hover {
            /* 改变元素背景颜色 */
            background-color: blue;
            -webkit-transition-property: background-color;
            -moz-transition-property: background-color;
            -o-transition-property: background-color;
            
            /* 指定过渡效果所花费的时间 */
            -webkit-transition-duration: 5s;		/* Safari、Chrome 浏览器兼容代码 (-webkit-) */
            -moz-transition-duration: 5s;			/* Firefox 浏览器兼容代码 (-moz-) */
            -o-transition-duration: 5s;			/* Opera 浏览器兼容代码 (-o-) */
        }
    </style>
</head>
<body>
    <div> 使用 transition-duration 属性 定义过渡效果发费的时间 </div>
</body>

transition-timing-function 属性

规定过渡效果的速度曲线,默认值为 “ease”

属性值 说明
linear 指定以相同速度开始至结束的过渡效果,等同于:cubic-bezier(0,0,0,1)
ease 指定以慢速开始,然后加快,最后慢慢结束的过渡效果,等同于:cubic-bezier:(0,25,0.1,0,35,1)
ease-in 指定以慢速开始,然后逐渐加快(淡入效果)的过渡效果,等同于:cubic-bezier(0,0,0.58,1)
ease-out 指定以慢速结束(淡出效果)的过渡效果,等同于:cubic-bezier(0,42,0,0.58,1)
ease-in-out 指定以慢速开始和结束的过渡效果,等同于:cubic-bezier(0,42,0,0.58,1)
cubic-bezier(n,n,n,n) 定义用于加速或减速的贝赛尔曲线的形状,它们的值在0~1
语法格式:
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
<head>
    <style type="text/css">
        /* 设置 div 的宽高,字体变粗 */
        div { width: 400px; height: 200px; font-weight: bold; }
        
        div:hover {
            /* 改变元素背景颜色 */
            background-color: blue;
            -webkit-transition-property: background-color;
            -moz-transition-property: background-color;
            -o-transition-property: background-color;
            
            /* 指定过渡效果所花费的时间 */
            -webkit-transition-duration: 5s;
            -moz-transition-duration: 5s;
            -o-transition-duration: 5s;
            
            /* 指定动画以慢速开始和结束的过渡效果 */
            -webkit-transition-timing-function: ease-in-out;	/* Safari、Chrome 浏览器兼容代码 */
            -moz-transition-timing-function: ease-in-out;		/* Firefox 浏览器兼容代码 */
            -o-transition-timing-function: ease-in-out;			/* Opera 浏览器兼容代码 */
        }
    </style>
</head>
<body>
    <div> 使用 transition-duration 属性 指定过渡效果的速度曲线 </div>
</body>

transition-delay 属性

规定过渡效果从何时开始,默认值为 0,常用单位是 秒(s) 或 毫秒(ms)

属性值可以 为 正整数、负整数 和 0

  • 当设置为负数时,过渡动作会从该时间点开始,之前的动作被截取
  • 设置为正数时,过渡动作会延迟触发
语法格式:
transition-delay: time;
<head>
    <style type="text/css">
        /* 设置 div 的宽高,字体变粗 */
        div { width: 400px; height: 200px; font-weight: bold; }
        
        div:hover {
            /* 改变元素背景颜色 */
            background-color: blue;
            -webkit-transition-property: background-color;
            -moz-transition-property: background-color;
            -o-transition-property: background-color;
            
            /* 指定过渡效果所花费的时间 */
            -webkit-transition-duration: 5s;
            -moz-transition-duration: 5s;
            -o-transition-duration: 5s;
            
            /* 指定动画以慢速开始和结束的过渡效果 */
            -webkit-transition-timing-function: ease-in-out;
            -moz-transition-timing-function: ease-in-out;
            -o-transition-timing-function: ease-in-out;
            
            /* 指定动画延迟 2秒触发 */
            -webkit-transition-delay: 2s;	/* Safari、Chrome 浏览器兼容代码 */
            -moz-transition-delay: 2s;		/* Firefox 浏览器兼容代码 */
            -o-transition-delay: 2s;		/* Opera 浏览器兼容代码 */
        }
    </style>
</head>
<body>
    <div> 使用 transition-delay 属性 指定过渡效果延迟触发 </div>
</body>

transition 属性

复合属性,用于在一个 属性中设置 transition-property、transition-duration、transition-timing-function、transition-delay 四个过渡属性

无论单个属性还是简写属性,使用时都可以实现多个过渡效果

如果设置 简写属性 可以设置多种过渡效果,需要为每个过渡属性集中指定所有的值,并且使用逗号进行分隔

语法格式:
transition: property duration timing-function delay;

/* 指定 边框 过渡时间5s,以慢速开始和结束,延迟2秒触发 */
transition: border-radius 5s ease-in-out 2s;

2.8.2 变形

CSS3 中,通过 transform 属性 可以实现变形效果,如:移动、倾斜、缩放 以及 翻转元素 等

认识 transform 属性

transform 属性 的默认值为 none,适用于内联元素和块元素,表示不进行变形

transform-function 用于设置变形函数,可以是一个或多个变形函数列表

transform-function 函数 说明
matrix() 定义矩形变换,即:基于 X 和 Y 坐标重新定位元素的位置
translate() 移动元素对象,即:基于 X 和 Y 坐标重新定位元素
scale() 缩放元素对象,可以使任意元素对象尺寸发生变化,取值包括正数、负数 和 小数
rotate() 旋转元素对象,取值为一个度数值
skew() 倾斜元素对象,取值为一个度数值
语法格式:
transform: none | transform-functions;

2D 转换

transform 属性 可以实现 元素的 平移、缩放、旋转、倾斜 及 旋转 效果,这些变形才做都是以元素的中心点为基准进行的

  1. 平移

    使用 translate() 方法 能够重新定义元素的坐标,实现平移效果。该函数包含两个参数,用于定义 X轴 和 Y 轴坐标

    translate() 方法 移动元素时,基点默认为元素的中心点,然后指定 X 坐标 和 Y 坐标 进行移动

    语法格式:
    transform: translate(x-value, y-value);
    
    <head>
        <style type="text/css">
            /* 设置 div 的宽高,字体变粗 */
            div { width: 400px; height: 200px; }
            
            div {
    			transform: translate(100px, 30px);
                -ms-transform: translate(10px, 20px);		/* IE9 浏览器兼容代码 */
                -webkit-transform: translate(100px, 20px);	/* Safari、Chrome 浏览器兼容代码 */
                -moz-transform: translate(100px, 20px);		/* Firefox 浏览器兼容代码 */
                -o-transform: translate(100px, 20px);		/* Opera 浏览器兼容代码 */
            }
        </style>
    </head>
    <body>
        <div> 使用 translate() 方法 平移元素 </div>
    </body>
    

  1. 缩放

    scale() 用于缩放元素大小,该函数包含两个参数值,分别用来定义 宽度(X轴)和 高度(Y轴)的缩放比例

    x-axis 和 y-axis 参数值可以是 正数、负数 和 小数

    • 正数:放大元素
    • 负数:翻转元素,然后再缩放元素
    • 小数:小于 1 的小数可以缩小元素
    语法格式:
    transform: scale(x-axis, y-axis);
    
    <head>
        <style type="text/css">
            /* 设置 div 的宽高 */
            div { width: 400px; height: 200px; }
            
            div {
    			transform: scale(2,3);
                -ms-transform: scale(2,3);		/* IE9 浏览器兼容代码 */
                -webkit-transform: scale(2,3);	/* Safari、Chrome 浏览器兼容代码 */
                -moz-transform: scale(2,3);		/* Firefox 浏览器兼容代码 */
                -o-transform: scale(2,3);		/* Opera 浏览器兼容代码 */
            }
        </style>
    </head>
    <body>
        <div> 使用 scale() 方法 放大缩放属性 </div>
    </body>
    

  1. 倾斜

    skew() 方法 能够让元素倾斜,该函数包含两个参数值,分别用来定义 X轴 和 Y轴 坐标倾斜的角度

    x-angle 表示相对于 X轴 进行倾斜,y-angle 表示相对于 Y轴 进行倾斜。如果省略了第二个值,则取默认值 0

    语法格式:
    transform: skew(x-angle, y-angle);
    
    <head>
        <style type="text/css">
            /* 设置 div 的宽高 */
            div { width: 400px; height: 200px; }
            
            div {
    			transform: skew(20deg, 30deg);
                -ms-transform: skew(20deg, 30deg);		/* IE9 浏览器兼容代码 */
                -webkit-transform: skew(20deg, 30deg);	/* Safari、Chrome 浏览器兼容代码 */
                -moz-transform: skew(20deg, 30deg);		/* Firefox 浏览器兼容代码 */
                -o-transform: skew(20deg, 30deg);		/* Opera 浏览器兼容代码 */
            }
        </style>
    </head>
    <body>
        <div> 使用 skew() 进行倾斜 </div>
    </body>
    

  1. 旋转

    rotate() 方法 能够旋转指定的元素对象,主要在二维空间内进行操作。该方法允许传入负值,元素将逆时针旋转

    语法格式:
    transform: rotate(angle);
    
    <head>
        <style type="text/css">
            /* 设置 div 的宽高 */
            div { width: 400px; height: 200px; }
            
            div {
    			transform: rotate(30deg);
                -ms-transform: rotate(30deg);		/* IE9 浏览器兼容代码 */
                -webkit-transform: rotate(30deg);	/* Safari、Chrome 浏览器兼容代码 */
                -moz-transform: rotate(30deg);		/* Firefox 浏览器兼容代码 */
                -o-transform: rotate(30deg);		/* Opera 浏览器兼容代码 */
            }
        </style>
    </head>
    <body>
        <div> 使用 rotate() 进行旋转 </div>
    </body>
    

  1. 更改变换的中心点

    transform-origin 属性 可以 改变元素的中心点

    如果一个元素需要设置多种变形效果,可以使用空格把多个变形属性值隔开

    参数值介绍

    • x-axis:定义视图被置于 X轴 的何处。可能的值有:left、center、right、length、%
    • y-axis:定义视图被置于 Y轴 的何处。可能的值有:top、center、bottom、length、%
    • z-axis:定义视图被置于 Z轴 的何处。可能的值有:length
    语法格式:
    transform-origin: x-axis y-axis z-axis;
    
    <head>
        <style type="text/css">
            /* 设置 div 的宽高 */
            div { width: 400px; height: 200px; }
            
            div {
    			transform: rotate(30deg);
                -ms-transform: rotate(30deg);		/* IE9 浏览器兼容代码 */
                -webkit-transform: rotate(30deg);	/* Safari、Chrome 浏览器兼容代码 */
                -moz-transform: rotate(30deg);		/* Firefox 浏览器兼容代码 */
                -o-transform: rotate(30deg);		/* Opera 浏览器兼容代码 */
                
                transform-origin: 20% 40%;			/* 更改原点坐标位置 */
            }
        </style>
    </head>
    <body>
        <div> 使用 transform-origin 属性 更改坐标中心点 </div>
    </body>
    

3D 转换

  1. rotateX() 方法

    用于指定元素围绕 X轴 旋转

    参数 a 用于定义旋转的角度值,单位为 deg。值为正数时,元素围绕 X轴 顺时针旋转,负数时,逆时针旋转

    语法格式:
    transform: rotateX(a);
    
    <head>
        <style type="text/css">
            /* 设置 div 的宽高 */
            div { width: 400px; height: 200px; }
            
            div {
    			transform: rotateX(30deg);
                -ms-transform: rotateX(30deg);		/* IE9 浏览器兼容代码 */
                -webkit-transform: rotateX(30deg);	/* Safari、Chrome 浏览器兼容代码 */
                -moz-transform: rotateX(30deg);		/* Firefox 浏览器兼容代码 */
                -o-transform: rotateX(30deg);		/* Opera 浏览器兼容代码 */
            }
        </style>
    </head>
    <body>
        <div> 使用 rotateX() 方法围绕 X轴 旋转 </div>
    </body>
    

  1. rotateY() 方法

    用于指定元素围绕 Y轴 旋转

    参数 a 用于定义旋转的角度值,单位为 deg。值为正数时,元素围绕 Y轴 顺时针旋转,负数时,逆时针旋转

    语法格式:
    transform: rotateY(a);
    
    <head>
        <style type="text/css">
            /* 设置 div 的宽高 */
            div { width: 400px; height: 200px; }
            
            div {
    			transform: rotateY(30deg);
                -ms-transform: rotateY(30deg);		/* IE9 浏览器兼容代码 */
                -webkit-transform: rotateY(30deg);	/* Safari、Chrome 浏览器兼容代码 */
                -moz-transform: rotateY(30deg);		/* Firefox 浏览器兼容代码 */
                -o-transform: rotateY(30deg);		/* Opera 浏览器兼容代码 */
            }
        </style>
    </head>
    <body>
        <div> 使用 rotateX() 方法围绕 Y轴 旋转 </div>
    </body>
    

    rotateZ() 方法

    rotateZ() 函数 和 rotateX() 函数、rotateY() 函数 功能一样,区别在于 rotateZ() 函数 用于制定一个元素围绕 Z轴 旋转

    仅从视觉角度上看,rotateZ() 函数让元素顺时针或逆时针旋转,与 rotate() 效果等同,但它不是在 2D 平面上的旋转

  2. rotate3D() 方法

    在三维空间里,轴的旋转是围绕一个 [x,y,z] 向量并经过元素原点

    属性值

    • x:代表横向坐标位移向量的长度
    • y:代表纵向坐标位移向量的长度
    • z:代表 Z轴 位移向量的长度
    • angle:角度值,主要用来指定元素在 3D 空间旋转的角度。值为正数时,顺时针旋转,负数时,逆时针旋转

其他转换属性及方法

转换属性 说明
transform 向元素应用 2D 或 3D 转换
transform-origin 允许改变被转换元素的位置
transform-style 规定被嵌套元素如何在 3D 空间中显示
perspective 规定 3D 元素的透视效果
perspective-origin 规定 3D 元素的底部位置
backface-visibility 定义元素在不面对屏幕时是否可见
转换方法 说明
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换没使用 16个值 的4*4矩阵
translate3d(x,y,z) 定义 3D 转换
translateX(x) 定义 3D 转换,仅使用用于 X轴 的值
translateY(y) 定义 3D 转换,仅使用用于 Y轴 的值
translateZ(z) 定义 3D 转换,仅使用用于 Z轴 的值
scale3d(x,y,z) 定义 3D 缩放转换
scaleX3d(x) 定义 3D 缩放转换,通过给定一个 X轴 的值
scaleY3d(y) 定义 3D 缩放转换,通过给定一个 Y轴 的值
scaleZ3d(z) 定义 3D 缩放转换,通过给定一个 Z轴 的值
rotate3d(x,y,z) 定义 3D 旋转
rotateX(x) 定义 X轴 的 3D 旋转
rotateY(y) 定义 Y轴 的 3D 旋转
rotateX(z) 定义 Z轴 的 3D 旋转
perspective(n) 定义 3D 转换元素的透明视图

2.8.3 动画

@keyframes

使用动画之前必须先定义关键帧,一个关键帧表示动画过程中的一个状态

@keyframes 规则用于创建动画,在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐变为新样式的动画效果

属性值:

  • animationname:表示当前动画的名称,将作为引用时的唯一标识,因此不能为空
  • keyframes-selector:关键帧选择器,即指定当前关键帧要应用到的整个动画过程中的位置,值可以是一个 百分比、from 或 to
    • 其中,from 和 0% 效果相同,表示动画的开始,to 和 100% 效果相同,表示动画的结束
  • css-style:定义执行到当前关键帧时对应的动画状态,由 CSS 样式定义,不能为空
语法格式:
@keyframes 'animationname' {
    keyframes-selector{css-styles;}
}


/* 动画完全透明开始,到完全不透明结束 */

@keyframes 'appear' {
    /* 方法一: */
    0% { opacity: 0;}
    100% { opacity: 1;}
    
    /* 方法二: */
    from { opacity: 0;}
    to { opacity: 1;}
    
    /* 方法三:实现淡入淡出效果*/
    from,to {opacity: 0;}		/* 动画开始结束状态为:完全透明 */
    20%,80% { opacity: 1;}		/* 动画的中间状态为:完全不透明 */
}

animation-name 属性

animation-name 属性 用于定义动画名称,为 @keyframes 动画规定名称。初始值为 none,适用于所有块元素和行内元素

animationname 参数用于规定需要绑定到选择器的 keyframe 的名称,如果值为none,则表示不应用任何动画,通常用于覆盖或者取消动画

语法格式:
animation-name: keyframename | none;

div {
    animation-name: header;		/* 绑定动画名称 */
}

@keyframes header {				/* 定义动画效果 */
    from { opacity: 0;}
    to { opacity: 1;}
}

animation-duration 属性

animation-duration 用于定义动画完成所需要的时间,以秒(s)或者毫秒(ms)计算,默认值为 0

语法格式:
animation-duration: time;


div {
    animation-name: header;
    animation-duration: 2s;		/* 设置动画时长 */
}

@keyframes header {
    from { opacity: 0;}
    to { opacity: 1;}
}

animation-timing-function 属性

animation-timing-function 用于规定动画的速度曲线,可以定义使用哪种方式来执行动画效果,默认值为 ease,适用于所有的块元素和行内元素

属性值 说明
linear 动画从头到尾的速度是相同的
ease 默认。动画慢速开始,逐渐加快,再以慢速结束
ease-in 动画慢速开始
ease-out 动画慢速结束
ease-in-out 的哦动画以慢速开始和结束
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0~1 的数值
语法格式:
animation-timing-function: value;


div {
    animation-timing-function: ease-in;
}

animation-delay 属性

animation-delay 属性用于定义执行动画效果之前延迟的时间,即动画什么时候开始

语法格式:
animation-delay: time;


div {
    animation-delay: 2s;		/* 动画延迟 2s 开始 */
}

animation-iteration-count 属性

animation-iteration-count 属性用于定义动画的播放次数。初始值为 1,适用于所有的块元素和行内元素

  • 如果属性值为 number,则用哪个与定义动画播放的次数
  • 如果属性值是 infinite,则指定动画循环播放
语法格式:
animation-iteration-count: number | infinite;


animation-iteration-count: 2;			/* 定义动画播放 2次 */
-webkit-animation-iteration-count: 2;	/* Safari 和 Chrome 浏览器兼容代码 */

animation-direction 属性

animation-direction 属性定义当前动画播放的方向,即动画播放完毕后是否逆向交替循环。适用于所有的块元素和行内元素

该属性有两个值,默认值为 normal,表示动画每次都会正常显示。如果属性值为 alternate,则动画会在奇数次数正常播放,而在偶数次数逆向播放

语法格式:
animation-direction: normal | alternate;


div {
    animation-direction: alternate;				/* 动画会在奇数次数正常播放,偶数次数逆向播放 */
    -webkit-animation-direction: alternate;		/* Safari 和 Chrome 浏览器兼容代码 */
}

animation 属性

与 transition 属性一样,animation 属性也是一个简写属性,用于在一个属性值中设置 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count 和 animation-direction 六个动画属性

使用 animation 属性时,必须指定 animation-name 和 animation-direction 属性,否则持续的时间为 0,并且永远不会播放动画

语法格式:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;


/* 必要属性 */
animation: mymove alternate;

animation: mymove 5s linear 2s 3 normal;		/* mymove 动画,时长5秒,均速播放,延迟2秒播放,播放3次,正常显示 */

本文链接: http://www.dtmao.cc/news_show_100134.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?