CSS学习笔记四

星石传说

已于 2023-11-06 12:21:25 修改

阅读量64

点赞数

分类专栏： python篇文章标签： css 学习笔记

于 2023-10-29 12:20:49 首次发布

本文链接：https://blog.csdn.net/2301_78630677/article/details/134101610

版权

python篇专栏收录该内容

104 篇文章 12 订阅

订阅专栏

文章目录

前言
三、过渡与转换
四、过滤器
总结

前言

继续学习CSS

三、过渡与转换

3.1. CSS3转换

CSS3转换 (transition) 允许我们在限定的时间内从一个属性值转换到另一个属性值。

transition-property - 指定要转换的属性
transition-duration - 指定转换发生的持续时间
transition-timing-function - 指定转换的速度在其持续时间内如何变化
transition-delay - 指定过渡效果的延迟（以秒为单位）

过渡效果可以应用于各种CSS属性，包括背景颜色，宽度，高度，不透明度等等。

transition-property 属性

规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。

语法： transition-property: none |all |property;

none：没有属性会获得过渡效果
all ：所有属性都将获得过渡效果
property ：定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔

当光标被移出元素时，它将逐渐变回原来的样式。

transition-timing-function属性

ransition-timing-function属性指定过渡效果的速度曲线。此属性允许一个过渡效果，以改变其持续时间的速度

ease - 动画开始缓慢，然后加速（默认值）。
ease-in - 缓步开始，然后加速，突然停止。
ease-out - 快速启动，但减速停止。
ease-in-out - 类似于ease，但是加速和减速时会有稍微的不同。
linear - 匀速转换。

cubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)。

贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。P0 和 P3
是曲线的起点和终点。P0是（0,0）并且表示初始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态。

nam

3.2. transform:rotate()

CSS3中transform(旋转)允许您翻转，旋转，缩放和倾斜元素。

transform(旋转)是一种让元素更改形状，大小和位置的效果。
rotate() 方法旋转当前的绘图。

rotate()方法根据给定的deg顺时针或逆时针旋转一个元素。
负值将导致逆时针旋转。

3.3. transform-origin属性

transform-origin属性允许您更改已转换元素的位置。该属性的默认值是50%50%，对应于元素的中间。

注意：该属性只有在设置了transform属性的时候才起作用；如果在不设置的情况下，元素的基点默认的是其中心位置。

3.4. translate()和skew()方法

translate()方法从当前位置移动一个元素（根据给定的x轴和y轴的参数）。正值会将元素向下推到其默认位置的右侧，而负值则会将元素向上并拖至其默认位置的左侧。

在下面的例子中，div元素向右移动100px，向下移动80px：

div {
   padding: 50px;
   position: absolute;
   background-color: green;
   transform:translate(100px, 80px);
}

skew()通过给元素设置X轴和Y轴的倾斜角度值来实现倾斜。

3.5. scale()函数和多重转换

scale()方法根据已设定的宽度和高度参数来增加或减少元素的大小。 1代表原始尺寸，2代表原始尺寸的两倍，依此类推。

我们在水平和垂直方向上将第一个div减小0.6倍：

div.first {
   width: 200px;
   height: 100px;
   background-color: red;
   transform: scale(0.6, 0.6);
   color:white;

一次可以使用多个转换。同时旋转和缩放元素的大小就是一个例子。
对元素应用多个变换很简单，只是用空格分开它们

div{
    width: 200px;
    height: 100px;
    background-color: red;
    transform: rotate(35deg) translate(120px);
    color:white;
}

3.6. CSS3动画

动画让一个元素从一种风格逐渐转变为另一种风格。您可以根据需要更改任意数量的CSS属性。关键帧将保存元素在特定时间的样式

@keyframes规则
当您在@keyframes规则中指定CSS样式时，动画将在某些时间从当前样式逐渐变为新样式。要使动画起作用，必须将动画绑定到元素。

以下示例将更改元素的背景颜色三次：动画完成50％，完成70％，动画完成100％时。

div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: 看方法;
    animation-duration: 1s;
}
@keyframes w3cschool {
    0%  {background-color: red;}
    50%  {background-color: yellow;}
    70%  {background-color: blue;}
    100% {background-color: green;}
}

作为使用百分比的替代方法，您可以使用from和to关键字，其中：
from - 为0%的起始点
to - 为100％的结束点

animation-name 属性指定要用于元素的动画。 animation-duration 属性指定所选动画的持续时间。

(animation-timing-function)动画定时功能指定动画的速度曲线。它可以有以下值：

ease - 指定一个慢启动的动画，然后快速，然后慢慢结束（默认值）
linear - 从开始到结束指定一个具有相同速度的动画
ease-in - 指定一个慢启动的动画
ease-out - 指定一个缓慢结束的动画
ease-in-out - 指定一个缓慢的开始和结束的动画
cubic-bezier(n,n,n,n) - 让你在一个cubic-bezier函数中定义你自己的值，可能的值是从 0 到 1 的数值。

animation-delay 属性定义动画何时开始

animation-iteration-count属性确定动画重复的次数。为了使动画永久重复，只需使用无限值:

animation-iteration-count: infinite;

animation-direction属性指定如何应用关键帧，值可以设置为：

normal - 默认值，这意味着它从0%到100%前进。
reverse - 从100%到0%的相反方向播放关键帧
alternate - 动画首先向前，然后向后，然后向前。
alternate-reverse - 动画首先倒退，然后前进，然后倒退。

合并（请注意简写后每一个属性的顺序，不能改变，否则将无法生效）

div {
   animation-name: colorchange;
   animation-duration: 4s;
   animation-timing-function: ease-in;
   animation-delay: 2s;
   animation-iteration-count: infinite;
   animation-direction: reverse;
}

可以简写上面的属性设置成同一个属性，将上面的所有效果进行合并。

div { 
   animation: colorchange 4s ease-in 2s infinite reverse;
}

3.7. 3D转换

三维变换使用基于二维变换的相同属性，如果您熟悉二维变换，你们发现3D变形的功能和2D变换的功能相当类似。CSS3中的3D变换主要包括以下几种功能函数：

除了x轴和y轴，3D转换还引入了Z轴，这使得3D操作成为可能。

3D转换与2D转换非常相似：

在CSS3中3D位移主要包括两种函数translateZ()和translate3d()。translate3d()函数使一个元素在三维空间移动。这种变形的特点是，使用三维向量的坐标定义元素在每个方向移动多少。

X：从左向右移动
Y：从上向下移动
Z：以方框中心为原点，变大
通过rotateX(), rotateY() 和 rotateZ()函数以给定的度数(deg)围绕相应的轴旋转3D空间中的元素。

div.X {
   transform: rotateX(160deg);
}
div.Y {
   transform: rotateY(160deg);
}
div.Z {
   transform: rotateZ(160deg);
}

3D转换方法允许您使用任何CSS长度单位（px,em,%等）

translateX - 水平移动元素
translateY - 垂直移动
translateZ - 移入或移出屏幕。（正值将元素移入，负值移出）

translate3d()方法允许我们按照以下顺序同时传递x，y和z偏移量：

.first {
   transform: translate3d(-25px, 4em, 15px);
}

像translate3d()方法一样，还有scale3d()和rotate3d()，它们适用于3D中的缩放和旋转元素。

perspective定义了如何渲染3D场景的深度。将视角看作从观众到物体的距离。值越大，距离越远，视觉效果越不强烈，子元素所呈现的边缘越小。

在为一个元素定义perspective属性时，它是获取perspective视图的子元素，而不是元素本身。

四、过滤器

CSS过滤器属性允许您将模糊或颜色变换等图形效果应用于元素。
过滤器通常用于调整图像、背景和边框的渲染。
如果要为同一图像设置不同的样式，则图像过滤非常有用。

您可以只上载一个图像，然后使用“过滤器”属性定义视觉效果，而不是将多个图像上载到网站。

过滤函数包涵：
blur(),
brightness(),
contrast(),
drop-shadow(),
grayscale(),
hue-rotate(),
invert(),
opacity(),
saturate()
sepia().

drop-shadow()函数

drop-shadow(w h b c)创建阴影效果，该效果通过模糊b和颜色c延伸到宽度w和高度h的图像之外。w、 h和b是以像素为单位的值

.dropshadow {
filter: drop-shadow(5px 9px 2px blue);}

4.1. 过滤函数

grayscale()函数

灰度函数(grayscale Function)将图像转换为grayscale 。唯一的参数定义转换的比例。
0%灰度(grayscale )是原始图像，而100%使图像完全灰度(grayscale )化。任何负值都会使图像保持不变。

sepia()函数

sepia函数将图像转换为sepia。
这类似于使用grayscale ，但具有红棕色（reddish-brown ）色调。
0%的sepia为原始图像，而100%的sepia将图像完全转换为乌贼墨(sepia)

saturate()函数

saturate函数可以控制图像的颜色饱和度。唯一的参数确定应用于图像的饱和度比例。
该参数可以是百分比值或数字。
0%创建完全不饱和的图像（灰度），而100%是原本的图像。

saturate()函数是可以接受超过100%的值。

hue-rotate()函数

hue-rotate()函数将色调旋转（基于颜色圈）应用于图像。该函数将旋转角度作为其参数。角度值定义了颜色圆周围的度数，输入样本将被调整。

invert()函数

invert()函数反转图像的颜色，使暗区域变亮，使亮区域变暗。该函数将转换的比例作为其参数。该参数可以是百分比值或数字。

0%的反转会使图像保持不变，而100%的反转会创建一个与原本图片相同的完全反转的图像。该规范允许值超过100%，但这不会对图像产生进一步的影响。

4.2. opacity与brightness

opacity()函数设置图像的不透明度以更改其透明度。0%不透明度创建完全透明的图像，而100%是原始图像。

brightness()函数可调整图像的亮度，使其看起来更亮或更暗。

amount参数确定图像的亮度级别。该参数可以采用百分比值或数字。
值为0%会导致图像完全为黑色。值为100%时，图像将保持不变。
任何超过100%的量都会产生更亮的图像。任何负值都会使图像变黑。

contrast()函数调整图像的对比度。amount参数可以采用百分比值或数字

模糊(blur)函数将模糊效果应用于图像。

模糊函数只有一个参数radius，它定义屏幕上有多少像素相互混合。（值越大，模糊程度越高）。

该参数指定为CSS长度，但不接受百分比值。如果未提供任何参数，则使用默认值0，使图像保持不变。

4.3. 使用多个CSS过滤器

通过用空格分隔多个CSS过滤器，它们可以一起使用。

以下代码演示了模糊（blur()函数）和色调旋转（hue-rotate()函数）函数的使用：

.filtered {
filter: blur(5px) hue-rotate( 180deg);}

总结

将CSS样式表的知识快速过了一遍，之后就是通过不断实战来加深印象了

醉翁之意不在酒，而在乎山水之间也。

–2023-10-28 筑基篇