吉林省水土保持生态建设网站,店铺代运营,wordpress生成微信小程序,中国建设教育协会培训中心网站CSS动画
一、触发式动画Transition transition过渡动画#xff0c;一般配合伪类使用 属性值#xff1a; transition-duration#xff1a; 指定过渡效果的持续时间#xff0c;以秒或毫秒为单位。 transition-timing-function#xff1a; 指定过渡效果的时间函数#xff…CSS动画
一、触发式动画Transition transition过渡动画一般配合伪类使用 属性值 transition-duration 指定过渡效果的持续时间以秒或毫秒为单位。 transition-timing-function 指定过渡效果的时间函数即控制过渡速度的函数。常用的值有 ease、linear、ease-in、ease-out、ease-in-out 等。 transition-delay指定过渡效果延迟的时间以秒或毫秒为单位。 transition-property指定要过渡的 CSS 属性。可以指定一个或多个属性
举个例子
.box {width: 100px;height: 100px;background-color: red;transition-property: background-color;transition-duration: 1s;transition-timing-function: ease-in-out;/* 复合属性*/transition: 属性名,过渡时间,时间函数,延迟时间;
}.box:hover {background-color: blue;
}transition 属性只能应用于一些可以被数值化的 CSS 属性例如 width、height、background-color 等。像 display、visibility 等不能被过渡的属性就无法使用 transition 属性来实现动画效果。
此外transition 属性也可以与其他 CSS 动画属性如 animation组合使用以实现更加复杂的动画效果。
二、主动式动画Animation
CSS的 Animation 属性可以实现比 transition 更加复杂、多样化的动画效果。 animation 属性需要指定一个动画名称以及一系列动画选项包括动画的持续时间、时间函数、延迟时间、重复次数、播放方向等。
animation 动画名name) 持续时间(duration)延迟时间(delay动画速率step5运动次数默认一次可选n/infinte)**
具体来说animation 属性有以下几个值
animation-name指定动画的名称通常需要与 keyframes 规则配合使用。keyframes 规则用于定义动画的关键帧即动画从开始到结束的过程中的关键状态。可以通过指定关键帧的百分比或关键字来定义不同的状态。例如
/*定义函数*/
keyframes move {from {left: 0;}to {left: 100px;}
}.box {animation-name: move;animation-duration: 2s;animation-timing-function: linear;/* 复合属性*/animation : move 2s linear;
}在这个例子中定义了一个名为 move 的动画它包含两个关键帧分别在 0% 和 100% 处分别定义了 .box 元素的 left 属性的值。当应用了这个动画后.box 元素会从 left0 的位置平滑过渡到 left100px 的位置。 animation-duration指定动画的持续时间以秒或毫秒为单位。 animation-timing-function指定动画的时间函数即控制动画速度的函数。 可取值ease、linear、ease-in、ease-out、ease-in-out 等。 animation-delay指定动画延迟的时间以秒或毫秒为单位。 animation-iteration-count指定动画的重复次数。 可取值数值如 2、3或关键字如 infinite表示无限重复。 animation-direction指定动画的播放方向。 可取值 normal正常播放、reverse反向播放、alternate正反交替播放、alternate-reverse反正交替播放。 animation-fill-mode指定动画结束后元素的状态 可取值 none: 这是默认值表示动画在播放之前或之后不会影响元素的样式。forwards: 表示动画在结束后元素会保留最后一个关键帧的样式。backwards: 表示动画在开始前元素会应用第一个关键帧的样式。both: 表示动画在开始前和结束后都会应用相应的关键帧的样式。 animation-play-state控制动画的播放状态等。 可取值paused 停止 running 运动起来
需要注意的是动画效果的复杂性通常会影响性能。因此在使用 animation 属性时应尽量避免使用过于复杂的动画效果以免影响页面的性能。
三、Transfrom 动画
Transform 是 CSS3 中的一个属性可以对元素进行变形包括旋转、缩放、扭曲等效果。Transform 可以结合 CSS 的过渡和动画属性使用实现各种有趣的动画效果。
Transform 属性的语法如下
transform: none|transform-functions;其中transform-functions 是一个或多个变形函数可以使用以下变形函数 translate()平移元素 接受 X 和 Y 方向的偏移量 百分比 像素 rotate()旋转元素接受旋转角度可以使用度数或者弧度deg作为单位。 scale()缩放元素接受 X 和 Y 方向的缩放比例可以使用小数或者百分比作为单位。 skew()扭曲元素接受 X 和 Y 方向的扭曲角度可以使用度数或者弧度作为单位。 matrix()可以通过一个 6 个值的矩阵来实现所有变换效果。
除了变形函数还有一些常用的属性
transform-origin指定元素变形的中心点可以设置为一个固定的坐标点也可以设置为相对位置的百分比。transform-style指定元素的子元素是否继承父元素的变形效果可以设置为 flat 或者 preserve-3d。perspective设置元素的透视距离只有在使用 preserve-3d 的情况下才会起作用。
例如以下代码实现了一个旋转和缩放的动画效果
.box {width: 100px;height: 100px;background-color: red;transition: transform 1s ease;
}.box:hover {transform: rotate(45deg) scale(1.2);
}CSS 3D 动画属性是一组可以使用 CSS 实现 3D 动画效果的属性这些属性包括
transform-style指定被转换元素的子元素如何被平移、旋转和缩放。可取值 flat默认值子元素不进行 3D 转换。preserve-3d子元素进行 3D 转换。 perspective指定 3D 转换元素的观察者视角用于模拟真实 3D 空间。值越小视角越近立体感越强。可取值 length表示长度值必须为正数常见单位有 px、em、rem、% 等。 perspective-origin指定 3D 转换元素的观察者视角的位置。可取值 x-axisleft、center、right。y-axistop、center、bottom。z-axislength。 transform-style指定被转换元素的子元素如何被平移、旋转和缩放。可取值 flat默认值子元素不进行 3D 转换。preserve-3d子元素进行 3D 转换。 transform指定元素进行平移、旋转、缩放等变换操作。可取值 translateX(x)沿 x 轴平移。translateY(y)沿 y 轴平移。translateZ(z)沿 z 轴平移。translate3d(x, y, z)三维平移。scaleX(x)沿 x 轴缩放。scaleY(y)沿 y 轴缩放。scaleZ(z)沿 z 轴缩放。scale3d(x, y, z)三维缩放。rotateX(angle)沿 x 轴旋转。rotateY(angle)沿 y 轴旋转。rotateZ(angle)沿 z 轴旋转。rotate3d(x, y, z, angle)三维旋转。skewX(angle)沿 x 轴倾斜。skewY(angle)沿 y 轴倾斜。matrix(n,n,n,n,n,n)矩阵变换。matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)三维矩阵变换。 transition指定元素过渡效果的相关属性。可取值 transition-property指定要过渡的 CSS 属性名称。transition-duration指定过渡效果持续的时间。transition-timing-function指定过渡效果的时间函数。transition-delay指定过渡效果延迟的时间。 animation指定元素动画效果的相关属性。
四、阴影和滤镜样式 box-shadow box-shadow 属性用于在元素周围创建一个阴影效果它可以为一个元素添加立体感和深度感。其基本语法如下 box-shadow: h-shadow v-shadow blur spread color inset;其中各参数的含义如下 h-shadow水平阴影的位置可正可负值为0表示无水平阴影必须设置。v-shadow垂直阴影的位置可正可负值为0表示无垂直阴影必须设置。blur阴影的模糊半径可选值越大阴影越模糊不设置时阴影边缘锐利。spread阴影的扩散半径可选正数表示扩大阴影面积负数表示缩小阴影面积不设置时阴影与元素同大小。color阴影的颜色可选默认为黑色。inset可选表示阴影是否在边框内部不设置时阴影在边框外部。 box-shadow 属性还支持多个阴影多个阴影之间用逗号隔开即可。例如 box-shadow: 2px 2px 10px #666, -2px -2px 10px #666;box-shadow 属性可以为元素添加阴影效果同时还可以通过调整各个参数的值实现不同的阴影效果例如内阴影、多重阴影等。 text-shadow 属性用于为文本添加阴影效果它可以为文本增加立体感和视觉效果。其基本语法如下 text-shadow: h-shadow v-shadow blur color;其中各参数的含义如下 h-shadow水平阴影的位置可正可负值为0表示无水平阴影必须设置。v-shadow垂直阴影的位置可正可负值为0表示无垂直阴影必须设置。blur阴影的模糊半径可选值越大阴影越模糊不设置时阴影边缘锐利。color阴影的颜色可选默认为黑色。 text-shadow text-shadow 属性同样也支持多个阴影多个阴影之间用逗号隔开即可。例如 text-shadow: 1px 1px 2px #000, -1px -1px 2px #fff;上述代码表示为文本添加两个阴影一个在右下方另一个在左上方。第一个阴影的水平偏移量为1px垂直偏移量为1px模糊半径为2px颜色为#000第二个阴影的水平偏移量为-1px垂直偏移量为-1px模糊半径为2px颜色为#fff。 text-shadow 属性可以通过调整各个参数的值实现不同的文本阴影效果。通常为文本添加一个略微模糊、颜色较浅的阴影可以让文本看起来更加立体和清晰。 filter filter 属性是 CSS3 中的一个强大属性它可以为元素添加各种视觉效果如模糊、颜色调整、亮度、对比度、饱和度等。其基本语法如下 filter: filter-function;其中filter-function 是一种滤镜函数用于指定要应用的滤镜效果。常见的滤镜函数有以下几种 blur() 用于模糊元素。参数值表示模糊半径值越大模糊程度越高。 filter: blur(5px);brightness() 用于调整元素的亮度。参数值为一个百分数或小数表示亮度的相对值。值小于 100% 表示降低亮度值大于 100% 表示增加亮度。 filter: brightness(80%);contrast() 用于调整元素的对比度。参数值为一个百分数或小数表示对比度的相对值。值小于 100% 表示降低对比度值大于 100% 表示增加对比度。 filter: contrast(150%);grayscale() 用于将元素转换为灰度图像。参数值为一个百分数或小数表示转换的程度。 filter: grayscale(50%);hue-rotate() 用于调整元素的色相。参数值为一个角度值表示旋转的角度。旋转的角度范围为 0~360 度。 filter: hue-rotate(90deg);invert() 用于反转元素的颜色。参数值为一个百分数或小数表示反转的程度。 filter: invert(50%);opacity() 用于调整元素的透明度。参数值为一个百分数或小数表示透明度的相对值。值小于 100% 表示降低透明度值大于 100% 表示增加透明度。 filter: opacity(50%);saturate() 用于调整元素的饱和度。参数值为一个百分数或小数表示饱和度的相对值。值小于 100% 表示降低饱和度值大于 100% 表示增加饱和度。 filter: saturate(150%);9、sepia() 用于将元素转换为深褐色调的图像。参数值为一个百分数或小数表示转换的程度。 drop-shadow() 用于为元素添加阴影效果。参数值可以包括一个长度值和两个可选的颜色值。第一个参数表示阴影的水平偏移量第二个参数表示阴影的垂直偏移量第三个参数表示阴影的模糊半径第四个参数表示阴影的颜色。如果只有一个长度值则表示阴影的水平和垂直偏移量相同。 filter: drop-shadow(2px 2px 2px #000);url() 用于引用 SVG 图像或定义自定义滤镜。参数值为一个 SVG 文件或 SVG 中定义的一个滤镜标识符。 filter: url(filters.svg#filter-id);上述是一些常见的 filter 函数还有其他一些函数如 url() 、 matrix() 等等。使用 filter 属性可以为网页元素添加一些很酷的视觉效果但同时也需要考虑浏览器兼容性问题。
五、CSS 的3D动画
CSS 3D 动画属性的其他常用属性如下
transform-origin指定元素变换的基点位置默认是元素中心点。可取值 x-axisleft、center、right。y-axistop、center、bottom。z-axislength。 backface-visibility指定元素反面是否可见。可取值 visible默认值反面可见。hidden反面不可见。 perspective-origin指定 3D 转换元素的观察者视角的位置。可取值 x-axisleft、center、right。y-axistop、center、bottom。z-axislength。 transform-style指定被转换元素的子元素如何被平移、旋转和缩放。可取值 flat默认值子元素不进行 3D 转换。preserve-3d子元素进行 3D 转换。 perspective指定 3D 转换元素的观察者视角用于模拟真实 3D 空间。值越小视角越近立体感越强。可取值 length表示长度值必须为正数常见单位有 px、em、rem、% 等。 animation指定元素动画效果的相关属性。可取值 animation-name指定动画名称。animation-duration指定动画效果持续的时间。animation-timing-function指定动画效果的时间函数。animation-delay指定动画效果延迟的时间。animation-iteration-count指定动画重复次数。animation-direction指定动画方向。animation-fill-mode指定动画效果在开始前和结束后如何显示。animation-play-state指定动画的播放状态可以暂停或继续播放。
