提示:过渡属性transition,动画属性animation,转化属性transform,裁剪属性clip-path,倒影属性box-reflect,模糊度属性filter
目录
一、transition
二、animation
三、transform
四、clip-path
五、box-reflect
六、filter
一、transition
过渡:以看见标签从一个属性变化到另一个属性值的过程。
transition-property:指定需要过渡的 CSS 属性。可以是单个属性名称,也可以是多个属性名称的列表,用逗号分隔。例如:width
, height
, color
, 等。
transition-property: width;
transition-duration:定义过渡的持续时间,以秒(s)或毫秒(ms)为单位。例如:0.5s
, 1000ms
transition-duration: .5 s;
transition-timing-function:定义过渡效果的时间函数。常见的时间函数包括 ease
(默认值,慢速开始,然后加速)、linear
(匀速)、ease-in
(慢速开始)、ease-out
(快速结束)、ease-in-out
(慢速开始和结束),以及贝塞尔曲线函数等。
transition-timing-function: linear;
/*塞北尔曲线*/
transition-timing-function: cubic-bezier(0.035, 1.650, 0.670, 1.335);
transition-delay:定义过渡开始之前的延迟时间,以秒(s)或毫秒(ms)为单位。例如:0.2s
, 500ms
。
transition-delay: 0s;
transition:简写属性
/*transition: property duration timing-function delay;*/
transition: width .5s 0s linear;
二、animation
keyframes:动画帧数,通过@来定义动画
@keyframes ani {
from {
width: 100px;
}
to {
width: 1000px;
}
}
@keyframes ani {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-631px);
}
50% {
transform: translateX(-1262px);
}
75% {
transform: translateX(-1893px);
}
100% {
transform: translateX(-2524px);
}
}
animation-name:指定要应用的动画名称,对应于 @keyframes 中定义的动画名称。
animation-name: ani;
animation-duration:指定动画完成一个周期的持续时间,单位可以是秒(s)或毫秒(ms)。
animation-duration: 5s;
animation-timing-function:指定动画的时间函数,控制动画的速度变化,常用的有 linear、ease、ease-in、ease-out、ease-in-out 等。
animation-timing-function: linear;
animation-delay: 指定动画开始前的延迟时间,单位可以是秒(s)或毫秒(ms)。
animation-delay: 0s;
animation-iteration-count: 指定动画的播放次数,可以是一个数字值或者 infinite 表示无限循环播放。
animation-iteration-count: infinite;
animation-direction: 指定动画播放的方向,可以是 normal(默认,从头到尾)、reverse(反向播放)、alternate(正向和反向交替播放)或者 alternate-reverse(反向和正向交替播放)。
animation-direction: reverse;
animation-fill-mode:指定动画在播放前后如何应用样式,可以是 none(默认,不改变样式)、forwards(在动画结束时应用最后一个关键帧的样 式)、backwards(在动画开始时应用第一个关键帧的样式)或者 both(同时应用 forwards 和 backwards)。
animation-fill-mode: forwards;
指定动画的播放状态,可以是 running(默认,播放状态)或者 paused(暂停状态)。
animation-play-state:paused
三、transform
用于对元素进行变换,包括旋转、缩放、移动和倾斜等。它可以通过不同的函数值来实现各种不同的变换效果。转换属性 (不会让标签脱离正常文档流)。
transform-style:设置3d空间
transform-style: preserve-3d;
perspective: 设置透视距离(眼睛到界面的距离视距) 近大远小
perspective: 500px;
translate:沿 x 和 y 轴移动元素。可以单独指定 x 和 y 的偏移量,也可以只指定一个。
transform: translate(50px, 20px);
/*3D场景*/
transform: translate3d(0px,0px,0)
rotate:旋转元素。角度值可以是正值(顺时针旋转)或负值(逆时针旋转)。
transform: rotate(45deg);
/*3D*/
transform: rotate3d(1,1,0,0deg);
scale:缩放元素。可以分别指定 x 和 y 方向上的缩放比例,也可以只指定一个值(等比缩放)。
transform:scale(1);
transform:scale(1,.5);
skew:倾斜元素,沿x或y轴倾斜
transform: skew(0deg);
组合用法: 可以组合多个变换函数来同时应用多种变换效果
transform: rotate3d(1,1,0,0deg) translate3d(0px,0px,0) scale(1) skew(0deg);
四、clip-path
用于剪裁元素的可见部分。通过 clip-path
属性,可以定义一个 SVG 路径或基本形状,来确定元素的可见部分。
circle:裁剪圆形
clip-path: circle(
/* 半径 */
100px
/* 圆心坐标 */
at 0px 0px);
circle:裁剪椭圆形
/* ellipse(x轴半径 y轴半径 at 圆心x 圆心y);*/
clip-path: ellipse(100px 30px at 100px 100px);
clip-path: 裁剪多边形
/*每段裁剪之间用逗号隔开*/
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
五、box-reflect
于创建元素的倒影效果。这个属性允许你在元素的底部添加一个或多个镜像。但需要注意的是,这个属性在大多数现代浏览器中并不被支持。
box-reflect: <direction> <offset> <mask-box-image>;
-
<direction>
:指定了镜像的方向。可以是above
(从上到下)、below
(从下到上)、left
(从左到右)、right
(从右到左)。 -
<offset>
:指定了镜像的偏移量,用于控制镜像相对于元素的位置。 -
<mask-box-image>
:用于指定应用于镜像的遮罩图像。
六、filter
于对元素的可视化效果进行滤镜处理。它可以应用于图像、背景图片、SVG、文本以及任何可以使用 CSS 的可视化元素。
blur()
: 模糊元素,可以指定模糊的半径。
filter: blur(3px);
brightness()
: 调整元素的亮度,可以指定亮度的百分比。
filter: brightness(50%);
contrast()
: 调整元素的对比度,可以指定对比度的百分比。
filter: contrast(200%);
grayscale()
: 将元素转换为灰度图像,可以指定灰度的百分比。
filter: grayscale(50%);
hue-rotate()
: 旋转元素的色相,可以指定旋转的角度。
filter: hue-rotate(90deg);
invert()
: 反转元素的颜色,可以指定反转的百分比。
filter: invert(100%);
opacity()
: 调整元素的不透明度,可以指定不透明度的百分比。
filter: opacity(50%);
saturate()
: 调整元素的饱和度,可以指定饱和度的百分比。文章来源:https://www.toymoban.com/news/detail-841397.html
filter: saturate(200%);
sepia()
: 将元素转换为深褐色,可以指定褐色的百分比。文章来源地址https://www.toymoban.com/news/detail-841397.html
filter: sepia(80%);
到了这里,关于前端小白的学习之路(CSS3 三)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!