css3 的新特性 +css3 的动画

原创已于 2024-02-29 09:42:11 修改 · 991 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#css3

于 2024-02-29 09:16:04 首次发布

1. css3 新特性
css3的新特性有选择器、盒模型、颜色、背景、边框和阴影、文字效果、布局和流式布局、多列布局、动画和过渡、响应式设计等

选择器：

属性选择器：选择具有特定属性的元素，例如 [attr=value]。
伪类选择器：为特定状态的元素添加样式，例如 :hover、:active、:visited。
伪元素选择器：选择特定部分的元素，例如 ::before、::after。
多重选择器：使用逗号分隔来同时选择多个元素，例如 element1, element2。
盒模型：Box-sizing 属性改变了默认的 CSS 盒模型，使其更容易进行布局。

颜色：

CSS3 增加了对透明度的支持，使用 rgba()、hsla() 或 opacity 来设置。
CSS3 提供了新的颜色空间，如 RGBA、HSL 和 HSLA。
背景：

background-size：允许您更改背景图像的大小。
background-repeat：使您能够更改背景图像的重复行为。
background-position：允许您在水平和垂直方向上移动背景图像。
background-image：允许多背景图像同时使用。
边框和阴影：

border-radius：为边框添加圆角。
box-shadow：为元素添加阴影效果。
文字效果：

text-shadow：为文本添加阴影效果。
text-overflow：处理溢出文本的显示方式。
布局和流式布局：

Flexbox：用于一维布局的 CSS3 新布局模型。
Grid：用于二维布局的 CSS3 新布局模型。
多列布局（Multi-column Layout）：CSS3 提供了一种创建多列文本或布局的方法，类似于报纸的排版。

动画和过渡（Animations and Transitions）：CSS3 支持关键帧动画和过渡效果，用于在 CSS 中创建动态效果。动画可以通过 transition 和 animation 属性进行控制。

响应式设计（Responsive Design）：CSS3 提供了一些特性，如媒体查询（Media Queries），允许开发人员创建在不同设备和屏幕尺寸上都能良好显示的响应式网页设计。

其他特性：

CSS3 增加了对 SVG 图像的支持。
CSS3 提供了一种新的方式来定义字体（@font-face）。
CSS3 支持自定义的伪元素（例如，::before 和 ::after）。
CSS3 支持更复杂的 CSS 选择器，如子选择器（child selectors）、相邻同胞选择器（adjacent sibling selectors）等。
CSS3 支持轮廓（outline）和内轮廓（outline-offset）属性，它们在突出显示元素时非常有用。
CSS3 支持线性渐变（linear gradients）和径向渐变（radial gradients）。
CSS3 支持在页面上直接绘制图形，如矩形、圆形、椭圆等，这是通过使用 canvas 元素和 JavaScript 来实现的。
CSS3 支持生成字体的复杂样式，包括字体装饰（font decorations）如上标（superscript）、下标（subscript）等。
在HTML5中新出现的属性在CSS3中也被支持，如 video, audio, placeholder, input-type-radio, input-type-checkbox, input-type-number, input-type-range, input-type-date, input-type-time, input-type-datetime, input-type-month, input-type-week, input-type-email, input-type-search, input-type-tel, input-type-color, progress, meter, fieldset, output, keygen, datalist, command, map, area, track, wbr 等。这些新属性使HTML5能够更好地支持新的Web应用和新的用户需求。

2. css3 动画
CSS3动画属性可以分为以下几个部分：

Transform
Transform：这个属性虽然看起来可以实现动画的效果，但实际上它更多的是用于图形的变形，而不是真正的动画。
transform 混合属性:
值:
translate(x,y) 偏移/位移右、下是正值左、上是负值
rotate() 旋转单位是deg度正值是顺时针负值是逆时针
skew() 倾斜单位是deg度
scale() 缩放以1为基点 1.2 ==> 宽高 * 1.2
transform-origin: 修改中心点
默认： center middle
left center right top middle bottom
Transition
Transition：这是一个简单的动画属性，它可以用来设置元素在不同状态之间的转换，如透明度的变化、位置的变化等。：这是个名副其实的动画属性，它是Transition属性的扩展，功能非常强大。可以通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现复杂的动画效果。
// 那个属性发生变化了
transition-property: width, height;
// 过渡动画执行时长
transition-duration: 2s;
// 过渡动画执行速度 linear匀速的
transition-timing-function: linear;
// // 过渡动画是否延时执行
transition-delay: 2s;

// transtion 混合属性
transition: width 2s linear ,height 4s linear;
3.帧动画
最核心的是利用CSS3中Animation动画，确切的说是使用animation-timing-function（参考：animation-timing-function）的阶梯函数 steps(number_of_steps, direction)（参考：animation-timing-function）来实现逐帧动画的连续播放。
@keyframes dou {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(15deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-15deg);
}
100% {
transform: rotate(-30deg);
}
// from {
// transform: rotate(0deg);
// }
// to {
// transform: rotate(15deg);
// }
}
// 帧动画名称
animation-name: dou;

// 帧动画时长
animation-duration: 3s;

// 帧动画执行速度
animation-timing-function: linear;

// 帧动画延迟时长
// animation-delay: 1s;

// 帧动画执行次数 infinite无穷、无限
animation-iteration-count: infinite;

// 帧动画是否保留最后一帧 backwards不保留 forwards保留
animation-fill-mode: backwards;

// 帧动画是否反转执行
// animation-direction: reverse;

// 帧动画的执行状态 running播放 paused暂停
animation-play-state: paused;

animation: dou 3s linear 2 forwards;
————————————————